Ex No:5 Date:: Design A Webpage To Create Simple Interactive Cgpa Calculator Using Event Handling

This document describes how to create a simple percentage calculator web page using HTML, CSS, and JavaScript. The page takes user input for marks in three subjects, calculates the total marks and percentage, and uses if/else statements to determine the grade. It provides the HTML structure, CSS styling, and JavaScript code to retrieve input values, perform calculations, and display the output. The percentage calculator demonstrates using event handling to trigger calculations on button click and display results on the web page.

Uploaded by

Srisanth

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

200 views4 pages

Ex No:5 Date:: Design A Webpage To Create Simple Interactive Cgpa Calculator Using Event Handling

Uploaded by

Srisanth

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 4

EX NO:5 DATE:

DESIGN A WEBPAGE TO CREATE SIMPLE INTERACTIVE

CGPA
CALCULATOR USING EVENT HANDLING
AIM:
Student Grade Calculator (SGC) can be used to calculate a percentage based on the
marks of students. (SGC) is a fairly reliable indicator of student results
PROCEDURE:
SGC is a percentage calculator from a student's marks. To find out SGC we will
take input from the user (for the four subjects) stored in Chemistry, Hindi, and Math
variables for further calculation. The calculation process is simple, we will simply
First we will add all the input marks and store them in the total grades variable after
that we will divide it by the sum of maximum marks of each subject. And later on we
will let one more variable named as grades which will store the grades. Now as per
the percentage calculated, it will execute the respective if-else statement. Printing in
the result is a percentage and the grade of the student. Using HTML we are giving
desired structure, option for the input, and submit button. With the help of CSS, we
are beautifying our structure by giving colors and desired font, etc. In the JavaScript
section, we are processing the taken input and after calculating, the respective output
is printed.
i) Start the program by opening the Notepad.
ii) If a form field is empty, the required attribute prevents this form.
iii) Client side validation is performed by a web browser, before input is sent
to a web server.
iv) All JavaScript variables must be identified with unique names.
v) If an input field contains invalid data, display a message

CODING:
INDEX PAGE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link
rel="stylesheet" href="styles.css"> <title>Percentage Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
background-color: #fff;

border-radius: 20px;

}
.container:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
}
input
{ width:
100%;
padding: 8px;
margin-bottom: 10px;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 10px;
}

</style>
</head>
<body>
<script>
function calculatePercentage() {
const chemistryMarks = parseFloat(document.getElementById('chemistry').value);
const hindiMarks = parseFloat(document.getElementById('hindi').value);

const mathMarks = parseFloat(document.getElementById('math').value); const

totalMarks = chemistryMarks + hindiMarks + mathMarks;
const maxMarks = 300; // Assuming each subject has a maximum of 100 marks. const
percentage = (totalMarks / maxMarks) * 100; let grade;

if (percentage >= 90)

{grade = 'A+';
} else if (percentage >= 80) { grade = 'A';
} else if (percentage >= 70) { grade = 'B';
} else if (percentage >= 60) { grade = 'C';
} else if (percentage >= 50) { grade = 'D';
} else
{ grade =
'F';
}
document.getElementById('percentage').textContent = percentage.toFixed(2);
document.getElementById('grade').textContent = grade;
document.getElementById('totalMarks').textContent = totalMarks;
}
</script>
<div class="container">
<h1> Percentage Calculator</h1>
<form id="percentageCalculator">
<label for="chemistry">Chemistry Marks:</label> <input type="number"
id="chemistry" required><br><br>

<label for="hindi">Hindi Marks:</label>

<label for="math">Math Marks:</label>

<button type="button" onclick="calculatePercentage()">Calculate</button> </form>

<div id="result">
<p>Total: <span id="totalMarks">---</span></p>
<p>Percentage: <span id="percentage">---</span>%</p>
<p>Grade: <span id="grade">---</span></p> </div>
</div>
</body>
</html>

OUTPUT:

RESULT:
Thus the static web pages required for an online book store website is designed
successfully.