JS Lab 3

2026-03-06 21:27:16 -05:00
parent 1fdfbb1b4f
commit 41ebd4ac62
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 };
        }
        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 getTopPerCourse(students) {
+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);
 }
-function calculateOverallStatistics(students) {
+export function calculateOverallStatistics(students) {
-    const summary = document.getElementById("summary");
+    if (students.length === 0) {
-    summary.innerHTML += `<p>Total Students: ${students.length}</p><br>
+        return {
-                        <p>Average Grade: </p><br>
+            totalStudents: 0,
-                        <p>Highest Grade: </p><br>
+            averageGrade: 0,
-                        <p>Lowest Grade: </p><br>
+            highestGrade: 0,
-                        <p>Average Attendance: %</p><br>
+            lowestGrade: 0,
-                        <p>Unique Courses: </p><br>`;
+            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>
+        <label for="minimumGrade">Minimum Grade: <span id="gradeValue">50</span></label>
-        <input type="range" min="0" max="100" name="minimumGrade" id="minimumGrade">
+        <input type="range" min="0" max="100" value="50" name="minimumGrade" id="minimumGrade">
-        <button type="button">Toggle Theme</button>
+        <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,22 +6,46 @@ const passingStudents = getPassingStudents(students);
 const passingIds = passingStudents.map(student => student.id);
 const tableBody = document.getElementById("studentTableBody");
-students.forEach(student => {
+export function renderTable(students, topThree) {
-    const row = document.createElement("tr");
+    tableBody.innerHTML = "";
-    const name = document.createElement("td");
+    students.forEach(student => {
-    name.textContent = student.name ?? "-";
+        const row = document.createElement("tr");
-    const course = document.createElement("td");
+
-    course.textContent = student.course ?? "-";
+        if (topThree[0] && student.id === topThree[0].id) {
-    const grade = document.createElement("td");
+            row.classList.add("gold");
-    grade.textContent = student.grade ?? "-";
+        } else if (topThree[1] && student.id === topThree[1].id) {
-    const attendance = document.createElement("td");
+            row.classList.add("silver");
-    attendance.textContent = student.attendance + "%" ?? "-";
+        } else if (topThree[2] && student.id === topThree[2].id) {
-    const assignmentAvg = document.createElement("td");
+            row.classList.add("bronze");
-    assignmentAvg.textContent = calculateAssignmentAverage(student);
+        }
-    const status = document.createElement("td");
+
-    status.textContent = passingIds.includes(student.id) ? "Pass" : "Fail";
+        const name = document.createElement("td");
-    const city = document.createElement("td");
+        name.textContent = student.name ?? "-";
-    city.textContent = student.address.city ?? "-";
+        const course = document.createElement("td");
-    row.append(name, course, grade, attendance, assignmentAvg, status, city);
+        course.textContent = student.course ?? "-";
-    tableBody.appendChild(row);
+        const grade = document.createElement("td");
-});
+        grade.textContent = student.grade ?? "-";
        const attendance = document.createElement("td");
        attendance.textContent = student.attendance + "%" ?? "-";
        const assignmentAvg = document.createElement("td");
        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) {
+export function calculateAssignmentAverage(...grades) {
-    if (!student.assignments || student.assignments.length === 0) {
+    if (grades.length === 0) {
-        return false;
+        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))];
 }