HTML calculate GPA

I need help with my assignment

The page should repeatedly prompt the user for course information, reading the course name, grade received, and credit hours for a particular course in a single dialog box. The program should continue prompting and reading in grades until the user enters an empty string to signify the end. For example,



Once the course grades have been stored, the page should compute the student's overall GPA. The grade point averages are computed as follows:

Grade points (a.k.a. quality points) are assigned to each course based on the grade and number of credit hours:

A yields 4 points for each hour

B+ yields 3.5 points for each hour

B yields 3 points for each hour

C+ yields 2.5 points for each hour

C yields 2 points for each hour

D yields 1 point for each hour

F, AF, and WF yield 0 points for each hour

The grade point average (a.k.a. quality point average) is computed by dividing the total number of grade points earned by the total number of credit hours.

For example, suppose a student entered the following course information (with each line entered in a different dialog box):

THL100 B+ 3
PHL107 A 3
ENG120 C+ 3
MTH245 A 4
CSC221 A 3


The total number of grade points earned by this student is

(3.5 * 3) + (4 * 3) + (2.5 * 3) + (4 * 4) + (4 * 3) =
10.5 + 12 + 7.5 + 16 + 12 =
58


Dividing this total by the number of credit hours completed yields a GPA of 58/16 = 3.625.

Your page should display the total number of grade points, number or hours, and GPA, as well as all of the course information in a readable form. This information should not be displayed in the page until all user input has been processed. For example,

COURSE GRADE HOURS
THL100 B+ 3
PHL107 A 3
ENG120 C+ 3
MTH245 A 4
CSC221 A 3

Total grade points = 58
Number of hours = 16
GPA = 3.625



my code so far looks like this


<html>
<head>
<script type="text/javascript">
function load() {
var data = [];
while (true) {
var line = prompt("Enter course name, grade, and credit hours (e.g. CS320 B+ 4) ");
if (line == null || line == "") {
break;
}
var values = line.split(/\s/);
var num = parseInt(values[0]);
var item = [num];
data.push(item);

var gpa = 0, //gpa set to zero
check = null, //all the variables initialized
gradePoint = 0,
pos = 0,
totalGradePoints = 0,
totalCreditHours = 0;
}
return data;
}

function display (data) {
var table = document.getElementById('result');
table.innerHTML = "<tr><th>Course</th><th>Grade</th><th>Hours</th></tr>";
var sum = 0;

for (var i in data) {
var item = data[i];
table.innerHTML += "<tr><td>"
+ i + "</td><td>"
+ item[0] + "</td><td>"
sum += item[0];
}
var text = "<br/>Total grade points = " + sum + "<br/>";
document.getElementById('text').innerHTML = text;
var text = "<br/>Number of hours = " "<br/>";
document.writeln("GPA = " + gpa); //printing the output
return gpa;
}


</script>
</head>

<body>
<table id="result" border="1px" class="classy">
</table>
<span id="text"></span>
<script type="text/javascript">
data = load();
display(data);
</script>
</body>
</html>

You can just solve this problem by having an infinite loop (breakable by a certain keyword), then continuously prompt the user for the grade values and then add em all together then divide by total number of grades to get the GPA. What exactly do you have a problem with?