tajulafreen · tajulafreen · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024
diff --git a/README.md b/README.md
@@ -397,6 +397,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Notes Keeper</summary>
+<p>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.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/NotesKeeper/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/NotesKeeper">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/NotesKeeper/index.html b/Source-Code/NotesKeeper/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notes Keeper</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div id="logo">Notes App</div>
+        <ul>
+            <li><a href="#">Home</a></li>
+        </ul>
+        <form class="form-group" action="#">
+            <input type="search" name="search" id="search" placeholder="Search">
+            <button id="btn" type="submit">Search</button>
+        </form>
+     </nav>
+
+     <div class="container">
+        <h1>Welcome to Notes App</h1>
+        <div class="note-input">
+            <label for="textarea">Add a Note</label><br>
+            <textarea name="textarea" id="textarea" cols="80" rows="5" placeholder="Type your note here..."></textarea><br>
+            <button id="myBtn">Add Note</button>
+        </div>
+        <hr class="hrStyle">
+        <h1>Your Notes</h1>
+        <hr class="hrStyle">
+        <div id="notes" class="notesBox">No notes added yet.</div>
+     </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git 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) => `
+        <div class="noteBox">
+            <h3 class="noteHeading">Note ${index + 1}</h3>
+            <p class="paraHeading">${note}</p>
+            <button class="buttonHeading" onclick="deleteNote(${index})">Delete Note</button>
+        </div>
+      `,
+    )
+    .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
@@ -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;
+}