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)

    diff --git a/Source-Code/NotesKeeper/index.html b/Source-Code/NotesKeeper/index.html new file mode 100644 index 0000000..3e6a629 --- /dev/null +++ b/Source-Code/NotesKeeper/index.html @@ -0,0 +1,35 @@ + + + + + + Notes Keeper + + + + + +
    +

    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 new file mode 100644 index 0000000..77bc42a --- /dev/null +++ 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 new file mode 100644 index 0000000..b6f5f85 --- /dev/null +++ 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; +}