
Premium Notes App
HTMLCSSJS
Premium Notes App š
A beautiful, modern, and responsive Notes Application built with pure HTML, CSS, and JavaScript. This project serves as a practical demonstration of core web technologies combined with premium design aesthetics.
š Features
- Add & Manage Notes: Seamlessly add notes with titles and descriptions using a custom modal interface.
- Persistent Storage: All notes are securely saved in your browser's
localStorageso they persist across page reloads and browser restarts. - Independent Logic: Clean JavaScript architecture with separated concerns (independent Add and Save functions).
- Premium Aesthetics: Features a sleek dark mode, glassmorphism card effects, and subtle micro-animations for an elevated user experience.
- Responsive Layout: Automatically adjusts and looks great on all devices, from mobile phones to desktop monitors.
š» Technologies Used
- HTML5: Semantic structure and layout.
- CSS3: Flexbox, CSS Grid, Custom Variables (CSS variables), Glassmorphism, and Keyframe Animations.
- JavaScript (ES6): DOM manipulation, event handling, local storage management, and data rendering.
š Folder Structure
āāā index.html # Main HTML file containing the app structure and modal
āāā css/
ā āāā style.css # Premium styling, variables, animations, and responsiveness
āāā js/
āāā script.js # App logic, local storage, and independent functional modules
š ļø How to Run
- Clone this repository or download the source code files.
- Ensure the folder structure remains intact.
- Simply open
index.htmlin any modern web browser (Chrome, Firefox, Safari, Edge, etc.) by double-clicking the file. - Start adding your notes!