Back to Projects
Premium Notes App

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 localStorage so 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

  1. Clone this repository or download the source code files.
  2. Ensure the folder structure remains intact.
  3. Simply open index.html in any modern web browser (Chrome, Firefox, Safari, Edge, etc.) by double-clicking the file.
  4. Start adding your notes!