What Will I Learn
At times it can be hard to keep track of the tasks while working, for that reason in this tutorial we will learn how to build a simple sticky note application using MaterializeCSS framework and simple JQuery commands.
At the end of this tutorial we would have built a simple layout containing a few rows of editable notes and a button that allows the user to add a new column containing an editable note.
In other words this tutorial will teach you the following
How to make the contents of any HTML element editable without using forms.
How to append new content to existing content on an HTML page.
Using CSS transitions to effect the appearance of your elements when events occur on the page.
Requirements
- Code Editor
- Latest version of any web browser
- Ionicons Library For Icons
- JQuery Library
- MaterializeCSS Framework
- You can download the full source code for this tutorial from Github.
Difficulty
Basic
Tutorial Content
The final output in pictures
The picture below shows the first note section during an ongoing edit
After downloading and setting up the materializecss environment we can then move on to adding HTML code for the application .
HTML
Add the following code in the <body></body> tag of your index.html
<nav class = "light-blue accent-2">
<div class="nav-wrapper">
<a href="#" class="brand-logo center"><i class="ion-android-add"></i></a>
</div>
</nav>
<div class="row">
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
<div class="col l4 m6 s12">
<a href="#">
<h2 class="note-header" contenteditable="true">Title</h2>
<p class="note-content" contenteditable="true">Description</p>
</a>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/sticky.js"></script>
</body>
</html>
Analysis
The layout is opened with a
<nav></nav>containing the content of the navigation bar which in this case is a button that will trigger the.append()function when clicked.Inside the
<nav>we have a new<div class="nav-wrapper"></div>which handles the styles and components wrapped outside the navigation area.Inside the
class="nav-wrapper"element we add a link which will be styled as the button that will handle the append operation described earlier.Directly below the closing tag for the
<nav>area we create a new row using<div class="row"></div>.Inside the new row we create 9 new columns using
<div class="col l4 m6 s12"></div>as default content plus the opportunity to add more content.Each column section is wrapped around an
<a href="#></a>which ultimately turns the column into a link.Inside link we have a
<h2 class="note-header" contenteditable="true"></h2>which the header/title content for each note.The
contenteditable="true"attribute will set the content of the section as editable.Below the title section we create a new paragraph using
<p class="note-content" contenteditable="true"></p>which house the actual content of the sticky note.
CSS
Add the following code in your style.css file.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Lucida Handwriting', serif;
font-size: 100%;
margin: 3em;
background: #004d40;
color: #fff;
}
nav {
border-radius: 50%;
width: 200px;
}
.note-header, .note-content {
font-size: 100%;
font-weight: normal;
overflow: hidden;
overflow-wrap: break-word;
}
.row {
padding: 3em;
margin-left: 3%;
}
.row .col.l4.m6.s12 a {
text-decoration: none;
color: #000;
background: #a7ffeb;
display: block;
height: 20em;
width: 20em;
padding: 1em;
overflow: hidden;
-moz-box-shadow: 5px 5px 7px rgb(255, 255, 255);
-webkit-box-shadow: 5px 5px 7px rgba(255, 255, 255, 0.7);
box-shadow: 5px 5px 7px rgba(255, 255, 255, 0.7);
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;
-webkit-transition:-webkit-transform .15s linear;
}
.note-header {
font-size: 140%;
font-weight: bold;
padding-bottom: 10px;
overflow: hidden;
}
.note-content {
font-family: 'Lucida Handwriting', sans-serif;
font-size: 180%;
overflow: hidden;
}
.row .col.l4.m6.s12 {
margin: 2em;
float: left;
}
.col.l4.m6.s12 {
width: 20em;
height: 20em;
}
.row .col.l4.m6.s12:nth-child(even) a {
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
top: 5px;
background: #40c4ff;
}
.row .col.l4.m6.s12:nth-child(3n) a {
-o-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
position: relative;
top: -5px;
background: #dce775;
}
.row .col.l4.m6.s12:nth-child(5n) a {
-o-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
position: relative;
top: -10px;
}
.row .col.l4.m6.s12 a:hover,.row .col.l4.m6.s12 a:focus {
-moz-box-shadow: 10px 10px 7px rgba(255, 255, 255, 0.7);
-webkit-box-shadow: 10px 10px 7px rgba(255, 255, 255, 0.7);
box-shadow: 10px 10px 7px rgba(255, 255, 255, 0.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position: relative;
z-index: 5;
}
.row .col.l4.m6.s12 a.new-note-1 {
background: #dce775;
}
.row .col.l4.m6.s12 a.new-note-2 {
background: #40c4ff;
}
.row .col.l4.m6.s12 a.new-note-3 {
background: #a7ffeb;
}
.ion-android-add {
height: 30px !important;
line-height: 30px !important;
margin-left: 15px;
}
.brand-logo.center {
height: 30px;
border: 2px solid #a7ffeb;
width: 50px;
height: 30px !important;
margin-top: 20px;
}
Analysis
*: We start the CSS code blocks by setting themarginandpaddingof all elements on the page to zero
body: We then go ahead to set the general styles for all the page content inside the body element.
nav: The next block sets the styles for the navigation bar , here we give the navbar aborder-radius: 50%;style in order to achieve the oval outline you see around the button
.note-header, .note-content: The next code block will set the styles for the contents of each note title and the description for notes.The most notable styles for this section include
overflow: hidden;which restricts the contents of the note from appearing beyond the area where they're supposed to appear in each note.overflow-wrap: break-word;which enables the word-wrap and allows the content of each note to start on a new line once it gets to the end of the present line.
.row: Carrying on we set the styles for the row by giving it apadding: 3em;and amargin-left: 3%;.
.row .col.l4.m6.s12 a: The next block of code contains styling for the link present inside each column.In here we set the background, text style, width, transition, height and box-shadow for each note area.
.note-header: All styling for the title section of the note goes here, this block of code is specific to the title of each note.
.note-content: All styling for the description section of the note goes here, this section is specific to the description section of each note.
.row .col.l4.m6.s12: This block handles styles specific to each column element.
.row .col.l4.m6.s12:nth-child(even) a: This block of code handles the styling for all link contained in all second columns from each from each other.The block of code handles the transform styles responsible for tilting the notes to the right.
.row .col.l4.m6.s12:nth-child(3n) a: This block of code handles the styling for all link contained in all third columns from each from each other.The block of code handles the transform styles responsible for tilting the notes to the left.
.row .col.l4.m6.s12 a:hover,.row .col.l4.m6.s12 a:focus: In here we set the styles for box-shadow and transitions of the links contained in each column.The styles in this section will enable the size of the image to be enlarged whenever the cursor hovers over it or the element comes into focus.
JQuery
Place the following code into your .js file or inside a script in your index.html file.
$(document).ready(function() {
$(".brand-logo").click(function() {
var newCol = '<div class="col l4 m6 s12"><a href="#"><h2 class="note-header" contenteditable="true">Title</h2><p class="note-content" contenteditable="true">Description</p></a></div>';
$(".row").append(newCol);
});
});
Analysis
The JQuery code is responsible for adding new note whenever the element it is assigned to is clicked
Starting with
$(document).ready(function() { });which simply tells the browser not to work on the script until the document/page has completely loaded.The next line uses
$(".brand-logo").click(function() { });to select any element with attributeclass="brand-logo"and listen for a click event for that element.Whenever the click event occurs the function then executes the following code
var newCol = '<div class="col l4 m6 s12"><a href="#"><h2 class="note-header" contenteditable="true">Title</h2><p class="note-content" contenteditable="true">Description</p></a></div>';
$(".row").append(newCol);
The first statement creates a variable and initializes it with the HTML code for to add onclick.
The next statement then picks the element with
class="row"and appends the contents of the variablenewColinto its list of contents.
Curriculum
Using MaterializeCSS to Create a Basic Homepage Layout For a Business Website
Using MaterializeCSS to Create a Shop Layout For a Business Website
Posted on Utopian.io - Rewarding Open Source Contributors