Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

I'm new to JavaScript & jQuery and I'm lost. How would I code this? Please follow the instructions carefully and leave comments. Thank you for

I'm new to JavaScript & jQuery and I'm lost. How would I code this? Please follow the instructions carefully and leave comments. Thank you for your help! How would I code the following?:

I need to develop and application that tracks student's scores, tallies the average of the entered scores, and sorts the entered students by last name. The interface looks like this:

image text in transcribed

Student Scores First Name Alan Last Name Tunng Score. 96 Score. se Add Student Score Student Scores Mopper Grace 1 9 Babboge Charlest95 Lovelace Ads: 97 Average score 967 Clesr Stulent Score Sot By Last Name

Student Scores First Name Alan Last Name Tunng Score. 96 Score. se Add Student Score Student Scores Mopper Grace 1 9 Babboge Charlest95 Lovelace Ads: 97 Average score 967 Clesr Stulent Score Sot By Last Name

*** 1- I have the starter files code below the following instructions for a template to start. ***

2- In the JavaScript file, note that the ready event handlers 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. Notcie 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.

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

4- 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 arrayand displays them in the text area.

5- 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 uploaded data.

6- Add code to the Add Student Score button to validate the user's input. If either name is blank or if the score isn't a number display an error message in an alert box and DON'T add the information to the arrays.

8- 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. Use the built-in sort function for an alphanumeric sort.

* Below, is code of the starter files, an index.html, scores.css, and scores.js : *

index.html:

Student Scores

Student Scores

Student Scores

***************************************************************************************

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; }

****************************************************************************

scores.js:

"use strict"; var $ = function(id) { return document.getElementById(id); };

window.onload = function() {

var displayScores = function() { var out = "test"; var avg = -1; $("scores").value = out; $("average_score").value = avg; };

$("add_button").onclick = function() {

// get the add form ready for next entry $("first_name").value = ""; $("last_name").value = ""; $("score").value = ""; $("first_name").focus(); } ; // end onclick

$("clear_button").onclick = function() {

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

$("first_name").focus(); } ; // end onclick

$("sort_button").onclick = function() {

} ; // end onclick

$("first_name").focus(); };

Student Scores First Name Alan Last Name Tunng Score. 96 Score. se Add Student Score Student Scores Mopper Grace 1 9 Babboge Charlest95 Lovelace Ads: 97 Average score 967 Clesr Stulent Score Sot By Last Name Student Scores First Name Alan Last Name Tunng Score. 96 Score. se Add Student Score Student Scores Mopper Grace 1 9 Babboge Charlest95 Lovelace Ads: 97 Average score 967 Clesr Stulent Score Sot By Last Name

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Murach's SQL Server 2012 For Developers

Authors: Bryan Syverson, Joel Murach, Mike Murach

1st Edition

1890774693, 9781890774691

More Books

Students also viewed these Databases questions