How To Build Notes App Using Html CSS JavaScript ?
Last Updated :
25 Jul, 2024
Improve
In this article, we are going learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you to improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage so the notes will stay there and will not be removed on reload.
Prerequisites
Approach
- Firstly, build the basic structure of the app using HTML, using different tags like <div>,<p>,<button> according to the requirement.
- Then, give the styling to the app using CSS, add properties like flex, position, and padding to beautify your app project, and give proper formatting, height, width, and color.
- Now it's time to give functionality to the add note, delete button, and save button. Also, we have to store the notes in the localStorage to save them.
- For Add and Save we have independent functions.
Example: Here we first design the structure of our project and given styling then we will code for the functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Note App</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="btn">
<div class="heading">
<h1>Note Taking App</h1>
</div>
<button id="addBtn">
<i class="fas fa-plus"></i>
Add Note
</button>
</div>
<div id="main">
</div>
<script src=
"https://kit.fontawesome.com/bf520e6492.js"
crossorigin="anonymous">
</script>
<script src="./script.js"></script>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main {
width: 100%;
min-height: 100vh;
padding-bottom: 50px;
background-color: #81ecec;
display: flex;
flex-wrap: wrap;
}
#addBtn {
position: fixed;
left: 18px;
top: 10px;
background-color: #2d3436;
color: white;
padding: 10px;
border: 0;
outline: 0;
border-radius: 5px;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
background-color: #81ecec;
margin-top: 0px;
}
.note {
width: 380px;
height: 260px;
background-color: white;
margin: 15px;
margin-top: 55px;
border-radius: 10px;
margin-left: 20px;
margin-bottom: 30px;
}
.icons {
width: 100%;
background-color: #0d7390;
color: white;
padding: 5px;
display: flex;
justify-content: start;
border-radius: 10px 10px 0px 0px;
}
.icons i {
padding: 5px;
cursor: pointer;
}
.note textarea {
border: none;
width: 100%;
height: 87%;
resize: none;
padding: 10px;
font-size: 18px;
border-radius: 15px;
background-color: beige;
border-radius: 0px 0px 10px 10px;
}
.title-div textarea {
border-radius: 0px 0px 0px 0px;
margin-bottom: -4px;
background-color: #a4cad4;
font-weight: bolder;
font-size: x-large;
}
.heading {
position: fixed;
margin-top: 46px;
color: ivory;
}
.note textarea:focus {
border: 0;
outline: 0;
}
const addBtn = document.querySelector("#addBtn");
const main = document.querySelector("#main");
// Click event listener
addBtn.addEventListener("click", function () {
addNote();
});
// Save button function
const saveNotes = () => {
// Select content textareas
const notes =
document.querySelectorAll(".note .content");
// Select title textareas
const titles =
document.querySelectorAll(".note .title");
const data = [];
notes.forEach((note, index) => {
const content = note.value;
const title = titles[index].value;
console.log(title);
if (content.trim() !== "") {
data.push({ title, content });
}
});
const titlesData =
data.map((item) => item.title);
console.log(titlesData);
localStorage.setItem(
"titles", JSON.stringify(titlesData));
const contentData =
data.map((item) => item.content);
localStorage.setItem(
"notes", JSON.stringify(contentData));
};
// Addnote button function
const addNote = (text = "", title = "") => {
const note = document.createElement("div");
note.classList.add("note");
note.innerHTML = `
<div class="icons">
<i class="save fas fa-save"
style="color:red">
</i>
<i class="trash fas fa-trash"
style="color:yellow">
</i>
</div>
<div class="title-div">
<textarea class="title"
placeholder="Write the title ...">${title}
</textarea>
</div>
<textarea class="content"
placeholder="Note down your thoughts ...">${text}
</textarea>
`;
function handleTrashClick() {
note.remove();
saveNotes();
}
function handleSaveClick() {
saveNotes();
}
const delBtn = note.querySelector(".trash");
const saveButton = note.querySelector(".save");
const textareas = note.querySelectorAll("textarea");
delBtn.addEventListener("click", handleTrashClick);
saveButton.addEventListener("click", handleSaveClick);
main.appendChild(note);
saveNotes();
};
// Loading all the notes those are saved in
// the localstorage
function loadNotes() {
const titlesData =
JSON.parse(localStorage.getItem("titles")) || [];
const contentData =
JSON.parse(localStorage.getItem("notes")) || [];
for (let i = 0;
i < Math.max(
titlesData.length, contentData.length); i++) {
addNote(contentData[i], titlesData[i]);
}
}
loadNotes();
Output:
