50Projects-HTML-CSS-JavaScript : Notes keeper

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.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/NotesKeeper/index.html

@@ -0,0 +1,35 @@
+
+
+
+    
+    
+    Notes Keeper
+    
+
+
+    
+        Notes App
+        
+            Home
+        
+        
+            
+            Search
+        
+     
+
+     
+        Welcome to Notes App
+        
+            Add a Note
+            
+            Add Note
+        
+        
+        Your Notes
+        
+        No notes added yet.
+     
+    
+
+

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}
+            Delete 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();

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;
+}