Dying to solve this...Please help
• Write a web page that allows to calculate the grades for 3 courses as well as the GPA for them.
Your page must display 3 divisions laid out vertically near each other sharing the page width of 900 px.
Each division displays form elements to enter the grades of that course. Grades are entered as follows:
o # of Credits
o Exam 1 - 20%
o Exam 2 - 20%
o Project 1 - 15%
o Project 2 - 15%
o Final Exam - 30%
The division also displays two empty span tags (not empty form cells) that will show the average grade of the course and the letter grade of the course once calculated as described below.
The four division are followed (beneath them) by another division that displays the following:
o GPA of the 3 courses
o A button labelled 'Calculate'
o A button labelled 'Clear'
When the CALCULATE button is clicked, a javascript program must calculate the average of each class and its letter grade. The results should be displayed in the empty span tags mentioned above below each course. It then calculates the average GPA of the 3 courses and displays it in a BOLD CLEAR LARGE text below the forms (above the buttons).
When the CLEAR button is clicked, all form elements should become empty.
This is what I have so far
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Class Average Program</title>
<style type="text/css">
.centerBody {
position:relative;
margin:0 auto;
width:900px;
height:100%;
display: inline-block;
text-align: center;
}
.centerForm {
position:relative;
width:100%;
height:100%;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
text-align: center;
}
.formRow {
margin-left: 25%;
margin-right:25%;
width: 100%;lock;
position:relative;
}
.horizontalForm {
width: 400px;
position:relative;
margin: 0 auto;
}
.lblForm {
width: 100px;
position:relative;
display: inline-block;
text-align: center;
}
</style>
<script type = "text/javascript">
</script>
<body class="centerBody">
<form name="form1" class="centerForm" action=''>
<div class="formRow">
<div class="centerForm">
<div class="lblForm">
<label>Credits:</label>
</div>
<input type='text' name='creditRow1' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Exam 1:</label>
</div>
<input type='text' name='ex1Row1' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Exam 2:</label>
</div>
<input type='text' name='ex2Row1' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Project 1:</label>
</div>
<input type='text' name='pr1Row1' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Project 2:</label>
</div>
<input type='text' name='pr2Row1' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Final Exam:</label>
</div>
<input type='text' name='finalRow1' size='5' maxlength='5'/>
</div>
</div>
<div class="formRow">
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Credits:</label>
</div>
<input type='text' name='creditRow2' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Exam 1:</label>
</div>
<input type='text' name='ex1Row2' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Exam 2:</label>
</div>
<input type='text' name='ex2Row2' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Project 1:</label>
</div>
<input type='text' name='pr1Row2' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label>Project 2:</label>
</div>
<input type='text' name='pr2Row2' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Final Exam:</label>
</div>
<input type='text' name='finalRow2' size='5' maxlength='5'/>
</div>
</div>
<div class="formRow">
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Credits:</label>
</div>
<input type='text' name='creditRow3' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Exam 1:</label>
</div>
<input type='text' name='ex1Row3' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Exam 2:</label>
</div>
<input type='text' name='ex2Row3' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Project 1:</label>
</div>
<input type='text' name='pr1Row3' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Project 2:</label>
</div>
<input type='text' name='pr2Row3' size='5' maxlength='5'/>
</div>
<div class="centerForm">
<div class="lblForm">
<label class="lblForm">Final Exam:</label>
</div>
<input type='text' name='finalRow3' size='5' maxlength='5'/>
</div>
</div>
<div class="formRow">
<div class="horizontalForm">
<input type="button" value="Calculate" name="calcBtn" onclick="cumCalc()"/>
<input type="button" value="Clear" name="clearBtn" onclick="clear()"/>
</div>
</div>
</form>
</body>
</html>
no specific data...anything
Dear friend,
You can use any data you want...credits can be 3 or 4 or 1 etc.
Any grades will also suffice...but has to be according to the rates given...for example if the grade is 80 on exam 1 then 80x0.20 equals...
The calculate button should be able to show the grade of each course in an empty span tag under each course and letter grade also in an empty span tag under each course, so we should have 6 span tag...and under them one GPA box that also calculates the gpa of all courses...so the button calculate does all of this...the gpa must show above the buttons in a clear bold text...please help I'm out of time...tomorrow deadline
Thank youuuu
