How To Build Notes App Using Html CSS JavaScript ?

Last Updated : 09 Oct, 2023

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= 
"https://kit.fontawesome.com/bf520e6492.js" 
            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();