Sticky notes, those colorful squares of paper often found adorning office walls and computer monitors, have become indispensable tools for organizing tasks, jotting down quick ideas, and setting reminders.
In the digital age, the traditional paper sticky notes have evolved into its electronic counterpart, offering users a convenient way to manage their notes and tasks right from their computers or mobile devices.
Follow this video for complete guidance for creating sticky notes using HTML, CSS and javascript
In this tutorial, we’ll be creating a simple web application for managing digital sticky notes using HTML, CSS, and JavaScript.
By the end of this tutorial, you’ll have built a fully functional sticky note application where you can create, move, and delete notes, simulating the experience of using physical sticky notes but in a digital format.
You may also like : Waving Hand Animation using CSS
Full Source Code for Sticky Notes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<title>Sticky Note Using HTML, CSS and JavaScript</title>
<style type="text/css">
body {
background-color:#EAF2E3;
}
.button {
float: right;
margin: 0px 50px 0 0;
background-color: #E75448;
padding: 10px 15px;
color: white;
font-family: helvetica, arial, sans-serif;
border-radius: 4px;
font-weight: 500;
}
a.button {
text-decoration: none;
}
.invisible {
visbility hidden
}
/* BOARD */
#board {
padding: 100px 30px 30px;
margin-top: 40px;
overflow-y: visible;
@extend .noflick;
}
/* NOTE */
.text p {
font-family: Comic Sans, helvetica, arial, sans-serif;
}
.note {
float: left;
display: block;
position: relative;
padding: 1em;
width: 300px;
min-height: 300px;
margin: 0 30px 30px 0;
background: linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,.25));
background-color: #FFFD75;
box-shadow: 5px 5px 10px -2px rgba(33,33,33,.3);
transform: rotate(2deg);
transform: skew(-1deg,1deg);
transition: transform .15s;
z-index: 1;
}
.note:hover {
cursor: move;
}
textarea {
background-color: transparent;
border: none;
resize: vertical;
font-family: "Gloria Hallelujah", cursive;
width: 100%;
height: 100%;
padding: 5px;
font-size: 12pt;
}
textarea:focus {
outline: none;
border: none;
box-shadow: 0 0 5px 1px rgba(0,0,0,.2) inset;
}
</style>
</head>
<body>
<a href="javascript:;" class="button add_new">Add New Note</a>
<div id="board">
<div class="note draggable">
<div class="text">
<textarea class="cnt" placeholder="Enter note description here"></textarea>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$( ".draggable" ).draggable();
$(".add_new").click(function() {
$sticky = $("<div class='note draggable'><div class='text'><textarea class='cnt' placeholder='Enter note description here'></textarea></div></div>");
$("#board").append($sticky);
$( ".draggable" ).draggable();
});
});
</script>
</body>
</html>
