Merge branch 'main' of https://git.levimclean.me/Levi/IWD2-02

2026-03-10 10:54:38 -04:00
parent b732795717 41ebd4ac62
commit 8b132e776f
21 changed files with 1018 additions and 43 deletions
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>PHP Lab 7</title>
+    <meta charset="utf-8">
+</head>
+
+<body>
+    <h1>Months of the Year</h1>
+    <?php
+    $months = [
+        1 => "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December"
+    ];
+
+    print_r($months);
+
+    echo "<br><br>";
+
+    $months[13] = "Winter";
+    $months[14] = "Construction";
+
+    foreach ($months as $type => $value) {
+        echo "The month of $value is month number $type<br>";
+    }
+    ?>
+
+    <h1>Pizza Toppings</h1>
+
+    <?php
+    $vegetables = [
+        "Green Peppers",
+        "Mushrooms",
+        "Olives",
+        "Chives"
+    ];
+    $meats = [
+        "Pepperoni",
+        "Ham",
+        "Bacon"
+    ];
+    $cheeses = [
+        "Mozzarella",
+        "Cheddar",
+        "Provologne"
+    ];
+
+    $toppings = [
+        "Vegetables" => $vegetables,
+        "Meats" => $meats,
+        "Cheeses" => $cheeses
+    ];
+
+    foreach ($toppings as $type => $value) {
+        echo "$type: ";
+        if (is_array($value)) {
+            foreach ($value as $number => $topping) {
+                echo "$topping, ";
+            }
+        } else {
+            echo "$type is  $value<br>";
+        }
+        echo "<br>";
+    };
+
+    echo "<br>";
+
+    $prices = [
+        "Small" => 6.99,
+        "Medium" => 8.99,
+        "Large" => 13.99,
+        "X-Large" => 18.99,
+        "Supersize" => 22.99
+    ];
+
+    asort($prices);
+
+    foreach ($prices as $type => $value) {
+        echo "$type: $value<br>";
+    };
+
+    echo "<br>";
+
+    ksort($prices);
+
+    foreach ($prices as $type => $value) {
+        echo "$type: $value<br>";
+    };
+    ?>
+</body>
+
+</html>
@@ -0,0 +1,59 @@
+<!-- Below is a header -->
+<h1>This is a header!</h1>
+
+<!-- Below is a header.
+It is a very important header. -->
+<h1> This is still a header! </h1>
+
+<form action="submit.php" method="post">
+  <!-- Text input -->
+  <label>Text</label>
+  <input type="text" name="desc">
+  <br><br>
+
+  <!-- Textarea -->
+  <label>Textarea</label>
+  <textarea name="desc-2"></textarea>
+  <br><br>
+
+  <!-- Select -->
+  <label>Select</label>
+  <select name="food">
+    <option value="burger">Burger</option>
+    <option value="pizza">Pizza</option>
+    <option value="pie">Pie</option>
+  </select>
+  <br><br>
+
+  <!-- Checkbox -->
+  <label>Checkbox</label>
+  <input type="checkbox" value="purple">
+  <br><br>
+
+  <!-- Radio button -->
+  <label>Radio</label>
+  <input type="radio" value="yes">
+  <br><br>
+
+  <!-- Button -->
+  <button type="button" onclick="alert('Hello')">Alert</button>
+  <br><br>
+
+  <!-- Example -->
+  <label>Grade</label>
+  <input type="text" name="grade">
+  <br><br>
+
+  <button type="submit">Submit</button>
+
+</form>
+
+<?php
+
+# PHP comment with hashtag.
+// PHP comment with two slashes.
+/*
+  Multi-line
+  PHP comment
+*/
+
@@ -0,0 +1,21 @@
+<?php
+
+// empty().
+// isset().
+// is_numeric().
+if (
+  !empty($_POST['grade']) &&
+  isset($_POST['grade']) &&
+  is_numeric($_POST['grade'])
+) {
+  $grade = $_POST['grade'];
+  print_r($grade);
+}
+else {
+  echo 'Grade not provided and/or was not numeric!';
+}
+
+// Strip Tags.
+$text = 'Hello <b><em>world!</em></b>';
+echo $text;
+echo strip_tags($text);
@@ -0,0 +1,64 @@
+<?php
+
+// All of the following will give the same result.
+echo 123 + 1;
+echo '<br>';
+echo "123" + 1;
+echo '<br>';
+echo "123" + "1";
+echo '<br><br>';
+
+// Arithmetic operators.
+echo '<strong>Arithmetic operators</strong><br>';
+echo 'Addition (+) ' . 1 + 2 . '<br>';
+echo 'Subtraction (-) ' . 2 - 1 . '<br>';
+echo 'Multiplication (*) ' . 2 * 2 . '<br>';
+echo 'Division (/) ' . 4 / 2 . '<br>';
+echo 'Modulus (%) ' . 4 % 2 . '<br>';
+$a = 1;
+$a++;
+echo 'Increment (++) ' . $a . '<br>';
+$a--;
+echo 'Decrement (--) ' . $a . '<br>';
+echo '<br>';
+
+// Assignment operators.
+echo '<strong>Assignment operators</strong><br>';
+$a = 2;
+echo $a . '<br>';
+$a += 2;
+echo $a . '<br>';
+$a -= 2;
+echo $a . '<br>';
+$a *= 2;
+echo $a . '<br>';
+$a /= 2;
+echo $a . '<br>';
+echo '<br>';
+
+// Comparison operators.
+echo '<strong>Comparison operators</strong><br>';
+$a = 1;
+$b = 2;
+$c = '2';
+
+echo ($a < $b) . '<br>';
+echo ($a > $b) . '<br>';
+echo ($a == $b) . '<br>';
+echo ($a != $b) . '<br>';
+echo ($b == $c) . '<br>';
+echo ($b === $c) . '<br>';
+echo '<br>';
+
+// Formatting numbers.
+echo '<strong>Formatting numbers</strong><br>';
+
+echo 'Round (2.49): ' . round(2.49) . '<br>';
+echo 'Number Format (21233122):' . number_format(21233122) . '<br>';
+echo 'Printf: ';
+$sub = 5;
+$tax = 0.65;
+printf('The subtotal is %u, making the tax
+%.2f.', $sub, $tax);
+echo '<br>';
+echo 'Mt Rand: ' . mt_rand(0, 100);
@@ -0,0 +1,133 @@
+<?php
+
+/* String Concatenation. */
+
+// Using the dot (.) operator
+$string1 = 'Hello';
+$string2 = 'World';
+$concatenation = $string1 . $string2;
+echo $concatenation;
+echo '<br><br>';
+
+// Using the concatenation assignment operator (.=)
+$string1 = 'Hello';
+$string2 = 'World';
+$string1 .= ' ' . $string2;
+echo $string1;
+echo '<br><br>';
+
+// Using double quotes (") to directly concatenate variables within a string
+$string1 = 'Hello';
+$string2 = 'World';
+$concatenation = "$string1 $string2";
+echo $concatenation;
+echo '<br><br>';
+
+/* Newlines */
+
+// Using the "\n" escape sequence
+echo "Line 1\nLine 2\nLine 3";
+echo '<br><br>';
+
+// Using double quotes (")
+echo "Line 1
+Line 2
+Line 3";
+echo '<br><br>';
+
+// Using PHP_EOL constant, which represents the correct end-of-line character
+echo "Line 1" . PHP_EOL . "Line 2" . PHP_EOL . "Line 3";
+echo '<br><br>';
+
+// Using the nl2br() function to insert HTML line breaks (\n) before all newlines in a string
+$text = "Line 1\nLine 2\nLine 3";
+echo nl2br($text);
+echo '<br><br>';
+
+/* Handling HTML String Input */
+
+// htmlspecialchars()
+$string = "<a href='test'>Test & 'Example'</a>";
+$safe_string = htmlspecialchars($string, ENT_QUOTES, 'UTF-8');
+echo $safe_string;
+echo '<br><br>';
+
+// htmlentities()
+$string = "<a href='test'>Test & 'Example'</a>";
+$safe_string = htmlentities($string, ENT_QUOTES, 'UTF-8');
+echo $safe_string;
+echo '<br><br>';
+
+/* Encoding and Decoding */
+
+// Encode
+$url = urlencode("https://fanshawec.ca?programs=iwd&cpa");
+echo $url;
+echo '<br><br>';
+
+// Decode
+$url = urldecode("https%3A%2F%2Ffanshawec.ca%3Fprograms%3Diwd%26cpa");
+echo $url;
+echo '<br><br>';
+
+/* Adjusting strings */
+
+// substr()
+$string = "You are a wizard, Harry.";
+$substr = substr($string, 9, 6);
+echo $substr;
+echo '<br><br>';
+
+// strtok()
+$string = "Luke, I am your father.";
+$substr = strtok($string, ",");
+echo $substr;
+echo '<br><br>';
+
+// strlen()
+$string = "May the odds be ever in your favour.";
+$length = strlen($string);
+echo $length;
+echo '<br><br>';
+
+// Uppercase / Lowercase
+$string = "hello world";
+echo ucfirst($string);
+echo '<br><br>';
+echo ucwords($string);
+echo '<br><br>';
+echo strtoupper($string);
+echo '<br><br>';
+echo strtolower('HELLO WORLD');
+echo '<br><br>';
+
+/* Replacing Strings */
+
+// str_replace()
+$search = 'world';
+$replace = 'everyone';
+$subject = 'Hello world!';
+echo str_replace($search, $replace, $subject);
+echo '<br><br>';
+
+// str_ireplace()
+$search = 'WORLD';
+$replace = 'everyone';
+$subject = 'Hello world!';
+echo str_ireplace($search, $replace, $subject);
+echo '<br><br>';
+
+// trim()
+$string = "   hello world   ";
+echo trim($string);
+echo '<br><br>';
+
+// rtrim()
+$string = "hello world!!!";
+echo rtrim($string, '!');
+echo '<br><br>';
+
+$string = "    hello world";
+echo ltrim($string);
+echo '<br><br>';
+
@@ -0,0 +1,201 @@
+<?php
+
+// -----------------------------
+// IF statement
+// -----------------------------
+
+if ($condition) {
+  // code.
+}
+
+// E.g.
+if ($year === 2024) {
+  $isOlympicYear = TRUE;
+}
+
+// Bonus: IF statements with a lot of conditions
+if (
+  $condition_1 &&
+  (
+    $condition_2 ||
+    $condition_3
+  ) &&
+  $condition_4
+) {
+  // code.
+}
+
+// -----------------------------
+// IF/ELSE statement
+// -----------------------------
+
+if ($condition) {
+  // code.
+}
+else {
+  // other code.
+}
+
+// E.g.
+if ($year === 2024) {
+  $isOlympicYear = TRUE;
+}
+else {
+  $isOlympicYear = FALSE;
+}
+
+// Alternatively, you could write the above like this.
+$isOlympicYear = FALSE;
+if ($year === 2024) {
+  $isOlympicYear = TRUE;
+}
+
+// -----------------------------
+// ELSEIF statements.
+// -----------------------------
+
+if ($condition_1) {
+  // code.
+}
+elseif ($condition_2) {
+  // other code.
+}
+else {
+  // other other code.
+}
+
+// E.g. 
+if ($year === 2024) {
+  $isOlympicYear = TRUE;
+}
+elseif ($year === 2025) {
+  $isOlympicYear = FALSE;
+}
+
+// -----------------------------
+// Nesting statements
+// -----------------------------
+
+// E.g.
+if ($year === 2024) {
+  $isOlympicYear = TRUE;
+
+  if ($city === 'Paris') {
+    echo "Bonjour!";
+  }
+  else {
+    echo "Hello!";
+  }
+}
+
+// -----------------------------
+// Early Return statements
+// -----------------------------
+
+function checkAge($age) {
+  // Early return if age is less than 18
+  if ($age < 18) {
+    return "Too young";
+  }
+  // Continue with the function if age is 18+
+  return "Welcome!";
+}
+
+echo checkAge(16); // Outputs: Too young
+echo checkAge(20); // Outputs: Welcome!
+  
+// -----------------------------
+// Ternary Expressions
+// - Only good for replacing non-complex IF/ELSE statements
+// -----------------------------
+
+$age = 20;
+$can_vote = ($age >= 18) ? 'Yes' : 'No'
+
+// Alternatively, you could write the above like this, but the above saves lines of code.
+if ($age >= 18) {
+  $can_vote = 'Yes';
+}
+else {
+  $can_vote = 'No';
+}
+
+// -----------------------------
+// Switch statements
+// -----------------------------
+
+// E.g.
+switch ($isOlympicYear) {
+  case 2023:
+    break; // Without a break, the code will continue executing to the next case.
+
+  case 2024:
+    break;
+
+  case 2025:
+    break;
+
+  default: // Default is the equivalent to an ELSE
+    break;
+}
+
+// Using a switch like above instead of the following
+if ($year === 2023) {
+  //
+}
+elseif ($year === 2024) {
+  //
+}
+elseif ($year === 2025) {
+  //
+}
+
+// -----------------------------
+// For loops
+// -----------------------------
+
+// E.g.
+for ($i = 1; $i < 5; $i++) {
+  echo "This is the $i -th iteration.";
+}
+
+// -----------------------------
+// While loops
+// -----------------------------
+
+// E.g.
+$i = 1;
+while ($i < 5) {
+  echo "This is the $i -th iteration.";
+  $i++;
+}
+
+// -----------------------------
+// Passing Arguments by Reference
+// -----------------------------
+
+function add_five(&$value) {
+  $value += 5;
+}
+
+$num = 2;
+add_five($num);
+echo $num; // Outputs: 7
+
+// -----------------------------
+// Using the ... operator
+// - Allows for any number of arguments 
+// -----------------------------
+
+function sum(...$numbers) {
+  $sum = 0;
+  
+  for ($i = 0; $i < count($numbers); $i++) {
+    $sum += $numbers[$i];
+  }
+
+  return $sum;
+}
+
+echo sum(1, 2, 3, 4); // Output: 10
+    
@@ -0,0 +1,194 @@
+<?php
+
+/* Arrays */
+
+$months = array(
+  'January', // Index = 0
+  'February', // Index = 1
+  'March', // Index = 2
+);
+echo '<pre>';
+print_r($months);
+echo '</pre>';
+
+// Getting value from index
+echo '<pre>';
+print_r($months[1]);
+echo '</pre>';
+
+// Short hand
+$months = [
+  'January', // Index = 0
+  'February', // Index = 1
+  'March', // Index = 2
+];
+
+/* Associative Arrays */ 
+
+$months = [
+  'month1' => 'January',
+  'month2' => 'February',
+  'month3' => 'March'
+];
+echo '<pre>';
+print_r($months);
+echo '</pre>';
+echo '<pre>';
+print_r($months['month1']);
+echo '</pre>';
+
+/* Working with Arrays */
+
+// range()
+$numbers = range(1, 10); // Same as $numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+echo '<pre>';
+print_r($numbers);
+echo '</pre>';
+
+$numbers = range(1, 10, 2); // Same as $numbers = [1, 3, 5, 7, 9];
+echo '<pre>';
+print_r($numbers);
+echo '</pre>';
+
+// Adding to arrays
+$months = [
+  'January', // Index = 0
+  'February', // Index = 1
+  'March', // Index = 2
+];
+// Add to index 3
+$months[3] = 'April'; 
+// Change index 2
+$months[2] = 'May';
+// Add to end of array
+$months[] = 'June';
+echo '<pre>';
+print_r($months);
+echo '</pre>';
+
+/* Merging Arrays */
+$sem1grades = [
+  'math' => 90,
+  'chemistry' => 67,
+  'biology' => 88,
+  'history' => 45,
+  'gym' => 60,
+];
+$sem2grades = [
+  'philosophy' => 87,
+  'art' => 99,
+  'physics' => 71,
+  'gym' => 60,
+];
+
+// array_merge()
+$allGrades = array_merge($sem1grades, $sem2grades);
+echo '<pre>';
+print_r($allGrades);
+echo '</pre>';
+
+// Array Union
+$allGrades = $sem1grades + $sem2grades;
+echo '<pre>';
+print_r($allGrades);
+echo '</pre>';
+  
+/* Multidimensional arrays */
+$meats = [
+  'Pepperoni',
+  'Bacon',
+  'Ham',
+];
+$cheeses = [
+  'Mozzarella',
+  'Cheddar',
+  'Swiss',
+];
+$veggies = [
+  'Onions',
+  'Peppers',
+  'Mushrooms',
+];
+$toppings = [
+  'Meats' => $meats,
+  'Cheeses' => $cheeses,
+  'Veggies' => $veggies,
+  'Size' => 'Medium',
+];
+echo $toppings['Veggies'][1];
+echo '<br><br>';
+
+/* Printing Arrays */
+
+// foreach()
+foreach ($toppings as $type => $value) {
+  echo "{$type}:</br>";
+  if (is_array($value)) {
+    foreach ($value as $number => $topping) {
+      echo "Topping #{$number} is $topping</br>";
+    }
+  } 
+  else {
+    echo "{$type} is $value</br>";
+  }
+  echo "</br>";
+}
+
+$words = [
+  'The',
+  'cow',
+  'jumped',
+  'over',
+  'the',
+  'moon',
+];
+// implode()
+$sentence = implode(' ', $words);
+echo $sentence;
+echo '<br><br>';
+// explode()
+$words2 = explode(' ', $sentence);
+echo $words2;
+echo '<br><br>';
+
+/* Sorting Arrays */
+
+$array1 = [
+  3,
+  1,
+  4,
+  1,
+  5,
+  9,
+];
+// sort()
+sort($array1);
+echo '<pre>';
+print_r($array1);
+echo '</pre>';
+// rsort()
+rsort($array1);
+echo '<pre>';
+print_r($array1);
+echo '</pre>';
+
+$assocArray = [
+  'a' => 3,
+  'b' => 1,
+  'c' => 4,
+];
+// asort()
+asort($assocArray);
+echo '<pre>';
+print_r($assocArray);
+echo '</pre>';
+$assocArray = [
+  'a' => 3,
+  'b' => 1,
+  'c' => 4,
+];
+// ksort()
+ksort($assocArray);
+echo '<pre>';
+print_r($assocArray);
+echo '</pre>';
@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome with Live Server",
+      "url": "http://127.0.0.1:5500/index.html",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
@@ -14,20 +14,73 @@ export function getPassingStudents(students, passMark = 70) {
    return passingStudents;
 }

-function calculateCourseAverages(students) {
-    
+export function calculateCourseAverages(students) {
+    const groupedCourses = students.reduce((accumulator, { course, grade }) => {
+        if (!accumulator[course]) {
+            accumulator[course] = { total: 0, count: 0 };
        }

-function getTopPerCourse(students) {
+        accumulator[course].total += Number(grade);
+        accumulator[course].count += 1;

+        return accumulator;
+    }, {});
+
+    return Object.entries(groupedCourses).reduce((accumulator, [course, values]) => {
+        accumulator[course] = values.count === 0 ? 0 : values.total / values.count;
+        return accumulator;
+    }, {});
 }

-function calculateOverallStatistics(students) {
-    const summary = document.getElementById("summary");
-    summary.innerHTML += `<p>Total Students: ${students.length}</p><br>
-                        <p>Average Grade: </p><br>
-                        <p>Highest Grade: </p><br>
-                        <p>Lowest Grade: </p><br>
-                        <p>Average Attendance: %</p><br>
-                        <p>Unique Courses: </p><br>`;
+export function getTopPerCourse(students) {
+    const topStudentsByCourse = students.reduce((accumulator, student) => {
+        const currentTopStudent = accumulator[student.course];
+
+        if (!currentTopStudent || student.grade > currentTopStudent.grade) {
+            accumulator[student.course] = student;
+        }
+
+        return accumulator;
+    }, {});
+
+    return Object.values(topStudentsByCourse);
+}
+
+export function calculateOverallStatistics(students) {
+    if (students.length === 0) {
+        return {
+            totalStudents: 0,
+            averageGrade: 0,
+            highestGrade: 0,
+            lowestGrade: 0,
+            averageAttendance: 0
+        };
+    }
+
+    const totals = students.reduce((accumulator, { grade, attendance }) => {
+        const numericGrade = Number(grade);
+        const numericAttendance = Number(attendance);
+
+        accumulator.totalStudents += 1;
+        accumulator.gradeTotal += numericGrade;
+        accumulator.attendanceTotal += numericAttendance;
+        accumulator.highestGrade = Math.max(accumulator.highestGrade, numericGrade);
+        accumulator.lowestGrade = Math.min(accumulator.lowestGrade, numericGrade);
+
+        return accumulator;
+    }, {
+        totalStudents: 0,
+        gradeTotal: 0,
+        attendanceTotal: 0,
+        highestGrade: -Infinity,
+        lowestGrade: Infinity
+    });
+
+    return {
+        totalStudents: totals.totalStudents,
+        averageGrade: totals.gradeTotal / totals.totalStudents,
+        highestGrade: totals.highestGrade,
+        lowestGrade: totals.lowestGrade,
+        averageAttendance: totals.attendanceTotal / totals.totalStudents
+    };
 }
@@ -9,9 +9,9 @@
    <body>
        <h1>Student Performance Analytics Dashboard</h1>
        <input type="text" placeholder="Search By Name" id="nameSearch">
-        <label for="minimumGrade">Minimum Grade:</label>
-        <input type="range" min="0" max="100" name="minimumGrade" id="minimumGrade">
-        <button type="button">Toggle Theme</button>
+        <label for="minimumGrade">Minimum Grade: <span id="gradeValue">50</span></label>
+        <input type="range" min="0" max="100" value="50" name="minimumGrade" id="minimumGrade">
+        <button type="button" id="themeToggle">Toggle Theme</button>

        <table id="studentTable">
            <thead>
@@ -31,10 +31,5 @@
            <h2>Summary</h2>
        </div>
        <script type="module" src="main.js"></script>
-        <script type="module" src="data.js"></script>
-        <script type="module" src="analytics.js"></script>
-        <script type="module" src="utils.js"></script>
-        <script type="module" src="ui.js"></script>
-        <script type="module" src="theme.js"></script>
    </body>
 </html>
@@ -0,0 +1,35 @@
+import { students } from "./data.js";
+import { calculateOverallStatistics } from "./analytics.js";
+import { getTopThree, uniqueCourses } from "./utils.js";
+import { renderTable, renderSummary } from "./ui.js";
+import { toggleTheme, loadTheme } from "./theme.js";
+
+let filteredStudents = [...students];
+
+const nameSearchInput = document.getElementById("nameSearch");
+const minGradeInput = document.getElementById("minimumGrade");
+const minGradeValue = document.getElementById("gradeValue");
+
+const applyFilters = () => {
+    const nameFilter = nameSearchInput.value.toLowerCase();
+    const minGrade = parseInt(minGradeInput.value);
+
+    filteredStudents = students.filter((student) => student.name.toLowerCase().includes(nameFilter) && student.grade >= minGrade);
+
+    const topThree = getTopThree(filteredStudents);
+    renderTable(filteredStudents, topThree);
+
+    const stats = calculateOverallStatistics(filteredStudents);
+    renderSummary(stats, uniqueCourses(filteredStudents).length);
+};
+
+nameSearchInput.addEventListener("input", applyFilters);
+minGradeInput.addEventListener("input", () => {
+    minGradeValue.textContent = minGradeInput.value;
+    applyFilters();
+});
+
+document.getElementById("themeToggle").addEventListener("click", toggleTheme);
+
+loadTheme();
+applyFilters();
@@ -20,3 +20,57 @@ table td, table th {
 table th {
    background-color: #f0f0f0;
 }
+
+button {
+    padding: 8px 12px;
+    margin: 10px 0;
+    cursor: pointer;
+}
+
+.gold {
+    background-color: gold;
+}
+
+.silver {
+    background-color: silver;
+}
+
+.bronze {
+    background-color: #cd7f32;
+}
+
+.dark {
+    background-color: #1f1f1f;
+    color: white;
+}
+
+.dark table {
+    background-color: #2b2b2b;
+    color: white;
+    border-color: white;
+}
+
+.dark table td,
+.dark table th {
+    border-color: white;
+}
+
+.dark table th {
+    background-color: #444;
+}
+
+.dark button {
+    background-color: #444;
+    color: white;
+    border: 1px solid white;
+}
+
+.dark input {
+    background-color: #333;
+    color: white;
+    border: 1px solid white;
+}
+
+.dark #summary {
+    color: white;
+}
@@ -0,0 +1,17 @@
+export function loadTheme() {
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme === "dark") {
+        document.body.classList.add("dark");
+    }
+}
+
+export function toggleTheme() {
+    document.body.classList.toggle("dark");
+
+    if (document.body.classList.contains("dark")) {
+        localStorage.setItem("theme", "dark");
+    } else {
+        localStorage.setItem("theme", "light");
+    }
+}
@@ -6,8 +6,19 @@ const passingStudents = getPassingStudents(students);
 const passingIds = passingStudents.map(student => student.id);
 const tableBody = document.getElementById("studentTableBody");

+export function renderTable(students, topThree) {
+    tableBody.innerHTML = "";
    students.forEach(student => {
        const row = document.createElement("tr");
+
+        if (topThree[0] && student.id === topThree[0].id) {
+            row.classList.add("gold");
+        } else if (topThree[1] && student.id === topThree[1].id) {
+            row.classList.add("silver");
+        } else if (topThree[2] && student.id === topThree[2].id) {
+            row.classList.add("bronze");
+        }
+
        const name = document.createElement("td");
        name.textContent = student.name ?? "-";
        const course = document.createElement("td");
@@ -17,11 +28,24 @@ students.forEach(student => {
        const attendance = document.createElement("td");
        attendance.textContent = student.attendance + "%" ?? "-";
        const assignmentAvg = document.createElement("td");
-    assignmentAvg.textContent = calculateAssignmentAverage(student);
+        assignmentAvg.textContent = calculateAssignmentAverage(...student.assignments);
        const status = document.createElement("td");
        status.textContent = passingIds.includes(student.id) ? "Pass" : "Fail";
        const city = document.createElement("td");
        city.textContent = student.address.city ?? "-";
        row.append(name, course, grade, attendance, assignmentAvg, status, city);
        tableBody.appendChild(row);
-});
+    })
+}
+
+export function renderSummary(stats, uniqueCourseCount) {
+    const summary = document.getElementById("summary");
+    summary.innerHTML = "";
+    summary.innerHTML += `<h2>Summary</h2>
+                        <p>Total Students: ${stats.totalStudents}</p>
+                        <p>Average Grade: ${stats.averageGrade.toFixed(2)}</p>
+                        <p>Highest Grade: ${stats.highestGrade}</p>
+                        <p>Lowest Grade: ${stats.lowestGrade}</p>
+                        <p>Average Attendance: ${stats.averageAttendance.toFixed(2)}%</p>
+                        <p>Unique Courses: ${uniqueCourseCount}</p>`;
+}
@@ -1,7 +1,17 @@
-export function calculateAssignmentAverage(student) {
-    if (!student.assignments || student.assignments.length === 0) {
-        return false;
+export function calculateAssignmentAverage(...grades) {
+    if (grades.length === 0) {
+        return 0;
    }
-    const total = student.assignments.reduce((sum, score) => sum + score, 0);
-    return total / student.assignments.length;
+
+    const total = grades.reduce((sum, score) => sum + score, 0);
+    return total / grades.length;
+}
+
+export function getTopThree(students) {
+    const sorted = [...students].sort((a, b) => b.grade - a.grade);
+    return sorted.slice(0, 3);
+}
+
+export function uniqueCourses(students) {
+    return [...new Set(students.map(({ course }) => course))];
 }