*We need to write a code using css or html. When we run the program the output w
ID: 3918003 • Letter: #
Question
*We need to write a code using css or html. When we run the program the output will be the first picture. We need to enter the curent GPA, curent hours and we need to be able to add 10 courses at once so we can select the credit hours from 0 to 10. The expected grade you take it from the timetable down. After we click on Calculate GPA, the result will appear in the lines down as Total credit of this semester, Semester GPA and Commulative GPA. And a reset fields button to clear everything.
This GPA Calculator calculates the GPA (in points) as follows: A = 4 points, B+ = 3.5, B = 3, C+ = 2.5, C = 2, D+ = 1.5, D = 1, F = 0
develop a GPA Calculator App (using Javascript) to manage the student grades for each course. As shown in Table 1, every letter grade has a corresponding grade point, which constitutes the basis for calculating the GPA
Explanation / Answer
here is your program : ------------>>>>>>>>>>
<!DOCTYPE html>
<html>
<head>
<title>GPA Calculator</title>
</head>
<style type="text/css">
.Form{
width: 700px;
min-height: 400px;
background-color: silver;
margin: 0 auto;
}
.row{
width:700px;
height:40px;
border-top: 2px solid;
border-color: black;
float: left;
}
.cource{
width:700px;
min-height: 100px;
}
.Chead{
width: 700px;
height: 30px;
border-top: 2px solid;
border-color: black;
float: left;
}
</style>
<script type="text/javascript">
var col = 1;
function addAnotherRow(){
if(col >= 10){
return;
}
col = col+1;
str = "";
str += "<div class="row">";
str += "<span>"+col+"</span>";
str += "<span>";
str += "<input type="text" value="">";
str += "</span>";
str += "<span>";
str += "<select"+"id=""+"credit"+col+"""+">";
str += "<option value=0>0";
str += "<option value=1>1";
str += "<option value=2>2";
str += "<option value=3>3";
str += "<option value=4>4";
str += "<option value=5>5";
str += "<option value=6>6";
str += "<option value=7>7";
str += "<option value=8>8";
str += "<option value=9>9";
str += "<option value=10>10";
str += "</select>";
str += "</span>";
str += "<span>";
str += "<select"+"id=""+"grade"+col+"""+">";
str += "<option value=4.0>A";
str += "<option value=3.5>B+";
str += "<option value=3.0>B";
str += "<option value=2.5>C+";
str += "<option value=2.0>C";
str += "<option value=1.5>D+";
str += "<option value=1.0>D";
str += "<option value=0>F";
str += " </select>";
str += "</span>";
str += "</div>";
document.getElementById("course").innerHTML += str;
}
function validate(){
var v = document.getElementById("cgpa").value;
var v1 = document.getElementById("cch").value;
if(isNaN(v)){
document.getElementById("cgpa").value = "";
document.getElementById("cgpa").focus();
return false;
}
if(isNaN(v1)){
document.getElementById("cch").value = "";
document.getElementById("cch").focus();
return false;
}
return true;
}
function Calculate(){
if(!validate()){
return;
}
var totCredit = 0.0;
var totPoint = 0.0;
var semGPA = 0.0;
var comGPA = 0.0;
var str1 = "";
var str2 = "";
var curGPA = parseFloat(document.getElementById("cgpa").value);;
var curCred = parseFloat(document.getElementById("cch").value);
for(var i = 1;i<=col;i++){
str1 = "";
str2 = "";
str1 += "grade"+i;
str2 += "credit"+i;
totCredit += parseFloat(document.getElementById(str2).value);
totPoint += parseFloat(document.getElementById(str1).value)*parseFloat(document.getElementById(str2).value);
}
semGPA = (totPoint/totCredit);
comGPA = (totPoint+(curGPA * curCred))/(totCredit+curCred);
document.getElementById("comGPA").innerHTML = " "+(comGPA+"").substring(0,5);
document.getElementById("totCredit").innerHTML = " "+(totCredit+"").substring(0,5);
document.getElementById("semGPA").innerHTML = " "+(semGPA+"").substring(0,5);
}
</script>
<body>
<header><h1>WELCOME TO GPA CALCULATOR</h1></header>
<div class="Form">
<form action="#">
<div class="row">
<span>
Current GPA :-
</span>
<span>
<input type="text" id="cgpa" value="">
</span>
</div>
<div class="row">
<span>
Current Hours :-
</span>
<span>
<input type="text" id="cch" value="">
</span>
</div>
<div class="cource" id="course">
<div class="Chead">
<span><u>Number</u></span>
<span><u>Course Name(Optional)</u></span>
<span><u>Credit Hours</u></span>
<span><u>Credit Expected</u></span>
</div>
<div class="row">
<span>1</span>
<span>
<input type="text" value="">
</span>
<span>
<select id="credit1">
<option value=0>0
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
<option value=10>10
</select>
</span>
<span>
<select id="grade1">
<option value=4.0>A
<option value=3.5>B+
<option value=3.0>B
<option value=2.5>C+
<option value=2.0>C
<option value=1.5>D+
<option value=1.0>D
<option value=0>F
</select>
</span>
</div>
</div>
<div clas="row">
<span>
<a href="#"><u>+ add another course</u></a>
</span>
</div>
<div clas="row">
<span>
<input type="button" value="Calculate GPA">
</span>
<span>
<input type="Reset" id="c" value="Reset">
</span>
</div>
</form>
</div>
<div class="Form">
<h2><u>Results:</u></h2>
<div class="row">
<span>
Total Credit Of This Semester
</span>
<span>
=<span id="totCredit"></span>
</span>
</div>
<div class="row">
<span>
Semester GPA
</span>
<span>
=<span id="semGPA"></span>
</span>
</div>
<div class="row">
<span>
Commulative GPA
</span>
<span>
=<span id="comGPA"></span>
</span>
</div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.