HTML Structure
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html> → tells the browser this is an HTML5 document.
<html lang="en"> → starts the webpage and sets language to English.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Planner Website</title>
<meta charset="UTF-8"> → ensures the page supports all characters (like symbols,
Hindi, etc.).
<meta name="viewport"> → makes the page responsive (works on mobile &
desktop).
<title> → sets the tab name in the browser (here: "Student Planner Website").
CSS Styling
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #232b3f;
Styles the whole page:
o font-family: Arial → text looks clean.
o margin: 0, padding: 0 → removes default spacing.
o background → sets dark blue background.
header {
background: #4216166a;
color: white;
padding: 15px;
text-align: center;
The header area (top bar of page):
o background = reddish transparent color.
o color: white → text color white.
o padding → space inside header.
o text-align: center → centers text.
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
Styles links (<a>) inside navigation.
o White, spaced out, bold, and without underline.
section {
padding: 20px;
background: white;
margin: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
Each section box (like To-Do list):
o White background.
o Rounded corners (border-radius: 12px).
o Shadow for a card effect.
section img {
max-width: 180px;
border-radius: 10px;
display: block;
margin: 10px auto;
If there are images in a section:
o They won’t be larger than 180px.
o Rounded corners.
o Centered.
h2 {
color: #0055a5;
text-align: center;
All <h2> headings: blue and centered.
Input Fields and Buttons
.form-group { margin: 10px 0; text-align: center; }
input, select {
padding: 8px;
border: 1px solid gray;
border-radius: 5px;
margin: 5px;
}
button {
padding: 8px 15px;
background: #0055a5;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
button:hover { background: #0077cc; }
Makes forms neat:
o Inputs have padding, border, rounded edges.
o Buttons are blue, white text, rounded, clickable.
o On hover → lighter blue.
Table Styling
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
th { background: #e3f2ff; }
Timetable table:
o Takes full width.
o Borders are joined (collapse).
o Light blue header row.
To-Do List Styling
#todo { text-align: center; }
#todo input {
padding: 10px;
width: 70%;
border: 1px solid gray;
border-radius: 8px;
To-Do list input is large and centered.
ul { list-style-type: none; padding: 0; margin-top: 15px; }
Removes bullet points from 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 (li) looks like a neat card with shadow.
Flexbox used to separate task text and buttons.
[Link] { background: #d1ffd1; text-decoration: line-through; }
[Link] { background: #ffd1d1; }
Task marked ✔ turns green with strike-through.
Task marked ✘ turns red.
.task-buttons button {
margin-left: 5px;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
border: none;
color: white;
.doneBtn { background: green; }
.notDoneBtn { background: red; }
Buttons inside tasks → ✔ (green) and ✘ (red).
HTML Body
<header>
<h1>My Planner</h1>
<nav></nav>
</header>
Top header with title My Planner. Navigation (nav) is empty for now.
<section id="todo">
<h2>Daily To-Do List</h2>
<input type="text" id="taskInput" placeholder="Enter new task...">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
</section>
To-Do List Section:
o Heading.
o Input box for new task.
o Button to add task.
o <ul> where tasks will be added dynamically.
JavaScript
// Store timetable data
let timetable = {};
Creates an empty object to store timetable info.
function add Class()
let day = [Link]("day").value;
let time = [Link]("time").value;
let subject = [Link]("subject").value;
Function to add a class into the timetable.
Gets day, time, subject from input fields (though in your HTML those inputs aren’t
present yet).
if (time === "" || subject === "") {
alert("Please enter both time and subject!");
return;
If inputs are empty → alert message and stop function.
if (!timetable[day]) {
timetable[day] = {};
let table = [Link]("timeTable");
let row = [Link]();
[Link]("id", "row-" + day);
let cell = [Link](0);
[Link] = day;
If that day doesn’t exist yet:
o Create a new entry for it in timetable.
o Add a new row in the HTML table with the day name.
timetable[day][time] = subject;
updateTable();
[Link]("time").value = "";
[Link]("subject").value = "";
Stores subject under that day and time.
Updates the whole timetable display.
Clears the input boxes.
Update Table()
function updateTable() {
let table = [Link]("timeTable");
// Collect all time slots
let times = new Set();
for (let d in timetable) {
for (let t in timetable[d]) {
[Link](t);
}
times = [Link](times);
Finds all unique time slots used in timetable.
[Link] = "";
let header = [Link]();
[Link](0).innerText = "Day / Time";
[Link](t => {
[Link]().innerText = t;
});
Clears old table.
Creates new header row: first column is "Day / Time", others are all unique times.
for (let d in timetable) {
let row = [Link]();
[Link](0).innerText = d;
[Link](t => {
[Link]().innerText = timetable[d][t] || "-";
});
Adds each day’s row.
Fills each time slot with subject (or "-" if empty).
To-Do List Functions
function addTask() {
let input = [Link]("taskInput");
let taskText = [Link]();
if (taskText === "") return;
Gets the text from input.
If empty, do nothing.
let li = [Link]("li");
let span = [Link]("span");
[Link] = taskText;
Creates a new list item with task text.
let btnDiv = [Link]("div");
[Link] = "task-buttons";
A div to hold buttons ✔ and ✘.
let doneBtn = [Link]("button");
[Link] = "✔";
[Link] = "doneBtn";
[Link] = function() {
[Link]("done");
[Link]("notdone");
};
Creates green ✔ button.
On click → marks task as done (green, line-through).
let notDoneBtn = [Link]("button");
[Link] = "✘";
[Link] = "notDoneBtn";
[Link] = function() {
[Link]("notdone");
[Link]("done");
};
Creates red ✘ button.
On click → marks task as not done (red).
[Link](doneBtn);
[Link](notDoneBtn);
[Link](span);
[Link](btnDiv);
[Link]("taskList").appendChild(li);
[Link] = "";
Adds buttons to task.
Adds task into <ul>.
Clears input box.