(BrainBox) - Notes App

“Write it, save it, never forget it.”

Notes App is a JavaScript fundamentals project that allows users to create, view, edit, and delete notes. The goal of this project is to practice core frontend concepts while building something interactive, practical, and user-friendly.

🚀 Live Demo

You can run it directly by opening index.html in your browser. (Optional: If hosted on GitHub Pages, add link here)

📸 Screenshots

Home / App Page

Shows the list of saved notes with Add & Delete options

Detail / Edit Page Allows editing an existing note with live updates

🧠 Project Overview

This app allows users to:

Create new notes with a title and content

View all saved notes in a clean, scrollable list

Edit any note seamlessly

Delete notes with instant feedback

Persist notes across sessions using localStorage

The project focuses on clarity, simplicity, and learning by building, demonstrating practical JavaScript skills for beginners.

✨ Features

Add, view, edit, and delete notes

Persistent storage using browser localStorage

Clean and responsive UI

Beginner-friendly JavaScript logic

Interactive UI with event handling

🛠️ Built With

HTML5 – Structure

CSS3 – Styling

Vanilla JavaScript – Application logic

localStorage – Data persistence

🧩 JavaScript Concepts Used

DOM manipulation & dynamic updates

Event handling

Arrays & objects for storing notes

localStorage CRUD operations

Conditional logic for validations

Basic state management

📂 Project Structure notes-app/ │ ├── index.html # UI structure and inline CSS ├── index.js # App logic and functionality └── README.md

⚙️ How to Run Locally

Clone the repository:

git clone https://github.com/your-username/notes-app.git

Open the project folder:

cd notes-app

Open index.html in your browser (No build tools or dependencies required)

📈 Learning Outcomes

Through this project, I:

Strengthened JavaScript fundamentals

Practiced DOM manipulation and event handling

Learned to work with localStorage for persistence

Developed clean, readable, and maintainable code

Understood basic Git & GitHub workflow

🔮 Future Improvements

Add search/filter functionality for notes

Add categories or tags for notes

Implement dark mode for UI

Refactor into modular JS files

Sync notes across devices with a backend (MERN stack)

👤 Author

Tejas – Student | MERN Stack & GenAI Learner

GitHub: https://github.com/coderTejas565

LinkedIn: https://www.linkedin.com/in/tejas-developer-5174b0399/

X (Twitter): https://x.com/TEJAS_DEV_code

Hashnode: https://tejasdevcodes.hashnode.dev/

Portfolio: Coming Soon

⭐ Support

If you like this project or find it helpful:

Give it a ⭐ on GitHub

Share feedback or suggestions

📄 License

This project is open source and available under the MIT License.