✦ NOTES

A beautiful glassmorphic notes app with tags, pinning, and instant search — built in pure HTML, CSS & JS.

Write · Tag · Pin · Search · Everything saves automatically

---

✦ Features

✏️ Simple, Distraction-Free Writing

No markdown. No formatting toolbar. Just a clean textarea — open a note and start writing. The focus is entirely on the words.

🏷️ Tag System

Add tags to any note by typing in the tag field and pressing Enter. Tags appear instantly as removable chips. Filter the entire sidebar down to a single tag with one click.

📌 Pin Notes

Keep your most important notes permanently at the top of the list, regardless of search or filter state.

🔍 Instant Search

The search bar filters notes in real time across both title and body content as you type.

💾 Auto-Save

Every keystroke is saved to localStorage automatically. Close the tab, reopen it — all your notes are still there.

🗑️ Safe Deletion

A smooth animated modal asks for confirmation before permanently deleting a note.

---

✦ Getting Started

No build step. No npm. No config. Just open a file.

git clone https://github.com/heyfaraninam/Notes.git
cd notes
open index.html

---

✦ File Structure

notes/
├── index.html     # Markup, layout, modal, toast
├── styles.css     # Glassmorphism, animations, all visual styles
└── app.js         # Notes logic, tags, pin, search, localStorage

---

✦ Keyboard Shortcuts

Shortcut	Action
Ctrl + N	Create a new note
Enter in tag field	Add a tag

---

✦ Browser Support

Browser	Support
Chrome 76+	✅ Full
Firefox 103+	✅ Full
Safari 14+	✅ Full
Edge 79+	✅ Full

Requires backdrop-filter support for the glassmorphism effect.

---

✦ Part of a Series

This is part of a growing collection of beautiful, zero-dependency web apps:

Project	Description
Calculator	Glassmorphic calculator with 4 themes, scientific mode & history
Notes	This project

---

✦ License

MIT — free to use, modify, and ship.

---

Made with care · pure HTML · CSS · JS · no frameworks needed