I need help with this javascript exercise, please. Thank youUse a Test Score arrayIn this exercise, you’ll work with an array and you’ll add nodes to the DOM to display the Results and the Scores. The interface after clicking the Display Results and Display Scores buttons should look like this: (attached in the images)HTML FILE:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test Score Array</title> <link rel="stylesheet" href="test_scores.css" /></head><body> <main> <h1>Use a Test Score array</h1> <div> <label for="name">Name:</label> <input type="text" id="name"> <span></span> </div> <div> <label for="score">Score:</label> <input type="text" id="score"> <span></span> </div> <div> <label></label> <input type="button" id="add" value="Add to Array"> <input type="button" id="display_results" value="Display Results"> <input type="button" id="display_scores" value="Display Scores"> </div> <div id="results"></div> <div id="scores"></div> </main> <script src="test_scores.js"></script></body></html>JAVASCRIPT FILE: "use strict";const $ = selector => document.querySelector(selector);const names = ["Ben", "Joel", "Judy", "Anne"];const scores = [88, 98, 77, 88];document.addEventListener("DOMContentLoaded", () => { // add event handlers $("#add").addEventListener("click", addScore); $("#display_results").addEventListener("click", displayResults); $("#display_scores").addEventListener("click", displayScores);}); Assignment instruction:Then, run the application to see the user interface shown above, although that interface won’t do anything until you develop the JavaScript for it.At the start of the JavaScript file, you’ll see the declarations for two arrays: one for names and one for scores, and each array contains four elements. You’ll also see the code for the $() function as well as a DOMContentLoaded event handler that attaches three functions named addScore(), displayResults(), and displayScores() to the click events of the buttons.Write the displayResults() function. It should derive the average score and the highest score from the arrays and then display the results in the div element with “results” as its id as shown above. To display the results, add nodes to the DOM with the heading as an h2 element and the average and highest scores as <p> elements. If those nodes already exist, you’ll need to replace them.Write the displayScores() function. It should get the names and scores from the arrays and display them in the div element with “scores” as its id, as shown above. To display the results, add nodes to the DOM with the name and score as label elements, and a break element (<br>) to go to a new line. Before adding these nodes, you can clear any previous nodes by setting the text content of the div to an empty string.Write the addScore() function. It should add a name and score to the two arrays. To test whether this works, you can click the Display Scores button and see if the new name and score have been added to the table.If you haven’t already done it, add data validation to addScore() function. 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, display messages in the span elements after the input elements, as shown above.Make sure that your application moves the cursor to the Name field when the application starts and after a name and score have been added to the array. Pageof 2ZOOM1.Use a Test Score arrayName: MaryScore. 94Add to ArrayDisplay ResultsDisplay ScoresResultsAverage score 90High score Mike with a score of 99ScoresBen8.JudyAnneMikehe user enters invalid data as described below it should look like this:Use a Test Score arrayNamelPlease onter anameScoreAdd to ArrayDsplay RosultsDsplay Scores

scores.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

I need help with this javascript exercise, please. Thank you

Use a Test Score array

In this exercise, you’ll work with an array and you’ll add nodes to the DOM to display the Results and the Scores. The interface after clicking the Display Results and Display Scores buttons should look like this: (attached in the images)

HTML FILE:

<!DOCTYPE html>

<html>

<head>

<title>Test Score Array</title>

</head>

<body>

<main>

<h1>Use a Test Score array</h1>

<div>

</div>

<div>

<label for="score">Score:</label>

</div>

<div>

</div>

</main>

</body>

</html>

JAVASCRIPT FILE:

"use strict";

const $ = selector => document.querySelector(selector);

const names = ["Ben", "Joel", "Judy", "Anne"];

const scores = [88, 98, 77, 88];

document.addEventListener("DOMContentLoaded", () => {

// add event handlers

$("#add").addEventListener("click", addScore);

$("#display_results").addEventListener("click", displayResults);

$("#display_scores").addEventListener("click", displayScores);

});

Assignment instruction:

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

At the start of the JavaScript file, you’ll see the declarations for two arrays: one for names and one for scores, and each array contains four elements. You’ll also see the code for the $() function as well as a DOMContentLoaded event handler that attaches three functions named addScore(), displayResults(), and displayScores() to the click events of the buttons.
Write the displayResults() function. It should derive the average score and the highest score from the arrays and then display the results in the div element with “results” as its id as shown above. To display the results, add nodes to the DOM with the heading as an h2 element and the average and highest scores as <p> elements. If those nodes already exist, you’ll need to replace them.
Write the displayScores() function. It should get the names and scores from the arrays and display them in the div element with “scores” as its id, as shown above. To display the results, add nodes to the DOM with the name and score as label elements, and a break element (<br>) to go to a new line. Before adding these nodes, you can clear any previous nodes by setting the text content of the div to an empty string.
Write the addScore() function. It should add a name and score to the two arrays. To test whether this works, you can click the Display Scores button and see if the new name and score have been added to the table.
If you haven’t already done it, add data validation to addScore() function. 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, display messages in the span elements after the input elements, as shown above.
Make sure that your application moves the cursor to the Name field when the application starts and after a name and score have been added to the array.

Page
of 2
ZOOM
1.
Use a Test Score array
Name: Mary
Score. 94
Add to Array
Display Results
Display Scores
Results
Average score 90
High score Mike with a score of 99
Scores
Ben
8.
Judy
Anne
Mike
he user enters invalid data as described below it should look like this:
Use a Test Score array
Namel
Please onter aname
Score
Add to Array
Dsplay Rosults
Dsplay Scores

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here