We are going to make a website that will take our notes and saves them for our future use using HTML, CSS and JavaScript .
Prerequisite:
- Basic understanding of HTML, Bootstrap, and JavaScript.
Approach:
- HTML: We will create the basic framework of the website using HTML.
- Bootstrap: makes our work easier as compared to CSS. So we have used Bootstrap to beautify our framework.
- JavaScript: The basic logic of saving the notes and deleting them is inside the index.js file.
Example: Here we first design the structure of our project then we will code for the functionality.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= integrity= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= integrity= "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src= integrity= "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-success"> <a class="navbar-brand" href="#"> <p style="font-size: 30px;"> THE NOTES TAKER </p> </a> </nav> <div class="container my-3"> <h1>Take your Notes here</h1> <div class="card"> <div class="card-body"> <h5 class="card-title"> Add a Note </h5> <div class="form-group"> <textarea class="form-control" id="addTxt" rows="3"> </textarea> </div> <button class="btn btn-primary" id="addBtn" style= "background-color:green"> Add Note </button> </div> </div> <hr> <h1>Your Notes</h1> <hr> <div id="notes" class= "row container-fluid"> </div> </div> <script src="gfg.js"></script> </body> </html> |
Javascript
showNotes(); // If user adds a note, add it to the localStorage let addBtn = document.getElementById("addBtn"); addBtn.addEventListener("click", function(e) { let addTxt = document.getElementById("addTxt"); let notes = localStorage.getItem("notes"); if (notes == null) notesObj = []; else notesObj = JSON.parse(notes); notesObj.push(addTxt.value); localStorage.setItem("notes", JSON.stringify(notesObj)); addTxt.value = ""; showNotes(); }); // Function to show elements from localStorage function showNotes() { let notes = localStorage.getItem("notes"); if (notes == null) notesObj = []; else notesObj = JSON.parse(notes); let html = ""; notesObj.forEach(function(element, index) { html += `<div class="noteCard my-2 mx-2 card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title"> Note ${index + 1} </h5> <p class="card-text"> ${element} </p> <button id="${index}" onclick= "deleteNote(this.id)" class="btn btn-primary"> Delete Note </button> </div> </div>`; }); let notesElm = document.getElementById("notes"); if (notesObj.length != 0) notesElm.innerHTML = html; else notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`; } // Function to delete a note function deleteNote(index) { let notes = localStorage.getItem("notes"); if (notes == null) notesObj = []; else notesObj = JSON.parse(notes); notesObj.splice(index, 1); localStorage.setItem("notes", JSON.stringify(notesObj)); showNotes(); } |
Output: Click here to see live code output
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
