How to Create Sticky Notes Using MaterializeCSS

in utopian-io •  6 years ago  (edited)

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

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>

  

(html comment removed: 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 the margin and padding of 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 a border-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 a padding: 3em; and a margin-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 attribute class="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 variable newCol into its list of contents.

Curriculum

  1. Using MaterializeCSS to Create a Basic Homepage Layout For a Business Website

  2. Using MaterializeCSS to Create a Shop Layout For a Business Website


Posted on Utopian.io - Rewarding Open Source Contributors

utopian-io steemstem howto technology nerdgarage
6 years ago by

Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

  • Disagreement on rewards
  • Fraud or plagiarism
  • Hate speech or trolling
  • Miscategorized content or spam

Submit
$43.22
  • Past Payouts $43.22
  • - Author $30.11
  • - Curators $13.10
22 votes
6
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Trending
    • [-]
      ·  6 years ago 

    Hey @gotgame I am @utopian-io. I have just upvoted you!

    Achievements

    • Seems like you contribute quite often. AMAZING!

    Community-Driven Witness!

    I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

    mooncryption-utopian-witness-gif

    Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.03
    • Past Payouts $0.03
    • - Author $0.02
    • - Curators $0.01
    1 vote
    [-]
      ·  6 years ago 

    Thank you for the contribution. It has been approved.

    You can contact us on Discord.
    [utopian-moderator]

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.03
    • Past Payouts $0.03
    • - Author $0.02
    • - Curators $0.01
    1 vote
    [-]
      ·  6 years ago 

    You have a minor misspelling in the following sentence:

    style in order to acheive the oval outline you see around the button.
    It should be achieve instead of acheive.

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.03
    • Past Payouts $0.03
    • - Author $0.02
    • - Curators $0.01
    1 vote
    [-]
      ·  6 years ago 

    The problem that I have is inability to fully grasp the codes, ama need to enrol in kid code camp or @nerdgarage soon.

    Kudos bro, your efforts are obvious.

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.02
    • Past Payouts $0.02
    • - Author $0.02
    • - Curators $0.01
    1 vote
    [-]
      ·  6 years ago 

    Thanks bro.... Means a lot

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.07
    • Past Payouts $0.07
    • - Author $0.05
    • - Curators $0.01
    2 votes
    [-]
      ·  6 years ago 

    My pleasure

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.00