Overview In this assignment, you will gain experience in modifying the Document Object Model (DOM) and...
Fantastic news! We've Found the answer you've been seeking!
Question:
Transcribed Image Text:
Overview In this assignment, you will gain experience in modifying the Document Object Model (DOM) and adding new nodes to existing DOM nodes. The user will be prompted to enter their name and three scores using form elements. Your application will use JavaScript to store all the entered data within a Score object. The Score object will be passed to a function, which will add all the attributes of the Score object in the form of columns to an existing table. You will also store the Score objects within an array, so that you can loop through the elements and calculate an average of all scores. Instructions 1. Download the template Zip file and extract it. 1.1. Rename the folder for the assignment. Name the folder asuriteE10, replacing asurite with your own asurite ID, e.g. jsmithE10 2. Setup the files 2.1. Add your name, assignment #, class, and class time as a comment at the top of the both HTML, CSS, and the JavaScript files. e.g., John Smith, E10, CIS 235,9 am Work on the HTML file 1. Edit the HTML file. 1.1. Add a Table to the HTML file with an id outputTable. 1.2. Add table header (th) elements corresponding to the four input elements. Work on the CSS file 2. Add a ruleset for the table in the HTML file. Set the visibility property to hidden. Work on the JavaScript file 3. Declare a global variable called scores, which will hold score objects. 4. Implement the event handler for the button Function Name: addScore Parameters: none Return value: none Purpose: This is the event handler for the button The following parts are the body of the process method. 4.1. Declare variables for the values from the four input elements within the HTML file. Name the variables name, score1, score2 and score3. Make sure you extract the value from the input elements from the HTML page and store them in your variables. 4.2. Create a new object called newScore. Within the object store name-value pairs of data. Create attributes name, num1, num2, num3 within the object and associate with them the appropriate values from variables declared earlier. You should use the 'object literals' method here. ATTENTION: be mindful that you have two sets of score variables: score[1-3] and num[1-3] within the score object. Use the correct set as needed and don't confuse the two 4.3. Add the newScore to the scores array. 4.4. Call the addTableRow function and pass it the newScore object. You will write the function next. 5. Implement a function to add data for one score as a row to a table. Function Name: addTableRow Parameters: scoreObject Return value: none Purpose: This function should accept a score object. For each attribute of the object, it should create a new table data element and store in it the value for the attribute. It should then add each of the data cells to a new table row, which will be added to the existing table in the HTML file. Finally, it will invoke the function to calculate the average for all the scores and display the average within the paragraph element in the HTML file. 5.1. Declare a variable named existingTable and assign to it a reference to the table from the HTML page. 5.2. Create a new table row (tr) element using the document object. Use the createElement method of the document object to do so. Store the reference returned by the method in a newly declared variable named newRow. 5.3. For each of the FOUR values in scoreObject, do the following to create columns with values. 5.3.1 Create a new table data (td) element using the document object. Use the createElement method of the document object to do so. Store the reference returned by the method in a newly declared variable named newCo1#, replacing # with a number for each new column. 5.3.2 Assign the corresponding attribute from the scoreobject received as a parameter to the textContent property of the column variable declared in the previous step. 5.4. Add all the FOUR td elements (named newColl, newCol2...) as new child nodes to newRow declared earlier. Use the appendChild method. 5.5. Add the newRow element as a new child node to the existing Table variable, which is the node storing the table. Notice the sequence: td nodes were added to tr nodes, which were added to the table node. This creates the full table tree. 5.6. Set the visibility of the existingTable to "visible". Use the style object of the existingTable node to access the visibility attribute. 5.7. Update the Average 5.7.1 Call the updateAverage () method and store its return value in a new variable named average. You will write the method soon! 5.7.2 Declare a new variable average Paragraph and assign to it the reference to the averageParagraph element from the HTML file. 5.7.3 Set the innerHTML of the average Paragraph node to display the average. Look at the sample screenshot for reference. 6 Implement a function to calculate the average of all scores. Function Name: updateAverage Parameters: none Return value: one float Purpose: This function should loop through all the score objects and calculate the grand average for all scores. Be mindful that Each score object has three scores. 6.1 Declare variables to store total and number of scores. 60 6.2 Use a for loop to loop through the scores array. 6.3 Within the body of the for loop, keep a running total of all the scores within the scores object. Also keep a running total of the number of scores. Be mindful that each score object has three scores in it. If your numbers don't get added properly, use the parseFloat function of the Number class in case your values are stored as strings. 6.4 Calculate the grand average of all scores. 6.5 Return the grand average of all scores. 7 Test your Program 7.1 Run the page within Chrome. 7.2 Type in a name and three scores and press the button. 7.3 If your program works, you should see the table at the bottom become visible and it should contain the data you just entered. A paragraph at the bottom should show the updated grand average of all scores. Sample Output Before Pressing Button Name: John Score 1: 8.5 Score 2: 9 Score 3: 10.5 Add score After adding 2 sets of scores: Name: Peter Score 1: 5 Score 2: 6 Score 3: 7 Add score Name Score 1 Score 2 Score 3 10.5 7 John 8.5 9 Peter 5 6 Overall Average is 7.666666666666667 2 Overview In this assignment, you will gain experience in modifying the Document Object Model (DOM) and adding new nodes to existing DOM nodes. The user will be prompted to enter their name and three scores using form elements. Your application will use JavaScript to store all the entered data within a Score object. The Score object will be passed to a function, which will add all the attributes of the Score object in the form of columns to an existing table. You will also store the Score objects within an array, so that you can loop through the elements and calculate an average of all scores. Instructions 1. Download the template Zip file and extract it. 1.1. Rename the folder for the assignment. Name the folder asuriteE10, replacing asurite with your own asurite ID, e.g. jsmithE10 2. Setup the files 2.1. Add your name, assignment #, class, and class time as a comment at the top of the both HTML, CSS, and the JavaScript files. e.g., John Smith, E10, CIS 235,9 am Work on the HTML file 1. Edit the HTML file. 1.1. Add a Table to the HTML file with an id outputTable. 1.2. Add table header (th) elements corresponding to the four input elements. Work on the CSS file 2. Add a ruleset for the table in the HTML file. Set the visibility property to hidden. Work on the JavaScript file 3. Declare a global variable called scores, which will hold score objects. 4. Implement the event handler for the button Function Name: addScore Parameters: none Return value: none Purpose: This is the event handler for the button The following parts are the body of the process method. 4.1. Declare variables for the values from the four input elements within the HTML file. Name the variables name, score1, score2 and score3. Make sure you extract the value from the input elements from the HTML page and store them in your variables. 4.2. Create a new object called newScore. Within the object store name-value pairs of data. Create attributes name, num1, num2, num3 within the object and associate with them the appropriate values from variables declared earlier. You should use the 'object literals' method here. ATTENTION: be mindful that you have two sets of score variables: score[1-3] and num[1-3] within the score object. Use the correct set as needed and don't confuse the two 4.3. Add the newScore to the scores array. 4.4. Call the addTableRow function and pass it the newScore object. You will write the function next. 5. Implement a function to add data for one score as a row to a table. Function Name: addTableRow Parameters: scoreObject Return value: none Purpose: This function should accept a score object. For each attribute of the object, it should create a new table data element and store in it the value for the attribute. It should then add each of the data cells to a new table row, which will be added to the existing table in the HTML file. Finally, it will invoke the function to calculate the average for all the scores and display the average within the paragraph element in the HTML file. 5.1. Declare a variable named existingTable and assign to it a reference to the table from the HTML page. 5.2. Create a new table row (tr) element using the document object. Use the createElement method of the document object to do so. Store the reference returned by the method in a newly declared variable named newRow. 5.3. For each of the FOUR values in scoreObject, do the following to create columns with values. 5.3.1 Create a new table data (td) element using the document object. Use the createElement method of the document object to do so. Store the reference returned by the method in a newly declared variable named newCo1#, replacing # with a number for each new column. 5.3.2 Assign the corresponding attribute from the scoreobject received as a parameter to the textContent property of the column variable declared in the previous step. 5.4. Add all the FOUR td elements (named newColl, newCol2...) as new child nodes to newRow declared earlier. Use the appendChild method. 5.5. Add the newRow element as a new child node to the existing Table variable, which is the node storing the table. Notice the sequence: td nodes were added to tr nodes, which were added to the table node. This creates the full table tree. 5.6. Set the visibility of the existingTable to "visible". Use the style object of the existingTable node to access the visibility attribute. 5.7. Update the Average 5.7.1 Call the updateAverage () method and store its return value in a new variable named average. You will write the method soon! 5.7.2 Declare a new variable average Paragraph and assign to it the reference to the averageParagraph element from the HTML file. 5.7.3 Set the innerHTML of the average Paragraph node to display the average. Look at the sample screenshot for reference. 6 Implement a function to calculate the average of all scores. Function Name: updateAverage Parameters: none Return value: one float Purpose: This function should loop through all the score objects and calculate the grand average for all scores. Be mindful that Each score object has three scores. 6.1 Declare variables to store total and number of scores. 60 6.2 Use a for loop to loop through the scores array. 6.3 Within the body of the for loop, keep a running total of all the scores within the scores object. Also keep a running total of the number of scores. Be mindful that each score object has three scores in it. If your numbers don't get added properly, use the parseFloat function of the Number class in case your values are stored as strings. 6.4 Calculate the grand average of all scores. 6.5 Return the grand average of all scores. 7 Test your Program 7.1 Run the page within Chrome. 7.2 Type in a name and three scores and press the button. 7.3 If your program works, you should see the table at the bottom become visible and it should contain the data you just entered. A paragraph at the bottom should show the updated grand average of all scores. Sample Output Before Pressing Button Name: John Score 1: 8.5 Score 2: 9 Score 3: 10.5 Add score After adding 2 sets of scores: Name: Peter Score 1: 5 Score 2: 6 Score 3: 7 Add score Name Score 1 Score 2 Score 3 10.5 7 John 8.5 9 Peter 5 6 Overall Average is 7.666666666666667 2
Expert Answer:
Answer rating: 100% (QA)
Lets break down the problem and address each part step by step HTML File Add a table with an id outputTable Add table header elements th for the four ... View the full answer
Related Book For
International Marketing And Export Management
ISBN: 9781292016924
8th Edition
Authors: Gerald Albaum , Alexander Josiassen , Edwin Duerr
Posted Date:
Students also viewed these programming questions
-
Let A, B be sets. Define: (a) the Cartesian product (A B) (b) the set of relations R between A and B (c) the identity relation A on the set A [3 marks] Suppose S, T are relations between A and B, and...
-
For the Kelvin state as considered in Example 15.4, explicitly justify the displacement and stress results given in relations (15.2.8) and (15.2.10). Data from example 15.4 Equation 15.2.8 Equation...
-
The data set has size 40. Approximately how many observations lie within two standard deviations to either side of the mean? The quantitative data set under consideration has roughly a bell-shaped...
-
How can you join two different networks together so every computer can see every other computer when both locations have their own T1 internet connections? Please include reference.
-
Water at \(20{ }^{\circ} \mathrm{C}\) flows through a concentric annulus of inner diameter \(D_{1}=2.0 \mathrm{~cm}\) and outer diameter \(D_{2}=4.0 \mathrm{~cm}\). The surface roughness is \(0.002...
-
At the beginning of September, Selena Cantu started Cantu Wealth Management Consulting, a firm that offers financial planning and advice about investing and managing money. On September 30, the...
-
Explain Archimedes' principle in detail. A sea water float consists of a cylinder and cone combined as shown here below. The density of sea water is 1026 kg/m 3 and g = 9.81 m/s 2 D H h
-
You are meeting with a client and they tell you data observability is not a priority right now. You ask them if they are scaling their data platform, and they say yes. What question should you follow...
-
In 2021, the Bullish Company reported pretax accounting income of $100,000. The following items cause taxable income to be different than accounting income: 1. Warranty expense accrued for financial...
-
A space-filling curve is a continuous curve in the unit square that passes through every point. Write a recursive Turt le client that produces these recursive patterns, which approach a space-filling...
-
Implement a class RandomBody that initializes its instance variables with (carefully chosen) random values instead of using a constructor and a client RandomUniverse that takes a single command-line...
-
Write a recursive Turtle client that produces these recursive patterns. 1 2 3 4
-
Develop an implementation of your Rectangle API from EXERCISE 3.2.1 that takes advantage of the Interval data type to simplify and clarify the code. Data From in Exercise 3.2.1 Consider the following...
-
A strange function. Consider McCarthys 91 function: public static int mcCarthy(int n) { if (n > 100) return n - 10; return mcCarthy(mcCarthy(n+11)); } Determine the value of mcCarthy(50) without...
-
A 3-ph alternator is working at no load with a terminal voltage of 400 Volts. Suddenly, its voltage drops to 380 V after applying load at its terminals. What kind of load it would have been and why...
-
Evaluate the line integral, where C is the given curve. C x 2 dx + y 2 dy, C consists of the arc of the circle x 2 + y 2 = 4 from (2, 0) to (0, 2) followed by the line segment from (0, 2) to (4, 3)
-
Can an exporter realistically follow the strategy of product phasing when replacing a product in the product line being exported to a foreign market? Explain.
-
Discuss what you consider to be the ideal approach for establishing an export transfer price.
-
Under what conditions might an exporter prefer to use INCOTERMS for a price quotation and under what conditions might this exporter prefer to use Revised American Foreign Trade Definitions 1941?...
-
Establish the result in Example 41 concerning the difference of two independent normal random variables, \(X\) and \(Y\). Data From Example 41 EXAMPLE 41 Sum of two independent normal random...
-
Let \(X\) be a continuous random variable having probability density function \[f(x)= \begin{cases}2 e^{-2 x} & \text { for } x>0 \\ 0 & \text { elsewhere }\end{cases}\] (a) Find the moment...
-
Let \(X\) and \(Y\) be independent normal random variables with \[\begin{array}{lll}E(X)=4 & \text { and } & \sigma_{X}^{2}=25 \\E(Y)=3 & \text { and } & \sigma_{Y}^{2}=16\end{array}\] (a) Use moment...
Study smarter with the SolutionInn App