How to Create a Note-Taking Application with JavaScript and Local Storage
In this Javascript tutorial, we will see how to use JavaScript to create a basic note-taking application that allows users to add and delete notes saving and loading notes from local storage.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- fontawesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+
ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<style>
#app{
width: 80%;
margin: 0 auto;
font-family: Arial, sans-serif;
}
#new-note{
display: flex;
align-items: center;
}
#new-note i{
font-size: 24px;
margin-right: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
#new-note i:hover{ color: #0095ff; }
#new-note input{
border: none;
border-bottom: 2px solid #ccc;
font-size: 18px;
padding: 10px;
width: 100%;
transition: all 0.3s ease-in-out;
}
#new-note input:focus{border-bottom: 2px solid #0095ff; outline: none;}
#notes{margin-top: 20px;}
#notes li{
list-style: none;
border-bottom: 1px solid #ccc;
padding: 10px;
display: flex;
align-items: center;
}
#notes li i{
margin-right: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
#notes li i:hover{ color: #0095ff; }
#notes li p{ margin: 0; font-size: 18px;}
</style>
</head>
<body>
<div id="app">
<h1>Note Taking App</h1>
<div id="new-note">
<i class="fas fa-plus"></i>
<input type="text" placeholder="take a new note...">
</div>
<ul id="notes"></ul>
</div>
<script>
// Select the "new note" div, the input field, and the notes list
const newNote = document.querySelector("#new-note");
const noteInput = newNote.querySelector("input");
const notesList = document.querySelector("#notes");
// Check if there are any saved notes in the local storage
// If there are, render them on the page
const savedNotes = JSON.parse(localStorage.getItem("notes")) || [];
if(savedNotes.length > 0)
{
savedNotes.forEach(note => {
const newNoteItem = document.createElement("li");
newNoteItem.innerHTML = `<i class="fas fa-trash"></i><p>${note}</p>`;
notesList.appendChild(newNoteItem);
});
}
// Add an event listener to the "new note" div
newNote.addEventListener("click", addNewNote);
// When the user click on the div, create a new note and add it to the list
// Also, save all notes in the list to the local storage
function addNewNote(e){
e.preventDefault();
const newNoteText = noteInput.value;
if(newNoteText === ""){
return;
}
const newNoteItem = document.createElement("li");
newNoteItem.innerHTML = `<i class="fas fa-trash"></i><p>${newNoteText}</p>`;
notesList.appendChild(newNoteItem);
noteInput.value = "";
const notes = [...notesList.querySelectorAll("li p")].map(note => note.textContent);
localStorage.setItem("notes", JSON.stringify(notes));
}
// Add an event listener to the notes list
notesList.addEventListener("click", deleteNote);
// When the user clicks the delete button next to a note, remove the note from the list
// Also, save all notes in the list to the local storage
function deleteNote(e){
if(e.target.classList.contains("fa-trash")){
e.target.parentElement.remove();
notes = [...notesList.querySelectorAll("li p")].map(note => note.textContent);
localStorage.setItem("notes", JSON.stringify(notes));
}
}
</script>
</body>
</html>
OUTPUT:
if you want the source code click on the download button below
