I need help doing this assignment for HTML

User Generated


Computer Science


You can find all the information in the attached document, i have absolutely no clue where to start. any help will do.

Unformatted Attachment Preview

Setup Enter your name and the date in the comment section of vw_election.htmland vw_results.js. Link JS Files Open the vw_election.html file. Directly above the closing tag, insert script elements to link the page to the vw_congminn.js and vw_results.js files in that order. Defer the loading and running of both script files until after the page has loaded. Election Report Scroll down the file and, directly above the footer, insert an empty sectionelement. You will write the HTML code of the election report in this element. *vw.election.html* VoterWeb Election Results U.S. Congress U.S. Senate State Governors Presidential Timeline Search Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming VoterWeb © 2018 All Rights Reserved JS File Open the vw_congminn.js file and study the contents. Note that the file contains the results of 8 congressional elections in Minnesota. The candidate information is stored in multidimensional arrays named candidate, party, and votes. Do not make any changes to this file. Variables Next, go to the vw_results.js file. Declare a variable named reportHTML containing the following HTML text title where title is the value of the raceTitle variable stored in the vw_congminn.js file. For Loop Create a for loop that loops through the contents of the race array using ias the counter variable. Place the commands specified in the following steps within this program for loop: • Create a variable named totalVotesthat will store the total votes cast in each race. Set its initial value to 0. • Calculate the total votes cast in the current race by applying the forEach() method to i index of the votes array using the calcSum()function as the callback function. • Add the following HTML text to the value of the reportHTML variable to write the name of the current race in the program loop race CandidateVotes where race is the i index of the race array. • Call the candidateRows() function (you will create this function shortly) using the counter variable i and the totalVotes variable as parameter values. Add the value returned by this function to the value of the reportHTML variable. • Add the text to the value of the reportHTML variable. After the for loop has completed, write the value of the reportHTML variable into the innerHTML of the first (and only) section element in the document. *vw.results.js* "use strict"; /* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 10 Case Problem 4 Author: Mary-Kate Deel Date: 10/18/2018 Filename: vw_results.js Functions: The calcSum() function is a callback function used to calculte the total value from items within an array The calcPercent(value, sum) function calculates the percentage given a value and a sum The createBar(partyType, percent) function writes a different table data table based on the candidates party affilication. */ /* Callback Function to calculate an array sum */ function calcSum(value) { totalVotes += value; } /* Function to calculate a percentage */ function calcPercent(value, sum) { return (100*value/sum); } *vw.congminn.js* "use strict"; /* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 10 Case Problem 4 Filename: vw_congminn.js Variables: raceTitle Contains the title to be placed in the election results page race An array of race names candidate A multidimensional array showing the candidate names for each of the races party A multidimensional array showing the party afflilations for each candidate from each race votes A multidimensional array showing the votes for each candidate from each race */ var raceTitle = "Minnesota Congressional Elections"; var race = ["District 1", "District 2", "District 3", "District 4", "District 5", "District 6", "District 7", "District 8"]; var candidate = [ ["Sanchez, Onita", "Troutman, Rachel", "Whitman, Gary"], ["Berk, Thomas", "Chiang, Michael", "Larson, Alicia"], ["Thomas, Howard", "Olsen, Fred", "Shapiro, Douglas"], ["Sweet, Alice", "Grovener, Stewart", "Reardin, Samuel"], ["Aitkens, Mary", "Mundleberg, Linda", "Ketrick, Rachel"], ["Nielsen, Kevin", "Francis, Trevor", "Inglessohn, Ray"], ["Pulaski, Stewart", "Biersen, Nancy", "Pope, Richard"], ["Venn, Michael", "Ramirez, Juan", "Zander, Audry"] ]; var party = [ ["D", "R", "I"], ["D", "R", "I"], ["D", "R", "I"], ["D", "R", "I"], ["D", "R", "I"], ["D", "R", "I"], ["D", "R", "I"], ["D", "R", "I"] ]; var votes = [ [193211, 142164, 22486], [164338, 193587, 42168], [159937, 222335, 23217], [216685, 123703, 21135], [262102, 100744, 27255], [174944, 179240, 11145], [197791, 114151, 15296], [191976, 161831, 4012], ]; JS File Continued Rows Function Next, create the candidateRows()function. The purpose of this function is to write individual table rows for each candidate, showing the candidate’s name, party affiliation, vote total, and vote percentage. The candidateRows()function has two parameters named raceNum and totalVotes. Place the commands in the following steps within this function. • Declare a local variable named rowHTML that will contain the HTML code for the table row. Set the initial value of this variable to an empty text string. • Create a for loop in which the counter variablej goes from 0 to 2 in steps of 1 unit. Within the forloop do the following: o Declare a variable named candidateName that retrieves the name of the current candidate and the current race. (Hint : Retrieve the candidate name from the multidimensional candidate array using the reference, candidate[raceNum][j].) o Declare a variable named candidateParty that retrieves the party affiliation of the current candidate in the current race from the multidimensional party array. o Declare a variable named candidateVotes that retrieves the votes cast for the current candidate in the current race from the multidimensional votes array. o Declare a variable named candidatePercent equal to the value returned by the calcPercent() function, calculating the percentage of votes received by the current candidate in the loop. Use candidateVotes as the first parameter value and totalVotesas the second parameter value. o Add the following HTML code to the value of the rowHTMLvariable name ( party ) votes ( percent ) where name is the value of candidateName, party is the value of candidateParty, votes is the value of candidateVotes, and percent is the value of candidatePercent. Apply the toLocaleString() method to votes in order to display the vote total with a thousands separator. Apply the toFixed(1) method to percent in order to display percentage values to 1 decimal place. • Return the value of the rowHTMLvariable. Open vw_election.html Verify that the three candidate names, party affiliations, votes, and vote percentages are shown for each of the eight congressional races. Bar Chart Function Pam also wants the report to display the vote percentages as bar charts with the length of the bar corresponding to the percentage value. Return to the vw_results.js file. At the bottom of the file create a function named createBar() with one parameter named partyType. Add the commands described in the following steps to the function: • Declare a variable named barHTMLand set its initial value to an empty text string. • Create a switch/case statement that tests the value of the partyTypeparameter. o If partyType equal “D” set barHTML equal to: o If partyType equals “R” set barHTML equal to: o Finally, if partyType equals “I” set barHTML to: • Return the value of barHTML. Next, add these empty data cells to the race results table, with one cell for every percentage point cast for the candidate. Bar Chart Creation Scroll up to the candidateRows()function. Directly before the line that adds the HTML code to the value of the rowHTML variable, insert a forloop with a counter variable k that goes from 0 up to a value less than candidatePercent in increments of 1 unit. Each time through the loop call the createBar() function using candidateParty as the parameter value.
Purchase answer to see full attachment
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer


Super useful! Studypool never disappoints.


Similar Content

Related Tags