🖥 HTML Structure
<!DOCTYPE html>
<html lang="en">
👉 Tells the browser this is an HTML5 document, language = English.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
👉 <head> stores info about the page.
charset="UTF-8" → supports all characters (English + symbols + other languages).
viewport → makes the page mobile-friendly (fits properly on phone screens).
<title>Student Planner Website</title>
👉 Title shown in the browser tab.
🎨 CSS Styling
Inside <style> ... </style>, you wrote CSS that controls how the website looks.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f2f6ff;
👉 Sets overall page style:
Font = Arial, background color = light blue, no extra margins/padding.
header {
background: #0055a5;
color: white;
padding: 15px;
text-align: center;
}
👉 Blue bar at the top (header). Text is white, centered, with padding.
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
👉 Styles for navigation links inside header (white text, no underline, some space).
section {
padding: 20px;
background: white;
margin: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
👉 Each section (Timetable & To-Do list) looks like a card: white background, rounded corners,
soft shadow.
section img {
max-width: 180px;
border-radius: 10px;
display: block;
margin: 10px auto;
👉 Images inside sections are small, rounded, and centered.
h2 {
color: #0055a5;
text-align: center;
}
👉 Section headings are blue and centered.
🎯 Input + Button Styles
.form-group {
margin: 10px 0;
text-align: center;
👉 Keeps timetable form inputs aligned in center.
input, select {
padding: 8px;
border: 1px solid gray;
border-radius: 5px;
margin: 5px;
👉 Styles for text boxes & dropdown.
button {
padding: 8px 15px;
background: #0055a5;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
button:hover {
background: #0077cc;
👉 Buttons look blue with rounded edges, change shade when hovered.
🗓 Table Styles
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
th {
background: #e3f2ff;
👉 Timetable is a bordered table with light blue headers.
📝 To-Do List Styles
#todo { text-align: center; }
#todo input {
padding: 10px;
width: 70%;
border: 1px solid gray;
border-radius: 8px;
👉 To-do input box centered, wide, and rounded.
ul {
list-style-type: none;
padding: 0;
margin-top: 15px;
👉 Removes bullet points from task list.
li {
padding: 10px;
background: #f9f9f9;
margin: 8px auto;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 500px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
👉 Each task looks like a card with shadow, text on left, buttons on right.
[Link] { background: #d1ffd1; text-decoration: line-through; }
[Link] { background: #ffd1d1; }
👉 Completed tasks = green & crossed. Not done tasks = red background.
.task-buttons button {
margin-left: 5px;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
border: none;
color: white;
.doneBtn { background: green; }
.notDoneBtn { background: red; }
👉 Done = green ✔ button, Not done = red ✘ button.
📌 HTML Body Content
<header>
<h1>📘 Student Planner</h1>
<nav>
<a href="#timetable">My Timetable</a>
<a href="#todo">To-Do List</a>
</nav>
</header>
👉 Top blue bar with title and quick navigation links.
🗓 Timetable Section
<section id="timetable">
<h2>📅 Create Your Timetable</h2>
<img src="[Link]" alt="Timetable Image">
<div class="form-group">
<label>Day:</label>
<select id="day">
<option>Monday</option>
...
</select>
<input type="text" id="time" placeholder="Time (e.g. 9-10 AM)">
<input type="text" id="subject" placeholder="Subject">
<button onclick="addClass()">Add</button>
</div>
<table id="timeTable">
<tr><th>Day / Time</th></tr>
</table>
</section>
👉 Section where student can:
Choose a day.
Enter time & subject.
Click “Add” → adds entry to timetable.
A table below shows the timetable.
📝 To-Do List Section
<section id="todo">
<h2>📝 Daily To-Do List</h2>
<img src="[Link]" alt="To Do Image">
<input type="text" id="taskInput" placeholder="Enter new task...">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
</section>
👉 Section where student can:
Enter a task → Add → appears in a list.
Each task has ✔ and ✘ buttons.
⚡ JavaScript Functionality
let timetable = {};
👉 An empty object to store timetable data.
Function: Add Class
function addClass() {
let day = [Link]("day").value;
let time = [Link]("time").value;
let subject = [Link]("subject").value;
if (time === "" || subject === "") {
alert("Please enter both time and subject!");
return;
👉 Gets user input (day, time, subject). If blank → show alert.
if (!timetable[day]) {
timetable[day] = {};
let table = [Link]("timeTable");
let row = [Link]();
[Link]("id", "row-" + day);
let cell = [Link](0);
[Link] = day;
👉 If day doesn’t exist in timetable, create a new row in the table for that day.
timetable[day][time] = subject;
updateTable();
[Link]("time").value = "";
[Link]("subject").value = "";
👉 Saves subject in timetable under day and time. Then clears input boxes.
Function: Update Table
function updateTable() {
let table = [Link]("timeTable");
let times = new Set();
for (let d in timetable) {
for (let t in timetable[d]) {
[Link](t);
times = [Link](times);
👉 Collects all unique time slots across all days.
[Link] = "";
let header = [Link]();
[Link](0).innerText = "Day / Time";
[Link](t => {
[Link]().innerText = t;
});
👉 Rebuilds table: first row = header with all times.
for (let d in timetable) {
let row = [Link]();
[Link](0).innerText = d;
[Link](t => {
[Link]().innerText = timetable[d][t] || "-";
});
👉 For each day, fills subjects in correct time slot (or “-” if no subject).
Function: Add Task
function addTask() {
let input = [Link]("taskInput");
let taskText = [Link]();
if (taskText === "") return;
👉 Gets new task text. If empty, ignore.
let li = [Link]("li");
let span = [Link]("span");
[Link] = taskText;
👉 Creates a list item with task text.
let btnDiv = [Link]("div");
[Link] = "task-buttons";
let doneBtn = [Link]("button");
[Link] = "✔";
[Link] = "doneBtn";
[Link] = function() {
[Link]("done");
[Link]("notdone");
};
👉 Creates ✔ button → when clicked → marks task as done (green, line-through).
let notDoneBtn = [Link]("button");
[Link] = "✘";
[Link] = "notDoneBtn";
[Link] = function() {
[Link]("notdone");
[Link]("done");
};
👉 Creates ✘ button → marks task as not done (red).
[Link](doneBtn);
[Link](notDoneBtn);
[Link](span);
[Link](btnDiv);
[Link]("taskList").appendChild(li);
[Link] = "";
👉 Adds both buttons next to task, then puts the task into the task list.