CS202 assignment 2 solution file download

Assignment No. 02
Semester: Spring 2024

CS202: Fundamentals of Front-End Development

Total Marks: 20

Week (6-11)

Topics: (61 to 138)

Due Date: June-24-2024

Instructions:

Please read the following instructions carefully before submitting an assignment. It should be clear that your assignment will not get any credit if:

▪ The assignment is submitted after the due date.

▪ The submitted assignment does not open or the file is corrupt.

▪ Assignment is copied (partial or full) from any source (websites, forums, students, etc.)

Note:

1) You have to just upload a .doc and .docx file which will have the code of HTML and JavaScript and Screenshot of the Output. Assignment in any other format (extension) will not be accepted and will be awarded with zero marks.

Objectives:

The objectives of this assignment are:

● To learn and practice the basic JavaScript.

● Use of JavaScript functions, events, loops, and conditional statement.

Note:

● This assignment is a Graded Assignment.

● The assignment submitted through email will not be accepted.

● This assignment is covering Week (6-11) Topics: (61 to 138).

● For details of topics in each lecture, see syllabus file given in download section of this course. The link of file is: https://vulms.vu.edu.pk/Courses/CS202/Downloads/CS202%20Mid%20Term%20Syllabus.pdf

Guidelines:

▪ Code should be properly indented.

▪ You can use the following tools/software:

o Notepad or Adobe Dreamweaver

For any query about the assignment, contact at cs202@vu.edu.pk.

Assignment Statement:

You are required to build a simple web application that allows users to enter their grades for multiple subjects. The application will calculate the average grade and determine if the user passed or failed based on the average grade.
To build this application you are required to use concepts of JavaScript along with HTML.

You are required to perform following steps.

1. Create an HTML form to get grades from the user for 4 subjects.

2. Add a "Calculate Average" button in the HTML form that triggers a JavaScript function.

3. Write a JavaScript function that uses loops and if-else statements to calculate the average grade and determine if the user passed or failed. The passing criteria is 50 percent marks in average.

4. Use your own name and VUID to print the result in both cases (pass or fail).

5. Copy your HTML and JavaScript code from the editor and paste it into a Word document. Also, attach a screenshot of the output in the Word document.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

box-sizing: border-box;

}

.main {

display: flex;

flex-wrap: wrap;

flex-direction: column;

}

.main > form {

display: flex;

flex-wrap: wrap;

flex-direction: column;

gap: 15px;

width: 75%;

}

.main > form > input {

width: 55%;

padding: 0.3rem;

}

.main > form > button {

width: 20%;

padding: 1rem;

}

</style>

</head>

<body>

<h1>Grade Calculator</h1>

<input

type="number"

name="gradeA"

placeholder="ENTER GRADE FOR SUBJECT 1"

<input

type="number"

name="gradeB"

placeholder="ENTER GRADE FOR SUBJECT 2"

<input

type="number"

name="gradeC"

placeholder="ENTER GRADE FOR SUBJECT 3"

<input

type="number"

name="gradeD"

placeholder="ENTER GRADE FOR SUBJECT 4"

<button type="submit">CALCULATE AVERAGE</button>

</form>

</div>

let form = document.getElementById("mYform");

let result = document.getElementById("res");

form.addEventListener("submit", function (a) {

a.preventDefault();

let name = "M.YOUSAF SADIQ";

let VUID = "BC123456789";

let form_grade = document.forms["mYform"];

let gradeA = form_grade["gradeA"].value;

let gradeB = form_grade["gradeB"].value;

let gradeC = form_grade["gradeC"].value;

let gradeD = form_grade["gradeD"].value;

let subjects = [gradeA, gradeB, gradeC, gradeD];

let totalSum = 0;

let totalGrade = subjects.length;

let average;

for (let i = 0; i < totalGrade; i++) {

totalSum = totalSum + Number(subjects[i]);

}

average = parseInt(totalSum / totalGrade);

if (average < 50) {

result.innerHTML = `Unfortunately,${name} (${VUID}) you Failed with an average grade of ${average} `;

} else {

result.innerHTML = `CONGRATULATIONS! ${name} (${VUID}) you passed with an average grade of ${average} `;

}

});

</script>

</body>

</html>

Note: You may use either internal or external JavaScript.

Solution Output:

Figure 1: HTML form to get user input

Figure 2: JavaScript Applied to get output (Pass)

Figure 3: JavaScript Applied to get output (Fail)

BEST OF LUCK! 😊

Learn With Yousaf Sadiq

CS202 assignment 2 solution file download

Comments

Post a Comment

Popular posts from this blog

Operating Systems CS604 assignment 2 download file

cs606 Assignment 2 2024 download file