diff --git a/Domains/Frontend/MiniProjects/NotesApp/README.md b/Domains/Frontend/MiniProjects/NotesApp/README.md new file mode 100644 index 00000000..75753ae8 --- /dev/null +++ b/Domains/Frontend/MiniProjects/NotesApp/README.md @@ -0,0 +1,13 @@ +**Contributor:** Aaditya-2407 + +## Description +A simple note-taking app that allows users to create and delete notes. All notes are saved to the browser's `localStorage`, so they persist even after the page is refreshed. + +## Tech Stack +- HTML +- CSS +- JavaScript (Vanilla) +- localStorage + +## How to Run +1. Open the `index.html` file in your web browser. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/NotesApp/index.html b/Domains/Frontend/MiniProjects/NotesApp/index.html new file mode 100644 index 00000000..3465e707 --- /dev/null +++ b/Domains/Frontend/MiniProjects/NotesApp/index.html @@ -0,0 +1,21 @@ + + + + + + Notes App + + + +
+

Simple Notes App

+
+ + +
+
+
+
+ + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/NotesApp/script.js b/Domains/Frontend/MiniProjects/NotesApp/script.js new file mode 100644 index 00000000..f31b0c05 --- /dev/null +++ b/Domains/Frontend/MiniProjects/NotesApp/script.js @@ -0,0 +1,65 @@ +const noteInput = document.getElementById('note-input'); +const addNoteBtn = document.getElementById('add-note-btn'); +const notesGrid = document.getElementById('notes-grid'); + + +document.addEventListener('DOMContentLoaded', loadNotes); + +function getNotesFromStorage() { + return JSON.parse(localStorage.getItem('notes') || '[]'); +} + +function saveNotesToStorage(notes) { + localStorage.setItem('notes', JSON.stringify(notes)); +} + +function loadNotes() { + const notes = getNotesFromStorage(); + notes.forEach(note => createNoteElement(note)); +} + +function createNoteElement(noteText) { + const noteEl = document.createElement('div'); + noteEl.classList.add('note'); + + const contentEl = document.createElement('div'); + contentEl.classList.add('note-content'); + contentEl.textContent = noteText; + + const deleteBtn = document.createElement('button'); + deleteBtn.classList.add('delete-btn'); + deleteBtn.textContent = 'Delete'; + + deleteBtn.addEventListener('click', () => { + deleteNote(noteText, noteEl); + }); + + noteEl.appendChild(contentEl); + noteEl.appendChild(deleteBtn); + notesGrid.prepend(noteEl); // Add new notes to the top +} + +function addNote() { + const noteText = noteInput.value.trim(); + if (noteText === '') { + alert('Please write a note.'); + return; + } + + createNoteElement(noteText); + + const notes = getNotesFromStorage(); + notes.push(noteText); + saveNotesToStorage(notes); + + noteInput.value = ''; +} + +function deleteNote(noteText, noteEl) { + const notes = getNotesFromStorage(); + const filteredNotes = notes.filter(note => note !== noteText); + saveNotesToStorage(filteredNotes); + notesGrid.removeChild(noteEl); +} + +addNoteBtn.addEventListener('click', addNote); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/NotesApp/style.css b/Domains/Frontend/MiniProjects/NotesApp/style.css new file mode 100644 index 00000000..f7189624 --- /dev/null +++ b/Domains/Frontend/MiniProjects/NotesApp/style.css @@ -0,0 +1,96 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: #f0f2f5; + margin: 0; + padding: 2rem; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 2rem; + background-color: #ffffff; + border-radius: 16px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 1.5rem; +} + +.input-container { + display: flex; + flex-direction: column; + margin-bottom: 2rem; +} + +#note-input { + font-family: inherit; + font-size: 1rem; + padding: 1rem; + border: 1px solid #ddd; + border-radius: 8px; + resize: vertical; + min-height: 80px; + margin-bottom: 1rem; +} + +#add-note-btn { + font-size: 1rem; + font-weight: 600; + color: #ffffff; + background-color: #007aff; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.2s ease; +} + +#add-note-btn:hover { + background-color: #0056b3; +} + +.notes-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 1.5rem; +} + +.note { + background-color: #fffbe6; + border: 1px solid #eee; + padding: 1rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 150px; +} + +.note-content { + font-size: 1rem; + color: #333; + white-space: pre-wrap; /* Preserves line breaks */ + word-wrap: break-word; /* Wraps long words */ + flex-grow: 1; +} + +.delete-btn { + background: none; + border: none; + color: #ff3b30; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + text-align: right; + padding: 0.5rem 0 0 0; + margin-top: 1rem; +} + +.delete-btn:hover { + text-decoration: underline; +} \ No newline at end of file