diff --git a/src/scripts/eventPage.js b/src/scripts/eventPage.js index e69de29..9b48864 100644 --- a/src/scripts/eventPage.js +++ b/src/scripts/eventPage.js @@ -0,0 +1,95 @@ +let addBtn = document.getElementById('addBtn'); + +displayNotes(); + +addBtn.addEventListener('click', function (e) { + let titleTxt = document.getElementById('title'); + let addTxt = document.getElementById('addTxt'); + let notes = localStorage.getItem('notes'); + let titles = localStorage.getItem('titles'); + if (notes == null) { + notesObj = []; + titleObj = []; + } else { + notesObj = JSON.parse(notes); + titleObj = JSON.parse(titles); //converting json string to object + } + titleObj.push(titleTxt.value); + notesObj.push(addTxt.value); + localStorage.setItem('notes', JSON.stringify(notesObj)); + localStorage.setItem('titles', JSON.stringify(titleObj)); //updating the local storage + addTxt.value = ''; + titleTxt.value = ''; + // console.log(notesObj) + displayNotes(); +}); + +//Function to display the notes +function displayNotes() { + let notes = localStorage.getItem('notes'); + let titles = localStorage.getItem('titles'); + if (notes == null) { + notesObj = []; + titleObj = []; + } else { + notesObj = JSON.parse(notes); //converting json string to object + titleObj = JSON.parse(titles); + } + let html = ''; + notesObj.forEach(function (element, index) { + html += `
+ +
+
${titleObj[index]}
+

${element}

+ +
+
`; + }); + + let notesElm = document.getElementById('notes'); + if (notesObj.length != 0) { + notesElm.innerHTML = html; + } else { + notesElm.innerHTML = `No notes are present. Type a note in the above section and click on "Create Note" to add your note`; + } +} + +//Function to delete the notes + +function deleteNote(index) { + let notes = localStorage.getItem('notes'); + let titles = localStorage.getItem('titles'); + if (notes == null) { + notesObj = []; + titleObj = []; + } else { + notesObj = JSON.parse(notes); //converting json string to object + titleObj = JSON.parse(titles); + } + notesObj.splice(index, 1); + titleObj.splice(index, 1); + localStorage.setItem('notes', JSON.stringify(notesObj)); + localStorage.setItem('titles', JSON.stringify(titleObj)); + displayNotes(); +} + +//Searching the notes in search bar + +let search = document.getElementById('searchTxt'); + +search.addEventListener('input', function () { + + let inputVal = search.value.toLowerCase(); + // console.log(inputVal); + let noteCards = document.getElementsByClassName('noteCard'); + Array.from(noteCards).forEach(function (element) { + let cardTxt = element.getElementsByTagName("p")[0].innerText; + + if (cardTxt.includes(inputVal)) { + element.style.display = "block"; + } else { + element.style.display = "none"; + } + }); +}); diff --git a/src/styles/header.css b/src/styles/header.css index eee84a9..42f7a8c 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -1,8 +1,8 @@ -#H1 { +/* #H1 { align-self: center; font-family: "Menlo", monospace; font-size: 30px; color: #2c5aaf; text-shadow: 1px 1px 2px #000000; border-bottom: 2px solid rgb(70, 151, 53); -} +} */ diff --git a/src/styles/popup.css b/src/styles/popup.css index 7263a6a..5d6e3cf 100644 --- a/src/styles/popup.css +++ b/src/styles/popup.css @@ -1,4 +1,4 @@ -body { +/* body { width: 200px; background-image: linear-gradient(#66b3ff, #99ccff); -} +} */ diff --git a/src/views/popup.html b/src/views/popup.html index 7cb102a..8e89a19 100644 --- a/src/views/popup.html +++ b/src/views/popup.html @@ -1,13 +1,106 @@ - - - Save-Notes - - - - - - -

Hello World!

- - \ No newline at end of file + + + + + + Notes App + + + + + +
+

Save_Notes

+
+
+
Add a Note
+
+ + +
+
+ + +
+ +
+
+
+

Your Notes

+
+
+
+ + + + + + + +