🟢 HTML Section (structure of the page)
<!doctype html>
<html lang="en">
👉 Declares this is an HTML5 page, and the page language is English.
<head>
<meta charset="utf-8" />
👉 The page text is encoded in UTF-8 (so it supports all characters).
<meta name="viewport" content="width=device-width,initial-scale=1" />
👉 Makes the website responsive (fits properly on mobile screens).
<title>Student Planner — Timetable & To-Do (Dark)</title>
👉 The title that appears in the browser tab.
<style>
👉 Starts the CSS styles (look and design of the page).
🟣 CSS Section (design + theme)
Inside <style>:
:root { ... } → defines color variables (--bg, --accent, --danger) and global font.
html,body → full height, no margin, dark gradient background, white text.
.app → main container with 2 columns (left: timetable, right: todo list).
header → top bar with logo, title, clock, and clear button.
.logo → colorful gradient box with initials.
.card → reusable dark "box" with rounded corners and shadow.
.controls → for buttons and clock on the top right.
.left → left column (timetable + reminders).
label, input, select, button → all form controls styled with dark theme.
.list → scrollable list of timetable entries.
.entry → each timetable entry styled with chips and buttons.
.todo → to-do list container.
.todo-item → each task with check mark and remove button.
.reminder-log → shows reminder history.
footer → text at the bottom.
@media (max-width:980px) → responsive design: on small screens, it stacks into 1
column.
🟡 BODY Section (page content)
<body>
<div class="app">
👉 Page content is inside .app (the main container).
🔹 Header
<header>
<div class="brand">
<div class="logo">MP</div>
👉 Logo box with letters MP ("My Planner").
<div>
<h1>MY PLANNER</h1>
<p class="lead">Timetable • To-Do • Reminders (dark theme)</p>
</div>
</div>
👉 Title and subtitle next to logo.
<div class="controls">
<div class="clock card" id="clock">--:--:--</div>
<button class="btn ghost" id="clearAll">Clear All</button>
</div>
</header>
👉 Shows a live clock and a Clear All button.
🔹 Left Section (Timetable + Reminders)
<section class="left">
<div class="card">
<h3>Add Timetable Entry</h3>
👉 Box for adding timetable entries.
<label>Day</label>
<select id="daySelect"> ... </select>
👉 Dropdown to choose day of the week.
<label>Subject</label>
<input id="subject" placeholder="e.g. Maths (Calculus)" />
👉 Input for subject name.
<div class="form-row">
<label>Start time</label>
<input id="startTime" type="time" />
<label>End time</label>
<input id="endTime" type="time" />
</div>
👉 Pick start and end time.
<button id="addEntry">Add</button>
<button id="exportBtn">Export JSON</button>
👉 Button to add subject to timetable and export timetable as JSON file.
<div id="timetableList"></div>
</div>
👉 Area where timetable entries appear.
🔹 Reminders Box
<div class="card">
<h3>Reminders & Log</h3>
<label>Ringtone</label>
<select id="ringtoneSelect"> ... </select>
<button id="testTone">Play</button>
<div id="log"></div>
</div>
👉 Lets you choose a ringtone for reminders, test it, and view a reminder history log.
🔹 Right Section (To-Do List)
<section class="card right">
<div class="top-row">
<h3>To-Do List</h3>
<input id="todoInput" placeholder="New task..." />
<button id="addTodo">Add</button>
</div>
<div id="todoList"></div>
</section>
👉 To-do list with input box + Add button. Shows tasks below.
🔹 Footer
<footer>Saved locally in your browser. Notifications will ask permission the first
time.</footer>
👉 Info note.
🔹 Audio Files
<audio id="tone-ring1" src="cute_sound.mp3"></audio>
<audio id="tone-ring2" src="i_phone_notification.mp3"></audio>
<audio id="tone-ring3" src="notification1.mp3"></audio>
👉 Three notification sounds available.
🔴 JavaScript Section (Functionality)
<script>
1. Local Storage (save/load data)
const db = {
load(){ return [Link]([Link]('studentPlanner_v1')||'{}') },
save(data){ [Link]('studentPlanner_v1', [Link](data)) }
👉 Saves/loads planner data into browser memory.
2. App State
let state = [Link]({timetable:[], todos:[], log:[]}, [Link]());
👉 Keeps timetable, todos, and reminder logs in one object.
3. DOM Elements
const daySelect = [Link]('daySelect');
const subjectIn = [Link]('subject');
...
👉 Stores references to inputs, buttons, and lists.
4. Render Functions
renderTimetable() → displays timetable entries on screen.
renderTodos() → displays tasks with check/cross buttons.
renderLog() → shows reminder history.
save() → saves current state to browser.
5. Event Listeners
[Link]('click', ...) → adds a timetable entry.
[Link]('click', ...) → allows editing or deleting an entry.
[Link]('click', ...) → adds a new task.
[Link]('click', ...) → toggles done/undone or removes task.
exportBtn → downloads JSON file with saved planner.
clearAll → clears all saved data.
testTone → plays selected ringtone.
6. Clock
function updateClock(){
const now=new Date();
const hh=String([Link]()).padStart(2,'0');
const mm=String([Link]()).padStart(2,'0');
const ss=String([Link]()).padStart(2,'0');
[Link] = `${hh}:${mm}:${ss}`;
setInterval(updateClock,500);
👉 Updates live clock every half second.
7. Reminders
ensureNotificationPermission() → asks browser for notification permission.
triggerReminder(entry) →
o Plays ringtone in loop.
o Shows notification (if allowed).
o Logs reminder.
o Stops ringtone when user clicks anywhere.
shouldTrigger(entry, now) → checks if current time matches timetable entry start
time.
setInterval(..., 8000) → every 8 seconds, checks timetable and triggers reminder if
needed.
8. On Page Load
renderTimetable();
renderTodos();
renderLog();
👉 Draws saved data on screen when page first loads.