acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 20, 2025
diff --git a/Domains/Frontend/MiniProjects/NotesApp/README.md 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.
diff --git a/Domains/Frontend/MiniProjects/NotesApp/index.html b/Domains/Frontend/MiniProjects/NotesApp/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notes App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Simple Notes App</h1>
+        <div class="input-container">
+            <textarea id="note-input" placeholder="Write your note here..."></textarea>
+            <button id="add-note-btn">Add Note</button>
+        </div>
+        <div id="notes-grid" class="notes-grid">
+            </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/NotesApp/script.js 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);
diff --git a/Domains/Frontend/MiniProjects/NotesApp/style.css 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;
+}