A modern and minimal Note Taking web application built using HTML, CSS, and JavaScript.
The app allows users to create, edit, delete, and manage notes with persistent storage and theme support.
⚠️ This project was built by following a step-by-step tutorial as part of my JavaScript learning journey.
The goal was to understand DOM manipulation, state management, and browser storage.
- Add notes with title and content
- Edit existing notes
- Delete notes
- Notes saved using localStorage
- Responsive grid-based layout
- Modal dialog for note creation & editing
- Light / Dark theme toggle 🌙
- Theme preference saved in localStorage
- Empty state UI when no notes exist
- HTML – Structure and layout
- CSS – Styling, animations, themes, and responsiveness
- JavaScript – App logic, DOM manipulation, and localStorage
- Managing application state using arrays
- Creating, updating, and deleting data dynamically
- Working with
localStorage - Handling form submission and events
- Using the
<dialog>element for modals - Implementing edit mode using IDs
- Theme toggling using CSS variables
- Writing cleaner and reusable functions
NoteTaking/ │ ├── index.html ├── style.css ├── app.js └── README.md
- Search notes by title
- Add timestamps to notes
- Pin important notes
- Add note categories or tags
- Export notes as text or JSON
This project was created as a practice project while learning JavaScript.
I plan to refactor and improve it as I learn more advanced concepts.
⭐ Feel free to star the repository if you like it!