Now open the file with web browser and see the magic of note app. Enjoy....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Note</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">My Note</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">
</ul>
<a class="navbar-brand" href="todo.html">To do</a>
<ul class="navbar-nav mr-auto"></ul>
<a class="navbar-brand" href="phone.html">Phone Book</a>
</div>
</nav>
<div class="container my-3 mx-3">
<h1><center>Welcome To Notes </center></h1>
<hr id="featurette-divider" class="featurette-divider">
<br><div class="card">
<div class="card-body">
<h5 class="card-title">Title:</h5>
<input type="text" class="form-control" id="exampleFormControlInput1"><br>
<h5 class="card-title">Write your Note:</h5>
<div class="form-group">
<textarea class="form-control" id="addTxt" rows="3"></textarea>
</div>
<button type="button" class="btn btn-info" id="addButton">Save</button>
</div>
</div>
<hr class="featurette-divider">
<br><center><h2><span style='color:blue'>Your saved Notes :</span></center></h2>
<hr id="card-divider" class="featurette-divider">
<div id="notes" class="row container-fluid">
</div>
<h5 id="heads5" style="display: none; color:red;">Nothing Found !</h5>
<hr class="featurette-divider">
<div id="recentnotes" class="row container-fluid">
</div>
<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/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
<script>
showNotes()
document.getElementById("addButton").addEventListener("click", function (e) {
let addText = document.getElementById("addTxt");
let addTital = document.getElementById("exampleFormControlInput1");
let notesText = localStorage.getItem("notesText");
let notesTextObj;
if (notesText == null) {
notesTextObj = [];
}
else {
notesTextObj = JSON.parse(notesText);
}
obj = {
tital: addTital.value,
text: addText.value
}
notesTextObj.push(obj);
localStorage.setItem("notesText", JSON.stringify(notesTextObj))
addText.value = "";
addTital.value = "";
showNotes()
});
function showNotes() {
let notesText = localStorage.getItem("notesText");
let notesTextObj;
if (notesText == null) {
notesTextObj = [];
}
else {
notesTextObj = JSON.parse(notesText);
}
let months12 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
let html = "";
let titals = "";
let nowDate = new Date();
let date = nowDate.getDate();
let month = nowDate.getMonth();
let year = nowDate.getFullYear();
let cardDate = `${date} ${months12[month]} ${year}`
notesTextObj.forEach(function (element, index) {
html += `
<div class="card mx-2 my-2" style="width: 19rem;">
<div class="card-body">
<p align="right" style="color:choklate" > ${cardDate} </p>
<h5 class="card-title" >${element.tital}</h5>
<p class="card-text">${element.text}</p>
<button class="btn btn-info" onclick="deleteNote(${index})">Delete Note</button>
</div>
</div>
`
})
let notesElement = document.getElementById("notes");
if (notesTextObj.length != 0) {
notesElement.innerHTML = html
}
else {
notesElement.innerHTML = "<h5>Yet You Have Not Created Any <b>Note</b> !</h5>";
}
};
function deleteNote(index) {
let notesText = localStorage.getItem("notesText");
let notesTital = localStorage.getItem("notesTital");
if (notesText == null) {
notesTextObj = [];
}
else {
notesTextObj = JSON.parse(notesText);
}
notesTextObj.splice(index, 1);
localStorage.setItem("notesText", JSON.stringify(notesTextObj))
showNotes();
};
let search = document.getElementById("searchTxt");
search.addEventListener("input", function (e) {
let i = 0
inputValue = search.value.toLowerCase();
cards = document.getElementsByClassName("card mx-2 my-2");
Array.from(cards).forEach(function (element) {
a = element.getElementsByClassName("card-text")[0];
b = element.getElementsByClassName("card-title")[0];
if (a.innerText.toLowerCase().includes(inputValue) || b.innerText.toLowerCase().includes(inputValue)) {
element.style.display = "block";
i++;
document.getElementById("heads5").style.display = "none";
}
else {
element.style.display = "none";
}
if (i == 0) {
document.getElementById("heads5").style.display = "block";
}
})
});
</script>
</html>