1. Project Overview

Purpose of the System

Welcome to the Nafyad School Academic Timetable project! The main goal of this website is to show class schedules for Grade 11 and 12 students in a clean, easy-to-use digital format. Instead of looking at a printed paper or a picture on a phone, students can simply select their grade and section from a dropdown list, and the website will instantly display their weekly schedule. Furthermore, the website provides a personalized daily inspirational message to encourage students throughout their school week.

How It Was Built (Static JSON Architecture)

Think of this website as a smart digital notebook. It does not use a complex database (like a giant online filing cabinet) to store the schedules. Instead, it uses a simple text file called schedule.json that holds all the timetable information. Because it is simple, the website loads very fast and never crashes.

How Data Flows (JSON → JavaScript → HTML)

Here is how the website gets the schedule and shows it to you on the screen:

  1. Asking for Data: When you open the page, JavaScript (our website's brain) goes to the schedule.json file and asks for the timetable data.
  2. Reading the Data: JavaScript reads the file and translates it into a format it can understand.
  3. Waiting for You: The website waits for you to pick a grade and a section from the menus.
  4. Drawing the Table: When you make a choice, JavaScript finds your specific schedule in the data and builds a beautiful table (HTML) on the screen for you to see.

2. HTML Explanation

HTML (HyperText Markup Language) is the skeleton or the building blocks of our website. It tells the browser what kind of content we have, like buttons, tables, or text.

Document Basics

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Academic Timetable 2018</title>
</head>
<body>
  • <!DOCTYPE html>: This tells the web browser (like Chrome or Safari), "Hey, this is a modern HTML5 website!" Without this, the browser might try to display the page using older, broken rules.
  • <html>, <head>, <body>:
    • The <html> tag wraps everything.
    • The <head> holds hidden information for the browser (like the title of the page or links to styles).
    • The <body> contains everything you actually see on the screen.
  • <meta charset="UTF-8">: This rule ensures our website can display all characters, symbols, and numbers correctly without showing weird boxes or question marks.

Why Semantic Structure matters

Instead of just throwing all our content onto the page randomly, we organize it using tags like <header> (for the top logo), <main> (for the main content), and <footer> (for the bottom text). This is like organizing a book into chapters. It makes the code easier for humans to read, and it helps tools like screen readers understand the page for people who are blind.

Dropdowns and Buttons

<select id="grade-select">
    <option value="" disabled selected>Choose Grade</option>
    <option value="11">Grade 11</option>
</select>
<button id="print-btn" class="btn-secondary">Print</button>
  • <select> and <option>: These create the dropdown menus. The <select> tag is the main box, and the <option> tags are the choices inside it (like Grade 11 or Grade 12).
  • <button>: This creates a clickable button. When you click it, we can tell JavaScript to do something specific, like opening the print menu.

Making the Table

<table id="timetable">
    <thead>
        <tr>
            <th>Period / Day</th>
            <th>Monday</th>
        </tr>
    </thead>
    <tbody id="timetable-body"></tbody>
</table>
  • <table>: This starts the grid.
  • <tr> (Table Row): This creates a horizontal row. Like a row of students sitting next to each other.
  • <th> (Table Heading): This creates a column title, usually bolded, like the days of the week.
  • <td> (Table Data): This is a single box (or cell) inside the table where we put a subject, like "MATHS" or "ENGLISH".

Why Keep Files Separated?

We use external files for our design (style.css) and our code logic (script.js) instead of writing everything inside the HTML file. Why? Imagine if your house had the plumbing, electricity, and furniture all glued together in one giant lump. It would be impossible to fix anything! Keeping them in separate files keeps our code neat, organized, and much easier to read and fix.

3. CSS Explanation

CSS (Cascading Style Sheets) is the paint and decorations of our website. It takes plain HTML and makes it look colorful, organized, and pretty.

Flexbox (Making Things Line Up)

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Flexbox is a magical CSS tool that helps us put things exactly where we want them. In this code, we tell the header items to be in a vertical line (column) and to line up right in the middle (center).

Responsive Design (Looking Good on Phones)

@media (max-width: 768px) {
    .table-wrapper { display: none; }
    .mobile-cards { display: flex; }
}

Have you noticed that websites look different on a laptop versus a small phone? That is called "Responsive Design." We use something called Media Queries (@media). This code says: "If the screen is smaller than 768 pixels, hide the big wide table and show small stacked cards instead so the user doesn't have to zoom in!"

Hover Effects (Interactive Magic)

When you move your mouse over a button and it changes color slightly, that is a hover effect. We use code like .button:hover to tell the browser: "When the mouse is over this, change how it looks!" It makes the website feel alive.

Fixing Table Borders

table { border-collapse: collapse; }

By default, HTML tables draw an annoying double-line between all the boxes. Using border-collapse removes the gap and makes the table look like a clean grid, just like an Excel spreadsheet.

Gradients (Color Blends)

A gradient is when one color slowly blends into another color. We use a linear-gradient to make the top menu bar look smooth and modern, rather than just using one boring flat color.

10 Important CSS Rules We Used

  1. display: Decides if an element acts like a block, flexbox, or disappears.
  2. flex-direction: Decides if items flow side-by-side (row) or top-to-bottom (column).
  3. gap: Adds space between flexbox items, like adding space between desks.
  4. background-color: Sets the background color of a block.
  5. border-radius: Rounds the sharp corners of boxes to make them look friendly.
  6. box-shadow: Creates a shadow behind a box to make it look like it's floating.
  7. transition: Makes changes happen smoothly (like a slow color change) instead of instantly.
  8. margin: Adds space on the outside of a box pushing it away from other things.
  9. padding: Adds space on the inside of a box, like adding bubble wrap inside a package.
  10. color: Changes the color of the text.

4. JavaScript Explanation

If HTML is the skeleton and CSS is the paint, JavaScript is the muscles. It is the programming language that makes our website actually do things (like grab schedule data and listen to your clicks).

Getting Data with Fetch

async function loadSchedule() {
    try {
        const response = await fetch('/src/schedule.json');
        scheduleData = await response.json();
    } catch (error) { ... }
}
  • What fetch() does: Like sending a messenger to the library, fetch() goes and grabs our schedule.json file so we have data to read.
  • Why we use JSON: JSON (JavaScript Object Notation) is a simple way to write out lists and text that computers can understand very easily. It is basically the universal language of the web.
  • Error Handling: The try and catch code is a safety net. It means: "Try to get the schedule, but if something goes wrong (like the internet is off), catch the error so the whole website doesn't break."

Listening to Buttons (Events & DOM)

const timetableBody = document.getElementById('timetable-body');
gradeSelect.addEventListener('change', (event) => {
    // Do something when the dropdown changes
});
  • DOM Manipulation: The DOM is simply the HTML code on the page. DOM Manipulation means we use JavaScript to change that HTML while you're looking at it.
  • document.getElementById: This tells JavaScript to look at the HTML page and find a specific element using its unique ID tag. Like calling someone by their name.
  • Event Handling: An "event" is something the user does, like clicking or typing. addEventListener tells JavaScript: "Keep your ear to the ground and listen for when someone changes the dropdown menu, then do your job!"

Building the Real Table with Loops

for (let p = 0; p < 6; p++) {
    const row = document.createElement('tr');
    days.forEach(day => {
        const td = document.createElement('td');
        td.textContent = data[day][p];
        row.appendChild(td);
    });
    timetableBody.appendChild(row);
}
  • Arrays: Think of an array like a train. It's an organized list of cars attached together. We use an array to hold all the days of the week, or the 6 periods in a day in order.
  • Loops: A loop tells the computer to repeat an action. Instead of writing "make a row" 6 different times, we use a for loop to tell JavaScript: "Do this code exactly 6 times loudly to build 6 rows!"
  • Why Build Rows Dynamically? Because we have 11 different sections (11A, 12B, etc.). Instead of writing 11 different HTML tables manually (which would take hours), JavaScript writes the HTML automatically depending on what the user selects in just 1 second!

5. Data Structure Explanation

How is the Schedule Saved?

Our JSON file organizes data beautifully like folders on a computer:

  • First Folder: The Section Name (like "11A").
  • Inside that folder: The Day of the Week (like "Monday").
  • Inside that folder file: An ordered list (Array) of 6 subjects.

Why use Arrays for periods?

An array guarantees the order stays exactly the same. The first subject in the list is always 1st Period. The fifth subject is always 5th period. It is very simple and prevents subjects from randomly jumbling together.

How it survives without a Database

Real databases (like passwords or YouTube accounts) need huge heavy servers to talk to. But a schedule almost never changes! Saving it as a simple text file means any small computer can run this website instantly without setting up complicated systems.

6. Design Decisions

  • Why No Framework? Many developers use huge tools like React or Angular to build websites. But since this is a simple, fast project, we used Pure JavaScript (Vanilla JS). It's like riding a bicycle to the neighbor's house instead of renting a massive cargo truck. It keeps things fast and easy to understand.
  • Static Pages: Only having basic HTML, CSS, and JS files means our site is extremely fast. When you open the page, everything is already loaded and ready.
  • Security: There are no login pages, and we don't save any user data. Because the website relies only on a static file, it is impossible for hackers to steal information or break into back-end systems.
  • Speed: Because the JSON schedule file is so tiny, the website loads in the blink of an eye.
  • Limitations: The only downside? If English moves from 1st period to 2nd period, the principal can't just log into an admin panel and change it. A web developer has to go in and manually edit the schedule.json file to fix it.

7. Conclusion

This Academic Timetable is a perfect example of keeping things simple, fast, and user-friendly. By using the core languages of the internet—HTML, CSS, and JavaScript—we created a powerful and helpful tool without needing complicated heavy software. It loads instantly, works beautifully on both phones and computers, and gives students exactly the information they need in seconds.