jQuery, JS, Ajax

Develop a Student Scores application that tracks students scores, tallies the average of the entered scores, and sorts the students by last name.

1. In the JavaScript file, note that the ready event handler contains the start of a displayScores() function and starts of the handlers for the click events of the Add Student Score, Clear Student Scores, and Sort By last Name buttons. Notice that the handler for the Add Student Score button ends by clearing the add form and setting the focus on its first field. Also, the handler for the Clear Student Scores button ends by clearing the display area and setting the focus on the first name field.

2. Code two arrays outside of these functions, one for score values and the other for strings that display the students names and scores.

3. In the displayScores() function, add the code that calculates the average score of all the scores in the first array and displays it in the text box below the text area. Then, add the code that gets the students names and scores in the second array and displays them in the text area.

4. In the click event handler for the Add Student Score button, use the push() method to save the score in the first array and to save the name and score string (as shown in the text area) in the second array. Then, call the displayScores() function to redisplay the updated data.

5. In the click event handler for the Clear Student Scores button, add code that clears both arrays.

6. In the click event handler for the Sort By Last Name button, add code that sorts the students by last name and then re-displays the score information.

***************codes*******************

scores.js

"use strict"; $(document).ready(function() { var displayScores = function () { }; $("#add_button").click(function() { // get the add form ready for next entry $("#first_name").val( "" ); $("#last_name").val( "" ); $("#score").val( "" ); $("#first_name").focus(); }); // end click() $("#clear_button").click(function() {

// remove the score data from the web page $("#average_score").val( "" ); $("#scores").val( "" );

$("#first_name").focus(); }); // end click() $("#sort_button").click(function() {

}); // end click() $("#first_name").focus(); }); // end ready()

scores.css

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 600px; border: 3px solid blue; padding: 10px 20px; } h1, h2 { color: blue; } h2 { border-bottom: 2px solid black; } label { float: left; width: 11em; text-align: right; padding-bottom: .5em; } input { margin-left: 1em; margin-bottom: .5em; }

index.html

Student Scores

First Name:

Last Name:

Score:

Student Scores

Average score: