Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Notes App" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Notes App" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Notes App [Source Code]
To get the following HTML, CSS & JS code for the Notes App project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
<!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>Notes App</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="top"> <h1>Notes App <img src="notes.png" alt=""></h1> <button class="createBtn">Create</button> </div> <div class="notesContainer"> </div> </div> <script src="index.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { background-color: yellow; max-width: 1250px; margin: 50px auto; } .container { display: flex; align-items: center; justify-content: center; flex-direction: column; } .top { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; margin-bottom: 20px; } .top h1 { display: flex; align-items: center; font-size: 35px; line-height: 35px; } .top h1 img { width: 35px; margin-left: 10px; } .createBtn { font-size: 18px; font-weight: 600; text-transform: uppercase; padding: 10px 30px; letter-spacing: 2px; color: white; background-color: black; border: none; border-radius: 10px; cursor: pointer; } .createBtn:active { transform: scale(0.95); } .notesContainer { display: flex; flex-wrap: wrap; gap: 10px; } .note { position: relative; width: 300px; height: 150px; display: inline; border: 3px dotted black; border-radius: 10px; } .note p { width: 100%; height: 100%; padding: 10px; background-color: transparent; outline: none; } .note img { width: 20px; position: absolute; right: 10px; bottom: 10px; cursor: pointer; }
const notesContainerEl = document.querySelector(".notesContainer"); const createBtnEl = document.querySelector(".createBtn"); // When we click on the create button it creates a note in the notesContainer createBtnEl.addEventListener("click",()=>{ const noteEl = document.createElement("div"); const pEl = document.createElement("p"); const imgEl = document.createElement("img"); noteEl.className = "note"; imgEl.src = "delete.png"; pEl.setAttribute("contenteditable","true") noteEl.appendChild(pEl); noteEl.appendChild(imgEl); notesContainerEl.appendChild(noteEl); }) notesContainerEl.addEventListener("click",(event)=>{ // when we click on the delete img it deletes the entire note. if(event.target.tagName==="IMG"){ event.target.parentElement.remove(); updateNotesStorage(); } // when we click on p note and enter any key then it automatically stored in the localStorage. else if(event.target.tagName==="P"){ noteEls = document.querySelectorAll(".note"); noteEls.forEach(element => { element.onkeyup = function(){ updateNotesStorage(); } }); } }) // To prevent from the enter key button document.addEventListener("keydown",(event)=>{ if(event.key === "Enter"){ document.execCommand("insertLineBreak"); event.preventDefault(); } }) // it shows all the notes which are in the local storage function showNotes(){ notesContainerEl.innerHTML = localStorage.getItem("notes"); } // It updates the local storage function updateNotesStorage(){ localStorage.setItem("notes",notesContainerEl.innerHTML); } // By default it ca showNotes();