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>
output
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;
}
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);
}
});
});
Now that we have completed our javascript section, Here is our updated output with 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 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.
Post a Comment