Learning to work with arrays in JavaScript with jQuery

The following is an HTML/JavaScript question. Create an application interface as shown below to get name and scores from the user to add it to the array list.

1. Use the attached completed HTM and CSS files, and the attached INCOMPLETE JavaScript file.

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.

PLEASE use the attached INCOMPLETE JavaScript code that I have provided you to complete this assignment. The HTML and CSS codes that are attached are ONLY FOR REFERENCE. Your primary focus is on completing the JavaScript portion of the assignment. Please provide a detailed and complete answer for this question. PLEASE use JavaScript coding and programming ONLY! Do NOT answer in plain old Java/Python/programming language code, or give a few paragraphs on how to use JavaScript , or even UNIX bash or perl script. And especially, DO NOT DUPLICATE THE ATTACHED CODE!!!! I need 100% complete/genuine help and a definitive solution to my problem.

HTML Script: test_scores.html

Use a Test Score array

Name: Score:

CSS Script: styles.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%; }

JavaScript Script: test_scores.js

var names = []; var names = []; var $ = function (id) { return document.getElementById(id); };

var addScore = function () { var name = $("name").value; var score = parseInt( $("score").value ); if (name == "" || isNaN(score) || score 100) { alert("You must enter a name and a valid score"); } else { StudentNames[StudentNames.length] = name; StudentScores[StudentScores.length] = score; $("name").value = ""; $("score").value = ""; } $("scores_display").value = ""; $("name").focus(); }; var displayScores = function() { var scoresDisplay = ""; for (var i = 0; i