diff --git a/Javascript Make Notes/index.html b/Javascript Make Notes/index.html new file mode 100644 index 0000000..85fcfd8 --- /dev/null +++ b/Javascript Make Notes/index.html @@ -0,0 +1,66 @@ + + + + + + + + Notes App + + + + + + + + +
+

Welcome To Magic Notes

+
+
+
Add a note
+
+ +
+ +
+
+
+

Your Notes

+
+
+
+ + + + + + + + diff --git a/Javascript Make Notes/index.js b/Javascript Make Notes/index.js new file mode 100644 index 0000000..2a40d23 --- /dev/null +++ b/Javascript Make Notes/index.js @@ -0,0 +1,71 @@ +// add the data given by user to local storage + +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)); // this section is for updating localstorage with the user value + addTxt.value = ""; + console.log(notesObj); + showNotes(); +}); + +function showNotes() { + let notes = localStorage.getItem("notes"); + if (notes == null) { + notesObj = []; + } else { + notesObj = JSON.parse(notes); + } + let html = ""; + notesObj.forEach(function (element, index) { + html += `
+
+
Note ${index + 1}
+

${element}

+ +
+
`; + }); + let notesElm = document.getElementById("notes"); + if (notes.length != 0) { + notesElm.innerHTML = html; + } else { + notesElm.innerHTML = `Nothing to show ! Use "Add a Note" section above to add notes `; + } +} + +// function to delet note + +function deleteNote(index) { + // console.log("I am deleting !", 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(); +} +let search = document.getElementById("searchTxt"); +search.addEventListener("input", () => { + let inputVal = search.value.toLowerCase(); + // console.log("Input event fired !", inputVal); + let noteCards = document.getElementsByClassName("noteCard"); + Array.from(noteCards).forEach((element) => { + let cardTxt = element.getElementsByTagName("p")[0].innerText; + if (cardTxt.includes(inputVal)) { + element.style.display = "block"; + } else { + element.style.display = "none"; + } + }); +});