Using Javascript, youll create an application interface as shown below to get name and scores from the user to add it to the array list.

1. Open the attached HTML, CSS and JavaScript files:

Then, run the application to see the user interface shown above, although that interface wont do anything until you develop the JavaScript for it.

2. In the JavaScript file, youll see some starting code, including the declarations for two arrays.

3. Write an event handler for the click event of the Add to Array button that adds the user entries for name and score to the ends of the names and scores arrays and then clears the entries from the text boxes.

4. If you havent already done it, add data validation to the event handler for the Add to Array button. The Name entry must not be empty and the Score entry must be a positive number from 0 through 100. If either entry is invalid, use the alert method to display this error message: You must enter a name and a valid score.

5. Write an event handler for the click event of the Display Results button that displays the names and scores of the elements in the arrays in the text area as shown above. (Note that you can use the value property to set the contents of a text area the same way you use it with a text box.)

6. Enhance the code for the event handler so it uses a loop to calculate the average score for the elements in the scores array. The handler should then display the average score below the list of names and scores as shown above.

7. Enhance the code for the event handler so it also calculates and displays the high score and low score for the elements in the array as shown above.

8. Make sure that in your user interface, the cursor focuses to the Name field when the application starts and also when a name and score have been added to the array.

test_scores.html

Use a Test Score array

Name:

Score:

test_scores.js

var names = ["Ben", "Joel", "Judy", "Anne"]; var scores = [88, 98, 77, 88]; var $ = function (id) { return document.getElementById(id); }; var addScore = function () { // get user entries var name = $("name").value; var score = parseInt( $("score").value ); // check entries for validity if (name == "" || isNaN(score) || score  100) { alert("You must enter a name and a valid score"); } else { names[names.length] = name; scores[scores.length] = score; $("name").value = ""; $("score").value = ""; } $("name").focus(); }; window.onload = function () { $("add").onclick = addScore; $("name").focus(); }; 

style.css

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; padding: 10px 20px; width: 450px; border: 3px solid blue; } h1 { color: blue; margin-top: 0; margin-bottom: .5em; } h2 { color: blue; font-size: 120%; padding: 0; margin-bottom: .5em; } main { padding: 1em 2em; } label { float: left; width: 3em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } p { margin: 0; } textarea { width: 20em; height: 8em; font-size: 120%; }