Material Note App

Developer
Ariana Lynn
Size
4,449 Kb
Views
50,600
  1. Material Note App Previews
  2. Material Note App HTML Codes
  3. Material Note App CSS Codes
  4. Material Note App JS Codes

How do I make an material note app?

Using Google's Guildlines as provided here: https://material.google.com/components/cards.html. What is a material note app? How do you make a material note app? This script and codes were developed by Ariana Lynn on 05 September 2022, Monday.

Material Note App Previews
IQ Test

Material Note App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Note App</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='css/gmyyon.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="nav">	<li class="nav_icon nav_main" data-icon="menu"></li>	<li class="nav_title">Material Note App</li>	<li class="nav_icon nav_down" data-nav="Settings" data-icon="settings"></li>	<li class="nav_icon" data-nav="Dashboard View" data-icon="dashboard"></li>	<li class="nav_icon" data-nav="Full View" data-icon="view_day"></li>
</ul>
<div class="notes">	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="blue">Yuna tickets on sale 24/6</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="yellow">	<img src="http://santoriniparty.com/wp-content/uploads/2015/03/PartyIdeas.jpg"></img>Buy:<br/>Balloons<br/>Streamers<br/>Candles<br/>Clown?</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="green">Clean Desk</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="blue">Finish birthday card</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="yellow">	<img src="http://www.wildcatconservation.org/wp-content/uploads/2013/03/2016-sand-cat-group.jpg"></img>Find home for new cats</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="green">	<img src="http://www.claytonhotelcardifflane.com/wp-content/uploads/2015/09/CLAYTON-FAMILY-ROOM-2048x1024.jpg"></img>Use as inspiration for new room</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="blue">Order custom cake design</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="yellow">Get phone repaired</div>	<div class="note ripple_effect" data-ripple-effect="white" data-note-color="green">call caterers at 01-03947989</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/packery.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Note App - Script Codes CSS Codes

body,
html {	margin: 0;	padding: 0;	background-color: rgb(240, 240, 240);	width: 100%;	height: 100%;	font-family: 'Roboto', sans-serif
}
.notes {	padding: 0 20px;	box-sizing: border-box
}
.note {	width: calc(25% - 25px);	box-sizing: border-box;	padding: 20px;	box-shadow: 0 0 20px -1px grey;	color: white;	cursor: pointer
}
.note img {	margin: -20px -20px 16px;	width: calc(100% + 40px)
}
@media only screen and (max-width: 800px) {	.note {	width: calc(33% - 25px)	}
}
@media only screen and (max-width: 600px) {	.note {	width: calc(50% - 29.5px)	}
}
@media only screen and (max-width: 360px) {	.note {	width: calc(100% - 40px)	}
}
.note.note_expanded {	width: calc(100% - 40px)
}

Material Note App - Script Codes JS Codes

var blue = "#2196F3";
var green = "#8BC34A";
var yellow = "#F9A825";
var x = document.getElementsByClassName("note");
var i;
for (i = 0; i < x.length; i++) {	x[i].style.backgroundColor = eval(x[i].getAttribute('data-note-color'));	var y = $(x[i]).text().length;	if (y < 40) {	x[i].style.fontSize = 280 / y + 9 + 'px'	} else {	x[i].style.fontSize = '17px'	}
}
var url = "https://codepen.io/arianalynn/pen/gMYyoN.js";
$.getScript(url);
var $grid = $('.notes').packery({	itemSelector: '.note',	gutter: 20
});
document.querySelectorAll('.nav_icon[data-icon=dashboard]')[0].onclick = function() {	$('.note').removeClass('note_expanded');	$grid.packery('destroy');	$('.notes').packery({	itemSelector: '.note',	gutter: 20	});
};
document.querySelectorAll('.nav_icon[data-icon=view_day]')[0].onclick = function() {	$('.note').addClass('note_expanded');	$grid.packery('destroy');	$('.notes').packery({	itemSelector: '.note',	gutter: 20	});
}
Material Note App - Script Codes
Material Note App - Script Codes
Home Page Home
Developer Ariana Lynn
Username arianalynn
Uploaded September 05, 2022
Rating 4
Size 4,449 Kb
Views 50,600
Do you need developer help for Material Note App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ariana Lynn (arianalynn) Script Codes
Name
Bubbles in the Sky
Unit.js
404 Error Message
Reveal Effect
Live Voting
Live Chat
Gooey Share Buttons
Material Buttons.css
Loading Loop
Fireworks Show
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!