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!
