This project will help you to understand how to add and delete elements dynamically with the help of Java Script. Also, it will clear your doubts about local storage and session storage.
--------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<title>Magic Notes App</title>
</head>
<body>
<!-- header start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Magic Notes App</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
id="searchTxt"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- header end -->
<!-- div container start -->
<div class="container my-3">
<h2>Welcome to Magic Notes App</h2>
<div class="card">
<div class="card-body">
<div class="form-group">
<h5 class="card-title">Title</h5>
<input class="form-control" id="addTitle" placeholder="Enter Your Title"/>
</div>
<div class="form-group">
<h5 class="card-title">Description</h5>
<textarea
class="form-control"
id="addTxt"
rows = "4"
>
</textarea>
</div>
<button class="btn btn-primary" id="addBtn">Add Note</button>
</div>
</div>
<br />
<h4>My Notes</h4>
<hr />
<div id="notes" class="row container-fluid">
<!-- cards populating dynamically with java script -->
</div>
</div>
<!-- div container ends -->
<!-- Java script -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
<script src="js/app.js"></script>
</body>
</html>
index.js :
-----------
let addBtn = document.getElementById("addBtn");
var notesElm = document.getElementById("notes");
showNotes();
// creating an event to store user entered data into local storage
addBtn.addEventListener("click", function (e) {
let addTitle = document.getElementById("addTitle");
let addTxt = document.getElementById("addTxt");
let notes = localStorage.getItem("notes");
if (notes == null) {
notesObj = [];
} else {
// getting all the notes data in array format
notesObj = JSON.parse(notes);
}
let myObj = {
title: addTitle.value,
desc: addTxt.value,
};
notesObj.push(myObj);
console.log("title and desc", notesObj);
// you can set item only in string , thats why stringify
localStorage.setItem("notes", JSON.stringify(notesObj));
addTitle.value = "";
addTxt.value = "";
showNotes();
});
// function to show elements from local storage
function showNotes() {
let notes = localStorage.getItem("notes");
if (notes == null) {
notesObj = [];
// notesElm.innerHTML = `<h5>No notes Available</h5>`;
} else {
notesObj = JSON.parse(notes); //changing string into array
}
let html = "";
notesObj.forEach(function (element, index) {
console.log(
`element at index ${index} is ${element.title} and ${element.desc}`
);
html += `
<div class="noteCard card my-2 mx-2" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"> ${index + 1} . ${element.title}</h5>
<p class="card-text"> ${element.desc} </p>
<button id= "${index}" class="btn btn-primary" onclick = "deleteNote(this.id)">Delete Note</button>
<button id= "${index}" class="btn btn-secondary" >Edit Note</button>
</div>
</div>
`;
});
// let notesElm = document.getElementById("notes");
if (notesObj.length != 0) {
notesElm.innerHTML = html;
} else {
notesElm.innerHTML = `<h5>No notes Available</h5>`;
}
}
function deleteNote(index) {
console.log("I am deleting", index);
let notes = localStorage.getItem("notes");
if (notes == null) {
notesObj = [];
} else {
notesObj = JSON.parse(notes); //changing string into array
}
notesObj.splice(index, 1);
localStorage.setItem("notes", JSON.stringify(notesObj));
showNotes();
}
// searching in notes
let search = document.getElementById("searchTxt");
search.addEventListener("input", function () {
let inputVal = search.value.toLowerCase();
let noteCards = document.getElementsByClassName("noteCard");
Array.from(noteCards).forEach(function (element) {
let cardTxt = element.getElementsByTagName("p")[0].innerHTML.toLowerCase();
console.log("paragraph insdie card", cardTxt);
if (cardTxt.includes(inputVal)) {
element.style.display = "block";
} else {
element.style.display = "none";
}
});
});
0 Comments