-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
90 lines (82 loc) · 2.88 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
console.log('Welcome to magice note app');
showNotes();
//if users add note at localstorege
let addBtn = document.getElementById("addBtn");
addBtn.addEventListener("click", function (e) {
let addText = document.getElementById("addText");
let addTitle = document.getElementById("addTitle");
let notes = localStorage.getItem("notes");
if (notes == null) {
notesObj = [];
} else {
notesObj = JSON.parse(notes);
}
//creating object.
let myObj={
title: addTitle.value,
text: addText.value,
}
//notesObj.push(addText.value);
notesObj.push(myObj); //array of Object.
localStorage.setItem("notes", JSON.stringify(notesObj));//notes is key it use to fetch the value from local storage.
addText.value = " "; //use to clear the lable after add the note
//addTitle.value =" "; // ,,
//console.log(notesObj);
showNotes();
});
//function to show elements from local storege.
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">${element.title}</h5>
<p class="card-text">${element.text}</p>
<button id="${index}" onclick="deleteNode(this.id)" class="btn btn-primary">Delete Note</butoon>
</div>
</div>`;//Object Litral use to show the card after refersh.
});
let notesElm = document.getElementById('notes');
if (notesObj.length != 0) {
notesElm.innerHTML = html;
} else {
notesElm.innerHTML = `Nothing to show you "Add some notes in text area"`;
}
addTitle.value="";//use to clear title lable setion after adding a note.
}
//function to delete node.
function deleteNode(index) {
//console.log('I am reading', 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();
}
//search item
let search = document.getElementById('searchTxt');
search.addEventListener("input", function () {
let inputVal = search.value;
///console.log("Input event fire", inputVal);
let noteCard = document.getElementsByClassName("noteCard");
Array.from(noteCard).forEach(function (element) {
let cardTxt = element.getElementsByTagName("p")[0].innerText;
if (cardTxt.includes(inputVal)) {
element.style.display = "block";
} else {
element.style.display = "none";
}
// console.log(cardTxt);
})
});