HTML Help

JoKeRz · Joined: 23 Jul 2008 Posts: 11

hi there..
i try to create Gpa calculator and did few search on internet about it.i found few examples,but most of it are complicated calculators while i just want to create simple calculator.the system should able calculate total credits in total credits form.it should able to calculate Gpa by credits X grade values for each row,and divide by total credits and able to add or delete row for subject.I can't get the javascript file working,and i really hope anyone can help modified it javascript file to make it working.your help is really appreciate.thanks

Html File
Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>GPA Calculator</title>
<link rel="stylesheet" type="text/css" href="ipLab3.css" />
<script src="ipLab3.js" type="text/javascript"></script>
</head><body>
<form name="classes" method="post" onsubmit="updateCreditsGpa(); return false">

<table class="matrix" id="GPAOverallTable" align="center" width="600" border="1">
<form name="gpaForm"></form>
<tbody id="GPATable">
<tr>
<th colspan="4"><h3 align="center">GPA CaLculaToR</h3></th>
</tr>
<tr>
<td align="center" colspan="2">Course Code</td><td align="center">Credits</td><td align="center">Grade</td>
</tr>
<tr>
<td align="center" colspan="2"><input input-align="center" size="20"></td>
<td align="center"><select name="Credit" size="1">
<option value=null>--
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</td>
<td align="center"> <select name="Grade" size="1">
<option value=null>--
<option value="4">A
<option value="3.75">A-
<option value="3.5">B+
<option value="3.0">B
<option value="2.5">C+
<option value="2">C
<option value="1.5">D+
<option value="1">D
<option value="0">F
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2"><input size="20"></td>
<td align="center"><select name="Credit" size="1">
<option value=null>--
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</td>
<td align="center"> <select name="Grade" size="1">
<option value=null>--
<option value="4">A
<option value="3.75">A-
<option value="3.5">B+
<option value="3.0">B
<option value="2.5">C+
<option value="2">C
<option value="1.5">D+
<option value="1">D
<option value="0">F
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2"><input size="20"></td>
<td align= "center"><select name="Credit" size="1">
<option value=null>--
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</td>
<td align="center"> <select name="Grade" size="1">
<option value=null>--
<option value="4">A
<option value="3.75">A-
<option value="3.5">B+
<option value="3.0">B
<option value="2.5">C+
<option value="2">C
<option value="1.5">D+
<option value="1">D
<option value="0">F
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2"><input size="20"></td>
<td align="center" ><select name="Credit" size="1">
<option value=null>--
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</td>
<td align="center"> <select name="Grade" size="1">
<option value=null>--
<option value="4">A
<option value="3.75">A-
<option value="3.5">B+
<option value="3.0">B
<option value="2.5">C+
<option value="2">C
<option value="1.5">D+
<option value="1">D
<option value="0">F
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2"><input size="20"></td>
<td align="center" ><select name="Credit" size="1">
<option value=null>--
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</td>
<td align="center" align="center"> <select name="Grade" size="1">
<option value=null>--
<option value="4">A
<option value="3.75">A-
<option value="3.5">B+
<option value="3.0">B
<option value="2.5">C+
<option value="2">C
<option value="1.5">D+
<option value="1">D
<option value="0">F
</select>
</td>
</tr>

</td>
</tr>
</tbody>
</table>

<form name="results" method="post" onsubmit="return false">

<table align="center" width="600" border="1">
<tbody>
<tr>
<td colspan="2">Total Credits:</td><td align="center" width="200"><input name="total_credits" size="20"></td>
</tr>
<tr>
<td colspan="2">GPA:</td><td align="center" ><input name="gpa" size="20"></td>
</tr>
<tr>
<td align="center" colspan="3"><input value="Calculate" onclick="updateCreditsGpa()" type="button"><input value="Add Course" onclick="javascript:insertRow()" type="button"><input value="Remove Course" onlick="javascript:deleteRow()" type="button"><input value="Reset" onclick=" clearCourses()" type="button"></td>
</tr>
</tbody></table>
</form>

<br>

</body></html>

javascript file
Code:

var Invalid = -1000;

//Insert the input fields for a new class
//into the table.

function insertInitialRows(){
for (x=1;x<=3;x++) insertRow();
}
function showFirstColumn(rowNum, row)
{
var a = row.insertCell(0);
a.nowrap=true;
a.setAttribute('align','center');
if (rowNum<10) displayedRowNum=rowNum+" ";
else displayedRowNum=rowNum+" ";
var displayedRowNum = document.createTextNode(displayedRowNum);
var textBox1 = document.createElement('input');
textBox1.setAttribute('type','text');
textBox1.setAttribute('name','course'+rowNum);
textBox1.setAttribute('id','course'+rowNum);
textBox1.setAttribute('size','6');
a.appendChild(displayedRowNum);
a.appendChild(textBox1);
return a;
}
function showSecondColumn(rowNum, row)
{
var b = row.insertCell(1);
b.setAttribute('align','center');
var textBox2 = document.createElement('input');
textBox2.setAttribute('type','text');
textBox2.setAttribute('name','credits'+rowNum);
textBox2.setAttribute('id','credits'+rowNum);
textBox2.setAttribute('size','3');
textBox2.onblur=tallyCredits;
b.appendChild(textBox2);
return b;
}
function showThirdColumn(rowNum, row)
{
var c = row.insertCell(2);
c.setAttribute('align','center');
var select1 = document.createElement('select');
select1.setAttribute('name','Grade'+rowNum);
select1.setAttribute('id','Grade'+rowNum);
select1.onchange=tallyCredits;
var newOption = document.createElement('option');
newOption.value = '4.0';
newOption.text = 'A';
select1.options.add(newOption, 0);
newOption = document.createElement('option');
newOption.value = '3.75';
newOption.text = 'A-';
select1.options.add(newOption, 1);
newOption = document.createElement('option');
newOption.value = '3.5';
newOption.text = 'B+';
select1.options.add(newOption, 2);
newOption = document.createElement('option');
newOption.value = '3.0';
newOption.text = 'B';
select1.options.add(newOption, 3);
newOption = document.createElement('option');
newOption.value = '2.5';
newOption.text = 'c+';
select1.options.add(newOption, 4);
newOption = document.createElement('option');
newOption.value = '2.0';
newOption.text = 'C';
select1.options.add(newOption, 5);
newOption = document.createElement('option');
newOption.value = '1.5';
newOption.text = 'D+';
select1.options.add(newOption, 6);
newOption = document.createElement('option');
newOption.value = '1.0';
newOption.text = 'D';
select1.options.add(newOption, 7);
newOption = document.createElement('option');
newOption.value = '0.0';
newOption.text = 'F';
select1.options.add(newOption, 11);
c.appendChild(select1);
return c;
}

function insertRow()
{
var myTable = document.getElementById("GPAOverallTable");
document.getElementById('deleteRowLink').style.display = 'block';
var rowNum = myTable.rows.length-5;
var newRow = myTable.insertRow(rowNum);
var x=myTable.tBodies[0].rows.length;
var a=showFirstColumn(rowNum, newRow);
var c=showThirdColumn(rowNum, newRow);
var b=showSecondColumn(rowNum, newRow);
var curRows=(x - 1);
}
function deleteRow()
{
var myTable = document.getElementById("GPAOverallTable");
var rowNum = myTable.rows.length; 
var courseNum = rowNum-6;
if (document.getElementById("course"+courseNum).value!="" || document.getElementById("credits"+courseNum).value!="" || document.getElementById("qualityPoints"+courseNum).value!="")
{
var confirmation=confirm("You have filled out some fields for course #"+courseNum+". Are you sure you would like to remove this course?");
}
else confirmation=true;
if (confirmation==true)
{
myTable.deleteRow(courseNum);
if (rowNum==8)document.getElementById('deleteRowLink').style.display = 'none';
}
else alert ("Course not deleted.");
 
tallyCredits();
}

//Update the credits and GPA fields.
function updateCreditsGpa() {
if (document.getElementById) {
var tbody = document.getElementById("classes_tbody");
var elements = tbody.getElementsByTagName("input");
updateCreditsGpaWith(elements);
}
else {
updateCreditsGpaWith(document.classes.elements);
}
}

//Convert the given float to a string of the closest
//float with two or fewer places after the decimal.
function formatDecimal(aFloat) {
var digits = "" + Math.round(100 * aFloat);
var length = digits.length;
if (length < 3) {
return "0." + digits;
}
else {
var dp = length - 2;
return digits.substring(0, dp) + "." + digits.substring(dp, length);
}
}

//Return the char of aString at index.
//If index is invalid, the results are undefined.
function charAt(aString, index) {
var length = aString.length;
return aString.substring(index, index + 1);
}

//Convert the given string to a float or return Invalid
//if the given input is not recognized as credit hours.
function toFloatOrInvalid(input) {
var length = input.length;
if (length == 0) {
return Invalid;
}
var first = charAt(input, 0);
if (first == "0") {
if (length == 1) {
return 0.0;
}
else if (charAt(input, 1) != ".") {
return Invalid;
}
}
else if ("123456789".indexOf(first) == -1) {
return Invalid;
}
var i = 1;
for (; i < length; ++i) {
var m = ".0123456789".indexOf(charAt(input, i));
if (m == -1) {
return Invalid;
}
else if (m == 0) {
break;
}
}
for (var j = i + 1; j < length; j++) {
if ("0123456789".indexOf(charAt(input, j)) == -1) {
return Invalid;
}
}
return parseFloat(input);
}

function updateCreditsGpaWith(elements) {
var totalGradedCredits = 0;
var totalUngradedCredits = 0;
var totalPoints = 0;

var haveAtLeastOneGrade = false;

var length = elements.length;
for (var i = 0; i < length; i += 3) {
var letter = elements[i + 2].value.toUpperCase();
if (letter == "X") {
continue;
}

var creditsString = elements[i + 1].value;
if (creditsString == "") {
continue;
}

var credits = toFloatOrInvalid(creditsString);
if (credits == Invalid) {
alert('Not a number: "' + creditsString + '"');
return;
}

else {
totalGradedCredits += credits;
}

if (letter == "") {
continue;
}
var points = letterToPoints(letter);
if (points == Invalid) {
alert('Unrecognized letter grade: "' + letter + '"');
return;
}
haveAtLeastOneGrade = true;

totalPoints += credits * points;
}
document.results.total_credits.value = totalGradedCredits + totalUngradedCredits;
if (haveAtLeastOneGrade && totalGradedCredits > 0) {
document.results.gpa.value = formatDecimal(totalPoints / totalGradedCredits);
}
else {
document.results.gpa.value = "";
}
}
function clearCourses()
{
//must be done for netscape/firefox...won't recognize new dynamically created form fields
var myTable = document.getElementById("GPAOverallTable");
var numcourses=myTable.tBodies[1].rows.length - 2; //all except for header and footer row
for (x=1;x<=numcourses;x++)
{
document.getElementById("course"+x).value="";
document.getElementById("credits"+x).value=""
document.getElementById("letterGrade"+x).selectedIndex=0;
}
document.gpaForm.reset();
calcOverallgpa();
}
//-calculate total gpa..and credits
function tallyCredits() {
var totalCredits, totalCreditPoints, GPA, courseNum;
totalCredits = 0;
totalCreditPoints = 0;
var myTable = document.getElementById("GPAOverallTable");
var numcourses=myTable.tBodies[1].rows.length - 2; //all except for header and footer row
for (x=1;x<=numcourses;x++)
{
if (document.getElementById("credits"+x).value!="") {
if ( (isNaN(document.getElementById("credits"+x).value)) || (eval(document.getElementById("credits"+x).value) > 12)) {
window.alert ("Credits for course #"+x+" must be a number from 1-12","NMU GPA")
document.getElementById("credits"+x).focus()
return (false);
}
else
{
document.getElementById("qualityPoints"+x).value = (document.getElementById("credits"+x).value*document.getElementById("letterGrade"+x).value).toString().substr(0,5);
totalCreditPoints+=eval(document.getElementById("qualityPoints"+x).value);
totalCredits += eval(document.getElementById("credits"+x).value);
}
}
}
document.gpaForm.totalCredits.value = totalCredits;
totalCreditPoints = totalCreditPoints.toString();
document.gpaForm.totalQualPoints.value = totalCreditPoints.substr(0,5);

//calc GPA with totals
if (document.gpaForm.totalCredits.value!= "" ){
GPA = eval(document.gpaForm.totalQualPoints.value) / eval(document.gpaForm.totalCredits.value);
if (isNaN(GPA)) GPA=0;
document.getElementById("GPA").value = GPA.toPrecision(3);
}
calcOverallgpa();
}
// compute overall gpa using semester's calculation, and the entered past gpa and credits earned
function calcOverallgpa() {
/*if (document.gpaForm.GPA.value == "") {
window.alert("You need to estimate your current semester GPA first (in the top part of the table).","NMU GPA");
document.gpaForm.elements[0].focus();
return (false);
}*/

//if ( (document.gpaOverallForm.PriorGPA.value == "" ) ||
if (document.gpaOverallForm.PriorGPA.value != "" && (isNaN(document.gpaOverallForm.PriorGPA.value) || eval(document.gpaOverallForm.PriorGPA.value>4)) ) {
window.alert ("Prior overall GPA must be entered as a number 4.0 or less","NMU GPA");
document.gpaOverallForm.PriorGPA.focus();
return(false);
}

//if ( (document.gpaForm.PriorCredits.value == "" )
if (document.gpaOverallForm.PriorCredits.value != "" && (isNaN(document.gpaOverallForm.PriorCredits.value) || eval(document.gpaOverallForm.PriorCredits.value>200)) ) {
window.alert ("Prior credits taken must be entered as a number 200 or less","NMU GPA");
document.gpaOverallForm.PriorCredits.focus();
return(false);
}
if (document.gpaOverallForm.PriorGPA.value != "" && document.gpaOverallForm.PriorCredits.value != "")
{
var totalCreditPoints, totalCredits, overallGPA;
if (document.gpaForm.totalCredits.value=="") document.gpaForm.totalCredits.value=0;
if (document.gpaForm.totalQualPoints.value=="") document.gpaForm.totalQualPoints.value=0;
totalCredits = eval(document.gpaForm.totalCredits.value) + eval(document.gpaOverallForm.PriorCredits.value);
totalCreditPoints = eval(document.gpaForm.totalQualPoints.value) + (document.gpaOverallForm.PriorCredits.value * document.gpaOverallForm.PriorGPA.value);
overallGPA = totalCreditPoints / totalCredits;
document.gpaOverallForm.OverallGPA.value = overallGPA.toPrecision(3);
}
}