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