Sticky Notes 🗒️

A clean, responsive sticky notes web app built with vanilla JavaScript. Create quick notes, customize their look, and keep everything saved automatically in your browser.

✨ Project Description

Sticky Notes is a lightweight front-end project focused on speed and simplicity. It provides a smooth note-taking experience with persistent storage, visual customization, and mobile-friendly behavior, all without external frameworks.

🚀 Features

• Add, edit, and delete notes instantly.
• Auto-save all note content to localStorage.
• Per-note color switching from a 6-color palette.
• Global font customization:
  • Font family
  • Font size
  • Font weight
  • Text color
• Light and dark mode toggle with persisted preference.
• Notes color usage counter panel.
• Responsive layout with adaptive sidebar behavior on smaller screens.
• Basic language direction handling (LTR/RTL) based on typed content.

🧠 How It Works

• Notes are stored as objects in localStorage with this shape:
  • id
  • colorIndex
  • content
  • lang
• On page load, the app restores:
  • Notes data
  • Theme mode
  • Color palette settings
  • Font settings
• UI updates are event-driven and re-render notes to stay in sync with saved state.

🛠️ Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript (ES6)
• Browser localStorage API

📦 Libraries and External Resources

• Google Fonts:
  • Cairo
  • Roboto
• No JavaScript frameworks or package dependencies.

📁 Project Structure

stickyNotes/
├─ index.html   # App layout, controls, and page structure
├─ style.css    # Themes, responsive layout, and component styling
├─ main.js      # Notes logic, persistence, rendering, and interactions
└─ README.md

▶️ Getting Started

1. Clone or download this repository.
2. Open index.html in any modern browser.
3. Start creating notes. Changes are saved automatically.

Optional: run with a static server.

npx serve .

🌐 Live Demo

https://ahmed-adel-morsi.github.io/Sticky-Notes/

⚙️ Browser Notes

• Requires a modern browser (the stylesheet uses modern CSS features like nesting and :has()).
• Data is stored per browser/device because localStorage is local.