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 –
- Optimus Prime using HTML and CSS Only
- Crafting a 3D Sphere, Cubes, and Intersection Using CSS
- CSS Only Dual Picture Accordion Fold
- 3D Player using HTML and CSS
- Swinging Robot using HTML and CSS Only
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 © 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💖