From 3f1e832f5678c18c1ec3128b5e998f87263f7326 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 00:37:24 +0530 Subject: [PATCH 1/3] create a templete for project --- Source-Code/NotesKeeper/index.html | 12 ++++++++++++ Source-Code/NotesKeeper/script.js | 0 Source-Code/NotesKeeper/style.css | 0 3 files changed, 12 insertions(+) create mode 100644 Source-Code/NotesKeeper/index.html create mode 100644 Source-Code/NotesKeeper/script.js create mode 100644 Source-Code/NotesKeeper/style.css diff --git a/Source-Code/NotesKeeper/index.html b/Source-Code/NotesKeeper/index.html new file mode 100644 index 0000000..5914054 --- /dev/null +++ b/Source-Code/NotesKeeper/index.html @@ -0,0 +1,12 @@ + + + + + + Notes Keeper + + + + + + \ No newline at end of file diff --git a/Source-Code/NotesKeeper/script.js b/Source-Code/NotesKeeper/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/NotesKeeper/style.css b/Source-Code/NotesKeeper/style.css new file mode 100644 index 0000000..e69de29 From 51bed6bc08d5eca8ff04c85a469a6d701da8a4c9 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 00:53:44 +0530 Subject: [PATCH 2/3] Add the project --- Source-Code/NotesKeeper/index.html | 23 ++++++ Source-Code/NotesKeeper/script.js | 65 +++++++++++++++++ Source-Code/NotesKeeper/style.css | 109 +++++++++++++++++++++++++++++ 3 files changed, 197 insertions(+) diff --git a/Source-Code/NotesKeeper/index.html b/Source-Code/NotesKeeper/index.html index 5914054..3e6a629 100644 --- a/Source-Code/NotesKeeper/index.html +++ b/Source-Code/NotesKeeper/index.html @@ -7,6 +7,29 @@ + + +
+

Welcome to Notes App

+
+
+
+ +
+
+

Your Notes

+
+
No notes added yet.
+
\ No newline at end of file diff --git a/Source-Code/NotesKeeper/script.js b/Source-Code/NotesKeeper/script.js index e69de29..77bc42a 100644 --- a/Source-Code/NotesKeeper/script.js +++ b/Source-Code/NotesKeeper/script.js @@ -0,0 +1,65 @@ +console.log('Welcome to Magic Notes App!'); + +// Function Declaration Before Use +function showNotes() { + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + const notesElem = document.getElementById('notes'); + + if (notesObj.length === 0) { + notesElem.innerHTML = 'No notes added yet.'; + return; + } + + notesElem.innerHTML = notesObj + .map( + (note, index) => ` +
+

Note ${index + 1}

+

${note}

+ +
+ `, + ) + .join(''); +} + +// Event Listener for Add Note Button +document.getElementById('myBtn').addEventListener('click', () => { + const textArea = document.getElementById('textarea'); + const noteContent = textArea.value.trim(); + if (!noteContent) { + alert('Please enter a note!'); + return; + } + + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + notesObj.push(noteContent); + localStorage.setItem('notes', JSON.stringify(notesObj)); + textArea.value = ''; + showNotes(); +}); + +// Delete Note Function +// eslint-disable-next-line no-unused-vars +function deleteNote(index) { + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + notesObj.splice(index, 1); + localStorage.setItem('notes', JSON.stringify(notesObj)); + showNotes(); +} + +// Search Notes +document.getElementById('search').addEventListener('input', function () { + const inputVal = this.value.toLowerCase().trim(); + const noteBoxes = document.getElementsByClassName('noteBox'); + + Array.from(noteBoxes).forEach((element) => { + const boxTxt = element + .querySelector('.paraHeading') + .innerText.toLowerCase(); + element.style.display = boxTxt.includes(inputVal) ? 'block' : 'none'; + }); +}); + +// Initial Call +showNotes(); diff --git a/Source-Code/NotesKeeper/style.css b/Source-Code/NotesKeeper/style.css index e69de29..b6f5f85 100644 --- a/Source-Code/NotesKeeper/style.css +++ b/Source-Code/NotesKeeper/style.css @@ -0,0 +1,109 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + padding: 20px; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #333; + padding: 10px 20px; + color: white; +} + +.navbar #logo { + font-size: 24px; + font-weight: bold; +} + +.navbar ul { + list-style: none; + display: flex; +} + +.navbar ul li { + margin-left: 20px; +} + +.navbar ul li a { + color: white; + text-decoration: none; + font-size: 18px; +} + +.form-group input { + padding: 5px; + margin-right: 10px; +} + +.form-group button { + padding: 5px 10px; + background-color: #ff6700; + border: none; + color: white; + cursor: pointer; +} + +.container { + margin-top: 30px; +} + +.note-input { + background: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.note-input label { + font-size: 18px; + font-weight: bold; +} + +.note-input textarea { + width: 100%; + padding: 10px; + margin-top: 10px; + border: 1px solid #ccc; + border-radius: 5px; + resize: none; +} + +.note-input button { + margin-top: 10px; + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.hrStyle { + margin: 20px 0; +} + +.notesBox { + background: white; + display: flex; + gap: 30px; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + min-height: 100px; + text-align: center; + font-size: 18px; + color: #555; +} + +.buttonHeading { + padding: 5px 20px; +} From ccee6d68dda4145d0fbde50f300803d28b32bb59 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 00:56:41 +0530 Subject: [PATCH 3/3] update the readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index aec14bb..ad3dbb5 100644 --- a/README.md +++ b/README.md @@ -397,6 +397,17 @@ In order to run this project you need: +
  • +
    +Notes Keeper +

    The Notes Keeper App is a web-based application designed for creating, storing, and managing personal notes. It offers a simple and intuitive interface for adding, searching, and deleting notes using local storage, ensuring data persistence across sessions.

    + +
    +
    • +

    (back to top)