Notes Taking App using JavaScript

Greetings, fellow coders! Are you looking to build a useful application that can boost your productivity and organization skills? Look no further, because in this blog post, we will be creating a Notes Taking App using JavaScript. With this app, you can easily jot down your thoughts, ideas, and to-do lists, and keep them all in one place for easy access. Not only will you be able to create a practical tool that you can use in your daily life, but you will also sharpen your JavaScript programming skills by working with fundamental concepts such as data storage, user input, and DOM manipulation. So, let’s roll up our sleeves and get ready to build something great!

Before we start here are some more projects you might like to create –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Notes App using JavaScript</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <!-- FONT AWESOME CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
</head>

<body>
    <!-- Further code here -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container col-xl-11 col-xxl-8">
        <a class="navbar-brand" href="#">Coding Torque</a><button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span
                class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button
                    class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>
<div class="container col-xl-11 col-xxl-8 my-4">
    <!-- ADD NOTE FORM -->
    <div class="mb-3">
        <label for="title" class="form-label">Title</label><input type="text" class="form-control" id="title"
            placeholder="Title Here...">
    </div>
    <div class="mb-3">
        <label for="description" class="form-label">Description</label><textarea class="form-control"
            id="description" rows="3" placeholder="Description Here..."></textarea>
    </div><button id="addNote" class="btn btn-primary">Add Note</button>
    <hr>
    <h4>Notes</h4>
    <hr>
    <div class="container-fluid row row-cols-md-3 p-0" id="notesContainer">
        <!-- Notes Cards Here -->
    </div>
</div>
</div>
<!-- FOOTER -->
<footer class="py-2 bg-dark text-white text-center">
    <div class="container col-xl-11 col-xxl-8">
        <p>Copyright &copy; 2020-21 | Coding Torque</p>
    </div>
</footer>

CSS Code

Since we are using bootstrap in this project, we don’t need css.

JavaScript Code

Create a file script.js and paste the code below.

showNotes();

const addNoteBtn = document.getElementById("addNote");

addNoteBtn.addEventListener("click", () => {
    // Getting Title and Description
    let title = document.getElementById("title").value;
    let description = document.getElementById("description").value;

    let notes = localStorage.getItem("notes");
    if (notes == null) {
        notesObj = [];
    } else {
        notesObj = JSON.parse(notes);
    }

    // Adding Note in notes 
    newNote = {
        "title": title,
        "description": description
    }

    notesObj.push(newNote);

    // Setting notes object in localstorage
    localStorage.setItem("notes", JSON.stringify(notesObj));
    showNotes();
});

function showNotes() {
    let notes = localStorage.getItem("notes");

    if (notes == null) {
        notesObj = [];
    } else {
        notesObj = JSON.parse(notes);
    }

    let cardsGroup = "";

    // Getting Notes object and generating notes cards group

    notesObj.forEach(function (element, index) {
        cardsGroup += `<div class="card border-primary m-3" style="max-width: 18rem;">
                <div class="card-header fw-bold" id="cardTitle">${element.title}</div>
                <div class="card-body text-primary"><p class="card-text">${element.description}</p></div>
                <div class="container-fluid p-0 pb-2"><button class="btn btn-danger" id="${index}" onclick="deleteNote(${this.id})">Delete</button></div></div>`;
    });
    let notesContainer = document.getElementById("notesContainer");

    if (notesObj.length != 0) {
        notesContainer.innerHTML = cardsGroup;
    } else {
        notesContainer.innerHTML = `<b class="text-danger">No notes to show =( <br>Please Add Some Notes!</b>`;
    }
}
function deleteNote(index) {
    let notes = localStorage.getItem("notes");

    if (notes == null) {
        notesObj = [];
    } else {
        notesObj = JSON.parse(notes);
    }// Deleting Note
    notesObj.splice(index, 1);
    localStorage.setItem("notes", JSON.stringify(notesObj));
    showNotes();
}

Final Output

Written by: Piyush Patil

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖