Notes App Using HTML, CSS and JavaScript with [Source Code]

In today’s fast-paced world, keeping track of important information is a necessity. From grocery lists to meeting notes, we rely heavily on technology to stay organized. That’s where note apps come in handy! But have you ever wanted to create your own notes app using HTML, CSS, and JavaScript?

Join Our WhatsApp Community

Join Our Telegram Channel

Well, in this blog post, we’ll guide you through the process of building a fully functional notes app from scratch. So, get ready to unleash your creativity and learn how to build a notes app that’s uniquely yours!

Recently I shared a complete blog post on how to create a Quiz app using JavaScript please check this article first.

What is Notes App?

A notes app is a type of software application that allows users to create, organize, and store text-based notes electronically. These apps can be used to create to-do lists, shopping lists, meeting notes, and other types of notes that help users stay organized and productive. With a notes app, users can easily edit, delete, or share their notes across multiple devices, making it a convenient and practical tool for anyone who wants to keep track of important information on the go.

Steps To Create a Notes-Taking App Using javaScript

Step 1: To create a basic notes app, you’ll first need to set up a basic HTML file that contains the necessary elements for the app’s user interface. In this case, you’ll need a text area element where users can input their notes and a button element that they can click to save their notes. You can also include other UI elements as desired, such as a list of previously saved notes.

Step 2: Next, you’ll need to create a JavaScript function that captures the input from the text area element when the user clicks the “save” button. This function should take the input and save it to an array or object that will store all the notes. You can use the push() method to add the new note to the array, or use an object with key-value pairs to store the notes.

Step 3: Once you’ve saved the notes, you’ll need to create a JavaScript function that retrieves them and displays them in the UI. This function should loop through the array or object of notes and create a new element for each note, such as a list item element or a div element. You can then append these elements to the UI to display the notes to the user.

Step 4: To make the app interactive, you’ll need to add event listeners to the button element so that when the user clicks it, the input is saved and the UI is updated with the new note. You can use the addEventListener() method to add a click event listener to the button, and then call the function you created in step 2 to save the note and the function you created in step 3 to update the UI.

Step 5: To make the app more useful, you can add a feature that allows users to edit or delete previously saved notes. To do this, you’ll need to create additional JavaScript functions that handle these actions when the user clicks on an edit or delete button for a specific note. You can use the splice() method to remove a note from the array or object, and then update the UI to reflect the change.

Step 6: To ensure that the notes persist even after the user closes the app, you can store them in the browser’s local storage. This way, the notes will be saved on the user’s device and can be retrieved the next time they open the app. To do this, you’ll need to modify your save and retrieve functions to use the localStorage object to store and retrieve the notes.

Step 7: To make your notes app more visually appealing and user-friendly, you can add styling using CSS. You can use CSS to change the font, color, and layout of the UI elements, as well as to add animations or other effects to make the app more engaging.

Step 8: Finally, you’ll need to test the app thoroughly to ensure that it works as intended. You can do this by trying out various input scenarios, such as adding, editing, and deleting notes, and checking that the UI and local storage are updated accordingly. You should also test the app

Video Tutorial Notes Taking App Using JavaScript

This video is created by the Wscube Tech YouTube channel please subscribe to this channel for more videos like this one.

If you want to learn more about notes taking apps please watch this video till the end. I highly recommend that you do so, as I have provided detailed explanations of each line of code through written comments and demonstrated the function of each line of code.

Notes App HTML, CSS & JavaScript [Source Codes]

To create an Notes Taking App using HTML CSS & JavaScript, follow the given steps line by line:

Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
Create a index.html file. File name must be index and its extension .html
Create a style.css file. File name must be style and its extension .css

Create a script.js file. File name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Password Generator by clicking on the given download button. It’s free of cost.

First, paste the following codes into your index.html file.

HTML FILE

<!DOCTYPE html>
<!-- Created by www.codingpakistan.com -->
<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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button id="addBtn">
        <i class="fas fa-plus"></i>
        Add Note
    </button>
    <div id="main">
        <!-- <div class="note">
            <div class="tool">
                <i class="fas fa-save"></i>
                <i class="fas fa-trash"></i>
            </div>
            <textarea></textarea>
        </div>
       -->
        <script src="https://kit.fontawesome.com/bf520e6492.js" crossorigin="anonymous"></script>
        <script src="script.js"></script>
</body>
</html>

Second, paste the following codes into your style.css file.

CSS FILE

/* Created by www.codingpakistan.com */
* {
    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;
    right: 10px;
    top: 10px;
    background-color: #2d3436;
    color: white;
    padding: 10px;
    border: 0;
    outline: 0;
    border-radius: 5px;
}
.note {
    width: 400px;
    height: 400px;
    background-color: white;
    margin: 15px;
    margin-top: 55px;
}
.tool {
    width: 100%;
    background-color: #2d3436;
    color: white;
    padding: 5px;
    display: flex;
    justify-content: end;
}
.tool i {
    padding: 5px;
    cursor: pointer;
}
.note textarea {
    border: none;
    width: 100%;
    height: 100%;
    resize: none;
    padding: 10px;
    font-size: 18px;
}
.note textarea:focus {
    border: 0;
    outline: 0;
}

Last, paste the following codes into your script.js file.

JavaScript FILE

// Created by www.codingpakistan.com
const addBtn = document.querySelector("#addBtn")
const main = document.querySelector("#main")
addBtn.addEventListener(
    "click",
    function() {
        addNote()
    }
)
const saveNotes = () => {
    const notes = document.querySelectorAll(".note textarea");
    console.log(notes);
    const data = [];
    notes.forEach(
            (note) => {
                data.push(note.value)
            }
        )
        // console.log(data)
    if (data.length === 0) {
        localStorage.removeItem("notes")
    } else {
        localStorage.setItem("notes", JSON.stringify(data))
    }
}
//  <div class="note">
// <div class="tool">
//     <i class="fas fa-save"></i>
//     <i class="fas fa-trash"></i>
// </div>
// <textarea></textarea>
// </div>
const addNote = (text = "") => {
    const note = document.createElement("div");
    note.classList.add("note")
    note.innerHTML = `
    <div class="tool">
         <i class="save fas fa-save"></i>
         <i class="trash fas fa-trash"></i>
    </div>
    <textarea>${text}</textarea>
    `;
    note.querySelector(".trash").addEventListener(
        "click",
        function() {
            note.remove()
            saveNotes()
        }
    )
    note.querySelector(".save").addEventListener(
        "click",
        function() {
            saveNotes()
        }
    )
    note.querySelector("textarea").addEventListener(
        "focusout",
        function() {
            saveNotes()
        }
    )
    main.appendChild(note);
    saveNotes()
}
(
    function() {
        const lsNotes = JSON.parse(localStorage.getItem("notes"));
        if (lsNotes === null) {
            addNote()
        } else {
            lsNotes.forEach(
                (lsNote) => {
                    addNote(lsNote)
                }
            )
       }
    }
)()

Notes Taking App [Download Source Codes]

That’s all, now you’ve successfully created an images slider in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files.

Notes taking app using javascript with source code