A fast, responsive, and distraction-free note-taking web application built with pure Vanilla JavaScript, HTML5, and modern CSS3 featuring instant browser LocalStorage persistence, multi-color card theming, and real-time DOM manipulation.
Live Demo: syedabsar99.github.io/notes-app
Designed and built by Syed Noor Ul Absar, this application offers an intuitive interface for capturing thoughts, checklists, and daily ideas. Notes persist instantly across browser refreshes and sessions using the Web Storage API, eliminating the need for an external database or login overhead.
Each note can be edited in place, organized across responsive columns, and deleted with instant feedback.
- Instant LocalStorage Persistence — Automatically syncs note creation, edits, and deletions into the browser's
localStorageso content is never lost. - In-Place Rich Content Editing — Utilizes
contenteditableelements for seamless, frictionless typing without modal dialogs. - Dynamic Note Creation & Deletion — Instantaneous DOM insertion and removal with clean garbage collection and key tracking.
- Responsive Multi-Column Card Grid — Adapts smoothly from a spacious multi-column layout on desktop to single-column cards on mobile phones and tablets.
- Zero Framework Dependency — Lightweight, high performance, and rapid load times powered purely by standard browser APIs.
| Layer | Technologies | Details |
|---|---|---|
| Structure | Semantic HTML5 | Clean container hierarchy, accessible action icons |
| Styling | Modern CSS3 | Responsive Flexbox/Grid, soft shadows, interactive button states, media queries |
| Logic | Vanilla JavaScript (ES6+) | localStorage serialization (JSON.parse / JSON.stringify), event delegation, DOM nodes |
| Hosting | GitHub Pages | High-speed static CDN hosting |
notes-app/
├── images/ # UI icons and graphics
├── index.html # Application viewport and note card container
├── LICENSE # MIT open-source license
├── preview.png # High-resolution application preview screenshot
├── README.md # Comprehensive repository documentation
├── script.js # LocalStorage syncing, note creation, and deletion logic
└── style.css # Design system, note styling, and responsive media queries
No build steps or dependency installations are required.
git clone https://github.com/syedabsar99/notes-app.gitLaunch index.html in your browser:
cd notes-app
start index.htmlOr run via any static web server:
npx serve .
# or
python -m http.server 8080Syed Noor Ul Absar
- Role: Frontend Web Developer
- Education: Bachelor of Computer Applications (BCA), Chandigarh University (8.35 SGPA)
- Portfolio: syedabsar99.github.io/portfolio
- GitHub: @syedabsar99
- LinkedIn: linkedin.com/in/syed-noor-ul-absar-7b6408365
- Email: syedabsar99@gmail.com
This project is licensed under the MIT License — feel free to use, modify, and distribute for educational or personal use.