Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create notes taking app using HTML, Bootstrap and JavaScript?
In this tutorial, we will make a notes-taking app using HTML, Bootstrap, and JavaScript. So, the HTML will use here to add different-different elements, bootstrap will be working here to beautify our design like CSS, and JavaScript will be adding basic functionality like adding and deleting our notes.
Let’s see our HTML design of the UI.
Our UI will contain a simple text area where we will enter our desired note, a button which will use to add our given note to the list of notes and in the list of notes there will be a delete button on each note which will use to delete the note.
We will also implement the functionality that in case user will refresh the page then the to-do’s state will remain same, means it will not be vanished after refreshing the page and this functionality we will be implementing using local storage.
Local Storage − It’s storage in the user computer and it will store the user data so, whenever you will refresh or revisit the page your data will be as it is. The data can be cleared using clear the browser data/cache option available in the browser.
So, the following functions we will implement −
Add a To-do Item to the List
This function will be called when the user will enter something into the section and click the Add button. In case of an empty text input field value, it will generate a toast that field should not be empty.
As local storage stores data in object format so, to add our note to our local storage We will parse the data present in the local storage into readable object format.
We will add an event listener to the Add button as we also have to clear the input field when the Add button will be clicked. So, the event Listener function will be something like this.
document.getElementById("AddNotesBtn").addEventListener("click", ()=>{ let todoText = document.getElementById("todoText"); if(!todoText){ alert("Please write something to create todo.") return; } let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) NoteListObj = []; else NoteListObj = JSON.parse(All_item_notes); NoteListObj.push(todoText.value); localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj)); todoText.value = ""; DisplayTodoList(); });
Display To-do List Items
This function will display all the To-do items which have been appended to the list. Here we will get the item list object from the local storage and if it will not be null then we will parse the object so readable JSON format.
Then we will create list item using html syntax (we can use html syntax in the JavaScript using ` ` and by appending item we can create our html design).
So, after getting the list from the local storage we will traverse through the whole list and create the To-do item element.
This is how our display To-do list item function will be
function DisplayTodoList(){ let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) notes = []; else notes = JSON.parse(All_item_notes); let html = ""; for(let index=0; index<notes.length; index++) { html +=` <div style="height: 3rem; align-item:right; width: 18rem;"< <div style="display: flex; grid-gap: 18px;"> <p class="card-text">${notes[index]}</p> <i id="${index}" style="cursor:pointer; color: red; fontsize: 20px" onclick= "DelNoteItem(this.id)" class="fa fa-trash"></i> </div> </div> `; } let localStorage_Notes = document.getElementById("All_item_notes"); if (notes.length == 0) localStorage_Notes.innerHTML = `🙄 No notes for now..`; else localStorage_Notes.innerHTML = html; }
Delete a To-do Item
This function will perform delete functionality when the user will click on the delete icon and that item will be deleted from the list.
For deletion, we will again get the item list from the local storage, and we will check if the items are present then we will splice items from the first index and we will again set all the rest items after the splice.
So, finally, our delete function code will be −
function DelNoteItem(ind){
let All_item_notes = localStorage.getItem("All_item_notes");
if (All_item_notes != null)
notes = JSON.parse(All_item_notes);
notes.splice(ind, 1);
let str_notes=JSON.stringify(notes);
localStorage.setItem("All_item_notes",str_notes);
DisplayTodoList();
}
Example
Now let’s merge all the JavaScript functions and HTML code into one.
<html> <head> <title>Note taking site using HTML, Bootstrap & JavaScript</title> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> </head> <body> <nav> <p style="font-size: 30px; font-weight: bold; text-align: center;margin-top: 40px;"> Note Taking App </p> </nav> <div class="container my-3"> <div class="card-body"> <h5 class="card-title">Create Your Note</h5> <div style="display: flex; grid-gap: 18px;"> <div class="form-outline w-50 mb-4"> <textarea class="form-control" id="todoText" rows="3"></textarea> </div> <button class="btn btn-primary" id="AddNotesBtn" style= "background-color:skyblue;color: black; height: 60px; width: 90px;"> Add </button> </div> </div> <hr> <h3 style="color:blue">List of your notes..</h3> <hr> <div id="All_item_notes" class="row container-fluid"> </div> </div> <script> const DisplayTodoList=()=>{ let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) notes = []; else notes = JSON.parse(All_item_notes); let html = ""; for(let index=0;index<notes.length;index++) { html +=` <div style="height: 3rem; align-item:right; width: 18rem;"> <div style="display: flex; grid-gap: 18px;"> <p class="card-text">${notes[index]}</p> <i id="${index}" style="cursor:pointer; color: red; fontsize: 20px" onclick= "DelNoteItem(this.id)" class="fa fa-trash"></i> </div> </div> `; } let localStorage_Notes = document.getElementById("All_item_notes"); if (notes.length == 0) localStorage_Notes.innerHTML = `🙄 No notes for now..`; else localStorage_Notes.innerHTML = html; } document.getElementById("AddNotesBtn").addEventListener("click", ()=>{ let todoText = document.getElementById("todoText"); if(!(todoText.value)){ alert("Please write something to create todo.") return; } let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) NoteListObj = []; else NoteListObj = JSON.parse(All_item_notes); NoteListObj.push(todoText.value); localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj)); todoText.value = ""; DisplayTodoList(); }); const DelNoteItem=(ind)=>{ let All_item_notes = localStorage.getItem("All_item_notes"); if (All_item_notes != null) notes = JSON.parse(All_item_notes); notes.splice(ind, 1); let str_notes=JSON.stringify(notes); localStorage.setItem("All_item_notes",str_notes); DisplayTodoList(); } DisplayTodoList(); </script> </body> </html>
As discussed in the procedure when user will enter note and click add button then a new note will be appended to the list of notes, each of the notes will have a delete button at their right side.
Clicking on the delete icon of note will delete the note from the list of notes and update it in the list. The changes will be saved in the local storage and refreshing the web page will not affect the state.
410 Views
