JS Lab 3
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
@@ -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>
|
||||||
Binary file not shown.
@@ -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>';
|
||||||
+12
@@ -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;
|
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>
|
<body>
|
||||||
<h1>Student Performance Analytics Dashboard</h1>
|
<h1>Student Performance Analytics Dashboard</h1>
|
||||||
<input type="text" placeholder="Search By Name" id="nameSearch">
|
<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">
|
<table id="studentTable">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -31,10 +31,5 @@
|
|||||||
<h2>Summary</h2>
|
<h2>Summary</h2>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="main.js"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</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 {
|
table th {
|
||||||
background-color: #f0f0f0;
|
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 passingIds = passingStudents.map(student => student.id);
|
||||||
const tableBody = document.getElementById("studentTableBody");
|
const tableBody = document.getElementById("studentTableBody");
|
||||||
|
|
||||||
students.forEach(student => {
|
export function renderTable(students, topThree) {
|
||||||
|
tableBody.innerHTML = "";
|
||||||
|
students.forEach(student => {
|
||||||
const row = document.createElement("tr");
|
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");
|
const name = document.createElement("td");
|
||||||
name.textContent = student.name ?? "-";
|
name.textContent = student.name ?? "-";
|
||||||
const course = document.createElement("td");
|
const course = document.createElement("td");
|
||||||
@@ -17,11 +28,24 @@ students.forEach(student => {
|
|||||||
const attendance = document.createElement("td");
|
const attendance = document.createElement("td");
|
||||||
attendance.textContent = student.attendance + "%" ?? "-";
|
attendance.textContent = student.attendance + "%" ?? "-";
|
||||||
const assignmentAvg = document.createElement("td");
|
const assignmentAvg = document.createElement("td");
|
||||||
assignmentAvg.textContent = calculateAssignmentAverage(student);
|
assignmentAvg.textContent = calculateAssignmentAverage(...student.assignments);
|
||||||
const status = document.createElement("td");
|
const status = document.createElement("td");
|
||||||
status.textContent = passingIds.includes(student.id) ? "Pass" : "Fail";
|
status.textContent = passingIds.includes(student.id) ? "Pass" : "Fail";
|
||||||
const city = document.createElement("td");
|
const city = document.createElement("td");
|
||||||
city.textContent = student.address.city ?? "-";
|
city.textContent = student.address.city ?? "-";
|
||||||
row.append(name, course, grade, attendance, assignmentAvg, status, city);
|
row.append(name, course, grade, attendance, assignmentAvg, status, city);
|
||||||
tableBody.appendChild(row);
|
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))];
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user