How to create notes taking site using HTML, Bootstrap and JavaScript ? Last Updated : 18 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity= "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 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(); 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 Comment More infoAdvertise with us Next Article How to create notes taking site using HTML, Bootstrap and JavaScript ? imsushant12 Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies HTML CSS Bootstrap JavaScript-Questions +3 More Similar Reads How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v 7 min read How to Create ToDo App using HTML, CSS, JS and Bootstrap ? We will create a basic todo app to understand the basics of JavaScript. In this web app, one can create a todo list and can remove specific elements from the list.Features or Functionalities to implement:  Interactive and Responsive designResponsive Grid SystemStore and Delete itemsPrerequisites: Ba 2 min read How To Build Notes App Using Html CSS JavaScript ? In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage, so the notes will stay t 4 min read How to make Live Coding Editor using HTML CSS and JavaScript ? In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr 3 min read Create a Bookmark Landing Page using HTML CSS and JavaScript In this article, we are going to implement a Bookmark Landing Page using HTML, CSS, and JavaScript. Users can effortlessly add, manage, and remove bookmarks, resulting in a tidy digital library for their favorite websites. Bookmarking the Landing Page refers to a web page or website where the users 4 min read How to create a dynamic report card using HTML, CSS and JavaScript ? We have to build a website where you can upload your student data like their name and marks in different subjects. And after uploading it will insert the student data in the table as well as, it will show the total marks, average, and pass/fail status. The implementation is done by using HTML and Ja 2 min read How to Create a Portfolio Website using HTML CSS and JavaScript ? A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that 15+ min read Create a Homepage for Restaurant using HTML , CSS and Bootstrap HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s 6 min read Create a Single Page Application using HTML CSS & JavaScript In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more in 4 min read How to Create Section Counter using HTML and CSS ? Section counter is like a card and is useful for webpage footer. It contains details about the company. In this article, we will introduce some predicted data about some companies. We divide this article into two sections, in the first section we will create the normal structure then we will work on 3 min read Like