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*

• 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

*vw_results.js*

"use strict";

/*

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Case Problem 4

Author:

Date:

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

}

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

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

race

Candidate	Votes

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.