A feature-rich, all-in-one study productivity web application built with Vanilla HTML, CSS & JavaScript.
✨ Features • 🚀 Getting Started • 📐 Architecture • 🗂️ Project Structure • 📖 User Guide
AetherStudy is a capstone web application designed to be a student's all-in-one study companion. It combines the most effective study techniques — Pomodoro focus sessions, active recall via flashcards, self-testing through quizzes, task management, and scheduled reminders — into a single, beautiful, dark-mode-first interface.
The app is 100% client-side with zero dependencies, using the browser's native localStorage for data persistence and the Web Audio API for synthesized ambient focus sounds.
| Module | Description |
|---|---|
| 📊 Dashboard | Real-time overview of focus time, tasks, quiz average & decks mastered |
| ✅ Task Manager | Create, filter (All/Active/Done), prioritize, and categorize study tasks |
| ⏱️ Pomodoro Timer | Customizable focus/break cycles with animated SVG ring progress indicator |
| 🎵 Focus Ambiance | Synthesized ambient sounds (Rain, Brown Noise, Binaural Focus Waves) via Web Audio API |
| 🧠 Quiz Maker | Create custom quizzes or use pre-loaded ones; tracks high scores |
| 🃏 Flash Cards | 3D flip-card decks with spaced-repetition self-assessment (Got It / Need Review) |
| 🔔 Reminders | Schedule date/time alerts with browser notifications & in-app alarm modal |
| 🌙 Dark / Light Mode | Smooth theme toggle stored in localStorage |
| 📱 Responsive Design | Adaptive layout for desktop and tablet viewports |
- Any modern web browser (Chrome, Firefox, Edge, Safari)
- No server or build tools required
# 1. Clone the repository
git clone https://github.com/nisha182271/aetherstudy.git
# 2. Navigate into the project
cd aetherstudy
# 3. Open directly in browser — no build step needed!
# Option A: Open index.html directly
start index.html # Windows
open index.html # macOS
xdg-open index.html # Linux
# Option B: Use Live Server (VS Code extension) for hot reload
# Right-click index.html → "Open with Live Server"Note: The
Remindersnotification feature requires HTTPS or localhost to request browser notification permissions.
┌─────────────────────────────────────────────────────────┐
│ index.html (Entry Point) │
│ ┌──────────────────────────────────────────────────┐ │
│ │ <script src="app.js"> ← Core + Router │ │
│ │ <script src="todo.js"> ← Task Controller │ │
│ │ <script src="pomodoro.js"> ← Timer Controller │ │
│ │ <script src="quiz.js"> ← Quiz Controller │ │
│ │ <script src="flashcards.js"> ← Deck Controller │ │
│ │ <script src="reminders.js"> ← Alarm Controller │ │
│ └──────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
flowchart TD
A[User Interaction] --> B{AppStore}
B --> C[localStorage]
B --> D[notifyListeners]
D --> E[Dashboard UI]
D --> F[Todo UI]
D --> G[Pomodoro UI]
D --> H[Quiz UI]
D --> I[Flashcards UI]
D --> J[Reminders UI]
C -->|Page Reload| B
AppStore (app.js)
│
├── Tasks API → todo.js (TodoController)
├── Pomodoro API → pomodoro.js (PomodoroController)
│ └── Web Audio API → Ambient Sound Engine
├── Quiz API → quiz.js (QuizController)
├── Flashcards API → flashcards.js (FlashcardsController)
├── Reminders API → reminders.js (RemindersController)
│ └── Notification API → Browser Alerts
└── Router → Hash-based URL routing (#dashboard, #todo, etc.)
flowchart TD
START([Browser Opens index.html]) --> LOAD[Load HTML Structure]
LOAD --> SCRIPTS[Execute Script Tags in Order]
SCRIPTS --> APPJS[app.js: AppStore Constructor]
APPJS --> CHECK{localStorage\naether_study_state?}
CHECK -- Yes --> PARSE[Parse & Restore Saved State]
CHECK -- No --> DEFAULTS[Load Default Quizzes & Decks]
PARSE --> ROUTER[Router.init - Read URL Hash]
DEFAULTS --> ROUTER
ROUTER --> HASH{URL Hash?}
HASH -- #dashboard --> DASH[Render Dashboard View]
HASH -- #todo --> TODO[Render Tasks View]
HASH -- Other --> DASH
DASH --> DOM[DOMContentLoaded - Wire All Events]
DOM --> READY([App Ready ✅])
flowchart LR
A([User]) --> B[Fill Task Form\nTitle + Category + Priority + Due]
B --> C{Validate\nRequired Fields}
C -- Invalid --> D[Show Error Toast]
C -- Valid --> E[store.addTask]
E --> F[Save to localStorage]
F --> G[notifyListeners]
G --> H[Re-render Task List]
G --> I[Update Dashboard Stats]
G --> J[Update Sidebar Badge]
H --> K{User Action on Task}
K -- Toggle Complete --> L[store.toggleTask]
K -- Delete --> M[store.deleteTask]
K -- Set Focus --> N[store.setActiveTask]
N --> O[Pomodoro links task]
style A fill:#6366f1,color:#fff
style E fill:#22c55e,color:#fff
style F fill:#f59e0b,color:#fff
stateDiagram-v2
[*] --> Idle : App Loads
Idle --> Focus : User clicks Start\n(25 min default)
Focus --> Paused : User clicks Pause
Paused --> Focus : User clicks Resume
Focus --> ShortBreak : Focus timer ends\n(sessions 1,2,3)
Focus --> LongBreak : Focus timer ends\n(every 4th session)
ShortBreak --> Focus : Break timer ends\nor Skip clicked
LongBreak --> Focus : Long break ends\nor Skip clicked
Focus --> Idle : Reset clicked
Focus --> Idle : User navigates away
Focus --> [*] : Session logged to AppStore
Pomodoro Cycle:
Focus (25m) → Short Break (5m) → Focus (25m) → Short Break (5m)
→ Focus (25m) → Short Break (5m) → Focus (25m) → Long Break (15m)
→ [Repeat]
flowchart TD
A([Quiz List View]) --> B{Action?}
B -- "Create Custom" --> C[Quiz Creator Form]
C --> D[Add Questions + Options + Correct Answer]
D --> E[store.addQuiz]
E --> A
B -- "Play Quiz" --> F[Quiz Play View]
F --> G[Display Question 1]
G --> H{User Selects Answer}
H --> I[Highlight Correct/Wrong]
I --> J{More Questions?}
J -- Yes --> K[Next Question Button]
K --> G
J -- No --> L[Quiz Results View]
L --> M[store.recordQuizScore\nUpdate High Score + Stats]
M --> N{Action?}
N -- "Try Again" --> F
N -- "Back" --> A
style F fill:#6366f1,color:#fff
style L fill:#22c55e,color:#fff
flowchart TD
A([Decks List View]) --> B{Action?}
B -- "Create Deck" --> C[Deck Creator Form\nName + Description + Cards]
C --> D[store.addDeck]
D --> A
B -- "Study Deck" --> E[Shuffle Cards]
E --> F[Display Card Front]
F --> G{User Clicks Card}
G --> H[Flip to Show Answer]
H --> I{Self Assessment}
I -- "Got It! ✅" --> J[Mark as Known]
I -- "Need Review ❌" --> K[Mark for Review]
J --> L{More Cards?}
K --> L
L -- Yes --> F
L -- No --> M[Deck Summary View\nGot It / Needs Work counts]
M --> N[store.recordCardsReviewed]
N --> O{Action?}
O -- "Review Again" --> E
O -- "Back to Decks" --> A
style H fill:#6366f1,color:#fff
style M fill:#22c55e,color:#fff
sequenceDiagram
participant User
participant UI as Reminders UI
participant Store as AppStore
participant Poll as setInterval (1min)
participant Notif as Browser Notification API
User->>UI: Fill text + date + time → Submit
UI->>Store: store.addReminder(text, isoDatetime)
Store->>Store: Sort reminders chronologically
Store->>UI: Re-render reminder list
loop Every 60 seconds
Poll->>Store: Read all reminders
Store-->>Poll: reminders[]
Poll->>Poll: Check if any reminder.datetime <= now
alt Reminder Due
Poll->>Store: store.markReminderTriggered(id)
Poll->>Notif: Show browser notification
Poll->>UI: Show alarm modal overlay
User->>UI: Click Dismiss or Snooze (5min)
end
end
capstone/
├── 📄 index.html ← Single-page HTML shell; all views/tabs defined here
│ Manages: sidebar nav, header, modal overlays, toast container
│
├── 🎨 style.css ← Complete design system
│ CSS custom properties (tokens), dark/light themes,
│ glassmorphism cards, animations, responsive layout
│
├── ⚙️ app.js ← Core application file
│ • AppStore class (state management + localStorage)
│ • Router class (hash-based tab navigation)
│ • Global showToast() utility
│ • Dashboard stats & widgets rendering
│
├── ✅ todo.js ← Task Manager Controller
│ • TodoController class
│ • Form validation, task rendering, filter pills
│ • Priority badge logic, due-date display
│
├── ⏱️ pomodoro.js ← Pomodoro Timer Controller
│ • PomodoroController class
│ • SVG ring progress animation
│ • Web Audio API ambient sound synthesizer
│ • Session auto-cycling (focus → break → focus)
│
├── 🧠 quiz.js ← Quiz Controller
│ • QuizController class
│ • Quiz list/create/play/results sub-views
│ • Score tracking & high score management
│
├── 🃏 flashcards.js ← Flashcards Controller
│ • FlashcardsController class
│ • Deck list/create/play/summary sub-views
│ • CSS 3D flip card animation control
│
└── 🔔 reminders.js ← Reminders & Alarm Controller
• RemindersController class
• setInterval polling loop for alarm detection
• Browser Notification API integration
• In-app alarm modal with dismiss/snooze
AetherStudy uses a CSS custom properties-based design token system for complete theming consistency.
| Token | Dark Mode | Light Mode | Usage |
|---|---|---|---|
--primary |
#6366f1 (Indigo) |
#6366f1 |
Buttons, active states |
--primary-glow |
#818cf8 |
#4f46e5 |
SVG progress rings, glows |
--bg-base |
#0a0b14 |
#f0f4ff |
Page background |
--bg-surface |
#12141f |
#ffffff |
Card surfaces |
--success-color |
#22c55e |
#16a34a |
Got It, completed states |
--danger-color |
#ef4444 |
#dc2626 |
Need Review, errors |
--text-primary |
#e2e8f0 |
#1e293b |
Main text |
--text-secondary |
#64748b |
#64748b |
Subtitles, hints |
- Headings:
Outfit— Modern geometric sans-serif - Body:
Inter— Highly readable UI font
- Glassmorphism Cards:
backdrop-filter: blur()+ semi-transparent backgrounds - Micro-animations: CSS transitions on hover, tab switches, and card flips
- Progress Ring: SVG
stroke-dashoffsetanimation for Pomodoro timer - 3D Card Flip: CSS
perspective+rotateY(180deg)for flashcards
- Open
index.htmlin any browser — the app loads instantly. - By default you'll see the Dashboard with sample data pre-loaded.
- Use the sidebar navigation to switch between all modules.
- View your live stats: total focus time, tasks completed, quiz average, decks mastered.
- Quick Focus Session widget launches the Pomodoro timer immediately.
- High Priority Tasks and Upcoming Reminders panels give you instant context.
- Enter a task title, select a category and priority level, optionally set a due date.
- Click Create Task — task appears in the list instantly.
- Use the filter pills (All / Active / Completed) to sort your list.
- Check the ✅ checkbox to mark complete, 🗑️ to delete.
- Click Focus on any task to link it to the Pomodoro timer.
- Navigate to Pomodoro from the sidebar.
- Customize durations using the sliders (5–60 min focus, 1–15 min short break, 5–30 min long break).
- Click ▶ Play to start. The SVG ring fills as time progresses.
- Choose an ambient sound (Synth Rain, Brown Noise, Focus Waves) to aid concentration.
- After each focus session, the app automatically cycles to the appropriate break.
- Navigate to Quiz Space from the sidebar.
- A default Study Skills & Productivity Science quiz is pre-loaded.
- Click Create Custom Quiz → enter a quiz name → click Add Question for each question.
- Each question has 4 options — mark the correct one before saving.
- Click Play on any quiz card to start. Your score and high score are tracked.
- Navigate to Recall Decks from the sidebar.
- A default Web Development Basics deck is pre-loaded.
- Click Create New Deck → name your deck → add front/back pairs for each card.
- Click Study on any deck to enter review mode.
- Click the card to flip it and reveal the answer. Then self-assess: Got It! or Need Review.
- Navigate to Reminders from the sidebar.
- Allow Browser Notifications when prompted (required for desktop alerts).
- Enter a message, select a date and time, then click Schedule Alarm.
- When the time arrives, an in-app modal appears AND a desktop notification fires.
- Dismiss to clear or Snooze (5m) to delay the alarm.
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure, single-page app shell |
| CSS3 (Vanilla) | Design system, glassmorphism, animations, responsive layout |
| JavaScript ES6+ | Classes, arrow functions, template literals, destructuring |
| Web Audio API | Synthesized ambient sounds (OscillatorNode, GainNode, AudioContext) |
| LocalStorage API | Client-side persistent state management |
| Notifications API | Browser desktop alerts for reminders |
| Google Fonts | Inter + Outfit typography |
| SVG | Custom icons, animated progress ring |
Edit app.js → DEFAULT_QUIZZES array to add/modify built-in quizzes.
Edit app.js → DEFAULT_DECKS array to add/modify built-in decks.
In pomodoro.js → extend the playAmbient(type) function with new AudioContext oscillator patterns.
In style.css → update CSS custom properties under :root (dark theme) and [data-theme="light"].
- Firebase sync — Cloud data persistence across devices
- Study streak tracker — Daily login streak with motivation badges
- PDF/CSV export — Export tasks and quiz history
- Spaced repetition algorithm — SM-2 algorithm for flashcard scheduling
- Mobile PWA — Service Worker + Web App Manifest for offline use
- Collaborative decks — Share flashcard decks via URL
- Analytics charts — Weekly study time graphs using Canvas API
Nisha
📧 nisha182271@gmail.com
🔗 GitHub: @nisha182271
This project is created as a Capstone Project for academic purposes.
Made with ❤️ using Vanilla HTML, CSS & JavaScript
⭐ If you found this project helpful, please give it a star!