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.
HTML
<!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= crossorigin="anonymous"> </script> <script src="./script.js"></script> </body> </html> |
CSS
* { 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; } |
Javascript
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:
Output
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
