Sticky Notes Javascript source code | Sticky Notes Html Css Javascript

Sticky Notes Javascript source code | Sticky Notes Html Css Javascript

Sticky Notes Javascript source code | Sticky Notes Html Css Javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Sticky Notes. We use HTML, Css, and javascript for this Sticky Notes. I hope you enjoy our blog so let's start with a basic HTML structure for the Sticky Notes.

HTML Code 

 <html>  
 <head>  
 <title>Sticky Note Web Widget</title>  
 <link rel = "stylesheet" type = "text/css" href = "sticky.css"></link>  
 <script src = "https://code.jquery.com/jquery-3.6.0.min.js"   
     integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   
           crossorigin = "anonymous">  
 </script>  
 </head>  
 <body>  
 <div>  
   <ul>  
    <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #1</h2>  
     <p>Text Content #1</p>  
     </a>  
    </li>  
    <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #2</h2>  
     <p>Text Content #2</p>  
     </a>  
    </li>  
    <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #3</h2>  
     <p>Text Content #3</p>  
     </a>  
    </li>  
    <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #4</h2>  
     <p>Text Content #4</p>  
     </a>  
    </li>  
    <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #5</h2>  
     <p>Text Content #5</p>  
     </a>  
    </li>  
    <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #6</h2>  
     <p>Text Content #6</p>  
     </a>  
    </li>  
       <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #7</h2>  
     <p>Text Content #7</p>  
     </a>  
    </li>  
       <li>  
     <a href = "#" contenteditable = "true">  
     <h2>Title #8</h2>  
     <p>Text Content #8</p>  
     </a>  
    </li>  
   </ul>  
 </div>   
 </body>  
 </html>  
There is all the HTML code for the Sticky Notes. Now, you can see an output with CSS, then we write javascript for the Sticky Notes.
output
Sticky Notes Javascript source code | Sticky Notes Html Css Javascript

CSS code

 @import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');  
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&display=swap');  
 div {  
  margin: 20px auto;  
  width: 70%;  
  font-family: 'Lato';  
  padding: 5px;  
  background:#666;  
  color:#fff;  
 }  
 *{  
  margin:0;  
  padding:0;  
 }  
 h4 {  
  font-weight: bold;  
  font-size: 2rem;  
 }  
 p {  
  font-family: 'Reenie Beanie';  
  font-size: 2rem;  
 }  
 ul,li{  
  list-style:none;  
 }  
 ul{  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: center;  
 }  
 ul li a{  
  text-decoration:none;  
  color:#000;  
  background:#ffc;  
  display:block;  
  height:10em;  
  width:10em;  
  padding:1em;  
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);  
  transition: transform .15s linear;   
 }  
 ul li{  
  margin:1em;  
 }  
 ul li:nth-child(odd) a{  
  transform:rotate(-4deg);  
  position:relative;  
  top:5px;  
 }  
 ul li:nth-child(even) a{  
  transform:rotate(4deg);  
  position:relative;  
  top:5px;  
 }  
 ul li:nth-child(3n) a{  
  transform:rotate(-3deg);  
  position:relative;  
  top:-5px;  
 }  
 ul li:nth-child(5n) a{  
  transform:rotate(5deg);  
  position:relative;  
  top:-10px;  
 }  
 ul li a:hover,ul li a:focus{  
  box-shadow:10px 10px 7px rgba(0,0,0,.7);  
  transform: scale(1.25);  
  position:relative;  
  z-index:5;  
 }  
 ul li:nth-child(even) a{  
  position:relative;  
  top:5px;  
  background:#cfc;  
 }  
 ul li:nth-child(3n) a{  
  position:relative;  
  top:-5px;  
  background:#ccf;  
 }  
Css Updated output
Sticky Notes Javascript source code | Sticky Notes Html Css Javascript

Javascript code 

 $(document).ready(function () {  
  all_notes = $("li a");  
  all_notes.on("keyup", function () {  
   note_title = $(this).find("h2").text();  
   note_content = $(this).find("p").text();  
   item_key = "list_" + $(this).parent().index();  
   data = {  
    title: note_title,  
    content: note_content  
   };  
   window.localStorage.setItem(item_key, JSON.stringify(data));  
  });  
  all_notes.each(function (index) {  
   data = JSON.parse(window.localStorage.getItem("list_" + index));  
   if (data !== null) {  
    note_title = data.title;  
    note_content = data.content;  
    $(this).find("h2").text(note_title);  
    $(this).find("p").text(note_content);  
   }  
  });  
 });  
Final output
Sticky Notes Javascript source code | Sticky Notes Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Sticky Notes. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Sticky Notes using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post