Introduction:
In this tutorial, we will build a sticky notes app using HTML, CSS, and JavaScript. You’ll learn how to create dynamic note cards that can be added, edited, and deleted right in the browser. This project will be an excellent opportunity to practice DOM manipulation and event handling using JavaScript.
Things You Will Learn:
In this tutorial, you will learn:
- Creating HTML structure for a sticky notes app
- Styling with CSS to make notes visually appealing
- Using JavaScript to add, edit, and delete notes dynamically
- Event handling for user interaction
Video Tutorial:
I would suggest you to watch the video down below for better understanding on we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks and tutorials related to HTML, CSS and Javascript.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Sticky Notes”. Inside this folder we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Notes</title>
<!--Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Guides:wght@400..700&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome Icons-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
/>
<!-- Stylesheet-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Container that holds the sticky notes and the add button-->
<div class="container">
<!--Add new note button-->
<div id="add-note" class="card">
<i class="fa-solid fa-plus"></i>
<!--Plus icon from Font Awesome-->
</div>
</div>
<!--Font Awesome Icons -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js"
integrity="sha512-6sSYJqDreZRZGkJ3b+YfdhB3MzmuP9R7X1QZ6g5aIXhRvR1Y/N/P47jmnkENm7YL3oqsmI6AK+V6AD99uWDnIw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- Connecting JS File to the HTML File-->
<script src="script.js"></script>
</body>
</html>
CSS:
Enhance the visual look by pasting the CSS code below into your stylesheet.
body {
font-family: "Edu AU VIC WA NT Guides", serif;
font-weight: 400;
font-size: 25px;
font-weight: 600;
font-style: normal;
box-sizing: border-box;
background-color: #fffcf5;
overflow-x: hidden;
}
.container {
width: 100%;
text-align: center;
margin: 1% auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
row-gap: 1em;
gap: 20px;
padding: 20px;
}
.card {
max-width: 100%;
height: 15em;
box-sizing: border-box;
}
.note {
word-wrap: break-word;
overflow: hidden;
border-radius: 10px;
}
#add-note {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100px;
background-color: #1b1a19;
border-radius: 50%;
color: #fffcf5;
margin: 80px auto 0 auto;
}
/*Hides elements like delete button*/
.hide {
display: none;
}
.fa-trash-can {
height: 40px;
width: 40px;
background-color: #fffcf5;
color: #1b1a19;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Part 1: Initaliaing Variables
let addNoteCard = document.getElementById("add-note"); //Button to add new note
const notesContainer = document.querySelector(".container");
//Container for all notes
const colors = ["#FFC645", "#5EB1FF", "#45D264", "#C18FFF", "#DA77BA"]; //Array of random background colors for notes
//Part:2 Function to create a delete button for each note
const createDeleteButton = (noteCard) => {
let deleteButton = document.createElement("button"); //Creating a button element
deleteButton.innerHTML = '<i class="fa-solid fa-trash-can"></i>'; //Trash icon for button
//Event listener to delete the note when the button is clicked
deleteButton.addEventListener("click", (e) => {
noteCard.remove(); //Remove the note from the DOM
});
return deleteButton; //return the delete button to be appended to the note
};
//Part 3: Function to create a new sticky note
const createNoteCard = () => {
let noteCard = document.createElement("div");
noteCard.contentEditable = "false";
noteCard.classList.add("card", "note");
noteCard.style.background = colors[Math.floor(Math.random() * colors.length)];
deleteButton = createDeleteButton(noteCard);
noteCard.appendChild(deleteButton);
//Part 4: Make the note editable when clicked
noteCard.addEventListener("click", (e) => {
deleteButton.classList.add("hide");
noteCard.contentEditable = "true";
e.target.focus();
});
//Part 5:save the note when the user pressed 'Enter'
noteCard.addEventListener("keyup", (e) => {
if (e.key == "Enter") {
noteCard.contentEditable = "false";
deleteButton.classList.remove("hide");
}
});
notesContainer.appendChild(noteCard);
};
//Part 6: add event listener to 'Add note' button to create a new note
addNoteCard.onclick = () => {
createNoteCard();
};
Conclusion:
This sticky notes app is a fun way to practice working with the DOM, events, and styling in a real-world context. You learned how to create interactive elements that respond to user input and how to organize your JavaScript code for better maintainability. Keep experimenting with the design and functionality to make it your own!
