From ef95bbb03275edc4f33a0a1df7b940e54c915c45 Mon Sep 17 00:00:00 2001 From: shivflex Date: Sun, 12 Dec 2021 23:11:22 +0530 Subject: [PATCH] Web app to create and store message. A search feature is also present to filter out the desire note. For storage loacalStorage provided by the chrome is used, so the notes won't be vanished when the page is refreshed --- src/scripts/eventPage.js | 95 +++++++++++++++++++++++++++++++ src/styles/header.css | 4 +- src/styles/popup.css | 4 +- src/views/popup.html | 117 +++++++++++++++++++++++++++++++++++---- 4 files changed, 204 insertions(+), 16 deletions(-) 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

+
+
+
+ + + + + + + +