Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create notes taking app using HTML, Bootstrap and JavaScript?
In this tutorial, we will create a notes-taking app using HTML, Bootstrap, and JavaScript. HTML provides the structure, Bootstrap handles the styling and responsive design, and JavaScript adds functionality for adding, displaying, and deleting notes with persistent storage.
Our application will feature a text area for entering notes, an "Add" button to save notes, and a dynamic list displaying all notes with delete functionality. We'll implement local storage to maintain notes even after page refreshes.
Local Storage Overview
Local Storage is browser storage that persists data on the user's computer. Unlike session storage, data remains available across browser sessions until explicitly cleared. The data can be removed using the browser's "clear data/cache" option.
Adding Notes to the List
This function handles adding new notes when users click the "Add" button. It validates input, retrieves existing notes from local storage, adds the new note, and updates the display.
document.getElementById("AddNotesBtn").addEventListener("click", () => {
let todoText = document.getElementById("todoText");
if(!(todoText.value.trim())){
alert("Please write something to create note.");
return;
}
let All_item_notes = localStorage.getItem("All_item_notes");
let NoteListObj;
if (!All_item_notes) NoteListObj = [];
else NoteListObj = JSON.parse(All_item_notes);
NoteListObj.push(todoText.value.trim());
localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj));
todoText.value = "";
DisplayTodoList();
});
Displaying Notes
This function retrieves notes from local storage and dynamically creates HTML elements to display them. Each note includes a delete button with a unique identifier.
function DisplayTodoList(){
let All_item_notes = localStorage.getItem("All_item_notes");
let notes;
if (!All_item_notes) notes = [];
else notes = JSON.parse(All_item_notes);
let html = "";
for(let index = 0; index < notes.length; index++) {
html += `
<p class="card-text" style="margin: 0;">${notes[index]}</p>
<i id="${index}" style="cursor:pointer; color: red; font-size: 18px;" onclick="DelNoteItem(this.id)" class="fa fa-trash"></i>
`;
}
let localStorage_Notes = document.getElementById("All_item_notes");
if (notes.length == 0)
localStorage_Notes.innerHTML = `? No notes for now..`;
else
localStorage_Notes.innerHTML = html;
}
Deleting Notes
This function removes a specific note from the list using the array splice method, updates local storage, and refreshes the display.
function DelNoteItem(ind){
let All_item_notes = localStorage.getItem("All_item_notes");
let 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();
}
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Note Taking App using HTML, Bootstrap & JavaScript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</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; gap: 18px;">
<div class="form-outline w-50 mb-4">
<textarea class="form-control" id="todoText" rows="3" placeholder="Enter your note here..."></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");
let 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: auto; width: 100%; margin-bottom: 10px;">
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #f8f9fa;">
<p class="card-text" style="margin: 0; flex: 1;">${notes[index]}</p>
<i id="${index}" style="cursor:pointer; color: red; font-size: 18px;"
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.trim())){
alert("Please write something to create note.");
return;
}
let All_item_notes = localStorage.getItem("All_item_notes");
let NoteListObj;
if (!All_item_notes) NoteListObj = [];
else NoteListObj = JSON.parse(All_item_notes);
NoteListObj.push(todoText.value.trim());
localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj));
todoText.value = "";
DisplayTodoList();
});
const DelNoteItem = (ind) => {
let All_item_notes = localStorage.getItem("All_item_notes");
let notes;
if (All_item_notes != null)
notes = JSON.parse(All_item_notes);
notes.splice(ind, 1);
localStorage.setItem("All_item_notes", JSON.stringify(notes));
DisplayTodoList();
}
// Load existing notes when page loads
DisplayTodoList();
</script>
</body>
</html>
Key Features
The application includes input validation to prevent empty notes, responsive Bootstrap styling for better user experience, and persistent storage using localStorage. Each note displays with a delete icon that removes the specific note from both the display and storage.
How It Works
When users enter text and click "Add", the application validates the input, stores it in localStorage as a JSON array, and updates the display. The delete functionality removes notes by their index position and updates both storage and display accordingly.
Conclusion
This notes-taking app demonstrates practical use of HTML structure, Bootstrap styling, and JavaScript functionality with localStorage for data persistence. The combination creates a fully functional note-taking application that maintains user data across browser sessions.
733 Views
