Web Fundamentals - Final Project
1. I configured XAMPP on Windows by changing the root document directory and starting the Apache
server.
2.1 I uploaded the faulty code to Visual Studio Code.
2.2 I took a look at it on my server. The button is not working.
2.3 When I ran the debugger, the console informed me about some errors.
2.4 I also changed this return statement so that the function would return the output variable instead of
a string.
2.5 In the function onClick(), [Link] was missing a semicolon. I added it.
2.6 n the decode function, the original code had enc3 !!= 64, which is not a valid comparison operator. I
changed it to !== to properly compare enc3 with 64.
2.7 There were too many closing braces, so I just removed one of them:
The problem encountered in the debugger was connected with lines 98-108 in the [Link] file. By
separating the increment operation (i++) from the method call, as below, each character is properly
processed, and the console doesn’t show any errors.
2.8 Now it works well.
3.1 I’m examining the pass_accept.php file. The functions are present in these lines:
<?php
if ($_POST["pws"] === base64_decode("VGgxNV8xNV81VFIwbjY") &&
$_POST["srt"] === "1352" && !empty($_POST["fName"])) {
echo 'var div_1 = [Link]("#d1");<br>
var div_2 = [Link]("#d2");<br>
var header = [Link]("#h");<br>
var div_style = [Link](div_1);<br>
var header_style =
[Link](header);<br>
function A1() {<br>
if (div_1.children[0].nodeName === "DIV") {<br>
[Link]("You nailed it !");<br>
if (div_2.children[0].nodeName === "H1")
{<br>
div_2.children[0].innerHTML = "This is
correct too!";<br>
A3();<br>
}<br>
}<br>
}<br>
<br><br>
function A2(params) {<br>
if ((params / (10 % 4)) === 132.993) {<br>
var m = [Link]("Math");<br>
[Link] = "Set Text In Here :";<br>
var arr = [m];<br>
[Link]("Element");<br>
[Link]("Second Element");<br>
[Link]("click", A2(arr));<br>
}<br>
}<br>
<br><br>
function A3() {<br>
if (div_style["textAlign"] === "center" &&
div_style["fontFamily"] === "fantasy") {<br>
[Link]("Just one more step");<br>
if (header_style.color === "rgb(255, 99, 71)"
&& header_style.transform === "matrix(-1, 0, 0, -1, 0, 0)") {<br>
alert("AMAZING YOU DID IT !!!");<br>
}<br>
}<br>
}<br><br>
A1();';
}
?>
3.2 I created another file called [Link] in order to run all the functions from pass_accept.php file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extra HTML</title>
</head>
<body>
<!-- Container div with id="d1" -->
<div id="d1" style="text-align: center; font-family: fantasy;">
<!-- An empty child div -->
<div></div>
</div>
<!-- Container div with id="d2" -->
<div id="d2">
<!-- Heading element -->
<h1 style="color: rgb(255, 99, 71); transform: matrix(-1, 0, 0, -1, 0,
0);">This is a heading inside d2</h1>
</div>
<script>
// Function to check if the structure is correct
function A1() {
// Selecting the div elements with IDs d1 and d2
var div_1 = [Link]("#d1");
var div_2 = [Link]("#d2");
// Checking if both divs exist and if the first child of div_1 is a
div element
if (div_1 && div_2 && div_1.children[0] && div_1.children[0].nodeName
=== "DIV") {
[Link]("You nailed it!"); // Log success message to the
console
// Checking if the first child of div_2 is an h1 element
if (div_2.children[0].nodeName === "H1") {
// Change the innerHTML of the h1 element
div_2.children[0].innerHTML = "This is correct too!";
// Call function A3
A3();
}
}
}
// Function to check styles and perform final check
function A3() {
// Selecting div_1 and the h1 element inside div_2
var div_1 = [Link]("#d1");
var header = [Link]("#d2 h1");
// Getting the computed styles of div_1 and the h1 element
var div_style = [Link](div_1);
var header_style = [Link](header);
// Checking if div_1's textAlign is center and fontFamily is fantasy
if (div_style["textAlign"] === "center" && div_style["fontFamily"]
=== "fantasy") {
[Link]("Just one more step"); // Log success message to the
console
// Checking if h1's color is rgb(255, 99, 71) and its transform
is as specified
if (header_style.color === "rgb(255, 99, 71)" &&
header_style.transform === "matrix(-1, 0, 0, -1, 0, 0)") {
alert("AMAZING YOU DID IT !!!"); // Alert success message
}
}
}
// Call Function A1 to start the process
A1();
</script>
</body>
</html>
4.1 I ran the program and accessed the website.
4.2 First, Function A3 appeared to be working fine.
4.3 Then, Function A1.
4.4* I think that function A2 is incomplete. At least, this is the information one of the students received
from support. Therefore, I decided to implement it in a separate file called extra_A2.php.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for defining character set, viewport, description, author, and
title -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Extra HTML - A2 Function</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/[Link]" rel="stylesheet">
<!-- Custom fonts for this template -->
<link
href='[Link]
rel='stylesheet' type='text/css'>
<link
href='[Link]
alic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/[Link]" rel="stylesheet">
<!-- Define favicon -->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!-- Define CSS style for body -->
<style>
body {
background-image: url('img/[Link]');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh; /* Set body height to 100% of viewport height */
}
</style>
</head>
<body>
<!-- Page Header -->
<div class="container py-5">
<div class="col-12 col-md-8 col-lg-6 mx-auto">
<!-- Container for main content with shadow effect -->
<div style="background-color: rgba(255,255,255,0.4)" class="p-3
shadow">
<?php
// PHP code block to process form submission
if (!empty($_POST["pws"]) && $_POST["pws"] ===
base64_decode("VGgxNV8xNV81VFIwbjY") && !empty($_POST["fName"])) {
// If form is submitted with correct password and first name
echo '
<script>
// Define function A2 with parameters
function A2(params) {
if ((params / (10 % 4)) === 132.993) { // Check
condition
// Create a new div element
var m = [Link]("div");
// Set inner HTML content of the div
[Link] = "Set Text In Here :";
// Define an array and push elements into it
var arr = [m];
[Link]("Element");
[Link]("Second Element");
// Add click event listener to the div element
[Link]("click", function() { A2(arr);
});
// Append the div element to the body
[Link](m);
}
}
// AJAX request to pass_accept.php to execute function A2
var xhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
eval([Link]); // Execute the PHP
response
A2(); // Call function A2 after receiving AJAX
response
}
};
[Link]("GET", "pass_accept.php", true);
[Link]();
</script>
';
} else {
// If form is not submitted or submitted with incorrect data
if (!empty($_POST)) {
echo 'Formularz został przesłany.<br>'; // Display
message
}
// Display login form
echo '
<form method="post">
<label for="fName">First name:</label><br>
<input type="text" id="fName" name="fName"><br>
<label for="pws">Password:</label><br>
<input type="password" id="pws" name="pws"><br><br>
<input type="submit" value="Submit">
</form>
';
}
?>
</div>
</div>
</div>
</body>
</html>
4.5* After navigating to the extra_A2.php website, I was able to access the form.
4.6* After clicking the Submit button, the server receives a request.
