You are currently viewing Create Sticky Notes Using HTML,CSS and JavaScript Code

Create Sticky Notes Using HTML,CSS and JavaScript Code

Create Sticky Notes Using HTML,CSS and JavaScript Code

Welcome to the Codewithrandom blog. In this blog, we learn how to create Sticky Notes. We use Html, Css, and JavaScript for this Sticky Notes Project. I hope you enjoy our blog so let’s start with a basic Html structure for the Sticky Notes.

HTML Code For Sticky Note

<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 and JavaScript. then we write Css for styling and add JavaScript for the main functionality in Sticky Notes.

Portfolio Website using HTML and CSS (Source Code)

output

Sticky Notes Using HTML,CSS and JavaScript
Sticky Notes Using HTML,CSS and JavaScript

CSS Code For Sticky Note

 @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;
}

Restaurant Website Using HTML and CSS

Html + Css Updated output

Sticky Notes Using HTML,CSS and JavaScript
Sticky Notes Using HTML,CSS and JavaScript

JavaScript Code For Sticky Note

$(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

Sticky Notes Using HTML,CSS and JavaScript
Sticky Notes Using HTML,CSS and JavaScript

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Now that we have completed our Sticky Notes. Here is our updated output with Html, Css, and JavaScript. Hope 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 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

Leave a Reply