"use strict";

/*

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Case Problem 4
1. Use your editor to open the
vw_election_txt.html and
vw_results_txt.js files from the
Author: Pam Carls html10 c case4 folder. Enter your
name and the date in the comment
Date: 2018-03-01 section of each file, and save them as
vw_election.html and vw_results.js
respectively

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.

*/

5. Go to the vw_results.js file in your

editor. Declare a variable named
/* Display the election results title */ reportHTML containing the following
HTML text <h1>title</h1> where title
var reportHTML = "<h1>" + raceTitle + "</h1>"; is the value of the raceTitle variable
stored in the vw_congminn.js file
 6. Create a for loop that loops through the contents of
the race array using i as the counter variable. Place the
commands specified in Steps a through e within this
program for loop:
a. Create a variable named totalVotes that will store
the total votes cast in each race. Set its initial value to
/* Loop through each race in the report */ 0.
b. Calculate the total votes cast in the current race by
for (var i = 0; i < race.length; i++) { applying the forEach() method to i th index of the
votes array using the calcSum() function as the
callback function.
c. Add the following HTML text to the value of the
/* Calculate the total number of votes in each race */ reportHTML variable to write the name of the current
race in the program loop <table>
var totalVotes = 0; <caption>race</caption>
<tr><th>Candidate</th><th>Votes</th></tr> where
votes[i].forEach(calcSum); race is the ith index of the race array.
d. Call the candidateRows() function (you will create
this function shortly) using the counter variable i and
the totalVotes variable as parameter values. Add the
/* Generate the HTML code showing the race name and title row */ value returned by this function to the value of the
reportHTML variable.
reportHTML += "<table>"; e. Add the text </table> to the value of the
reportHTML variable
reportHTML += "<caption>" + race[i] + "</caption>";

reportHTML += "<tr><th>Candidate</th><th>Votes</th></tr>";

8. Next, create the candidateRows() function.

The purpose of this function is to write individual
/* Generate the HTML code for each candidate row */ table rows for each candidate, showing the
candidate's name, party affiliation, vote total,
reportHTML += candidateRows(i, totalVotes); and vote percentage. The candidateRows()
function has two parameters named raceNum
and totalvotes. Place the commands in Steps a
through c within this function.
a. Declare a local variable named TOWHTML that
reportHTML += "</table>"; will contain the HTML code for the table row. Set
7. After the for loop has completed, the initial value of this variable to an empty text
write the value of the reportHTML string.
variable into the innerHTML of the Explore b. Create a for loop in which the counter
} first (and only) section element in the variable j goes from 0 to 2 in steps of 1 unit.
document Within the for loop do the following:
i. Declare a variable named candidateName that
retrieves the name of the current candidate and
the current race. (Hint: Retrieve the candidate
/* Display the report in the first and only section element */ name from the multidimensional candidate array
using the reference, candidate[raceNum][j].)
document.getElementsByTagName("section")[0].innerHTML = reportHTML; ii. Declare a variable named candidateParty that
retrieves the party affiliation of the current
candidate in the current race from the
multidimensional party array.
iii. Declare a variable named candidatevotes that
retrieves the votes cast for the current candidate
in the current race from the multidimensional
/* Function to generate the candidate rows */ votes array.
iv. Declare a variable named candidatePercent
function candidateRows(raceNum, totalVotes) { equal to the value returned by the calcPercent()
function, calculating the percentage of votes
received by the current candidate in the loop.
var rowHTML = ""; Use candidateVotes as the first parameter value
and totalVotes as the second parameter value.
v. Add the following HTML code to the value of
the rowHTML variable <tr> <td>name
/* Loop through three candidates */ (party)</td> <td>votes (percent)</td> </tr>
where name is the value of candidateName,
party is the value of candidateParty, votes is the
for (var j = 0; j <= 2; j++) { 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. c. Return
the value of the rowHTML variable
 9. Save your changes to the file, and
then load vw_election.html in your
browser. Verify that the three
candidate names, party affiliations,
votes, and vote percentages are
shown for each of the eight
/* Votes and Affiliation of the current candidate in the loop */ congressional races

var candidateName = candidate[raceNum][j];

var candidateParty = party[raceNum][j];

var candidateVotes = votes[raceNum][j];

/* Calculate the percent of the vote by each candidate */

var candidatePercent = calcPercent(candidateVotes, totalVotes);

rowHTML += "<tr>";

rowHTML += "<td>" + candidateName + " (" + candidateParty + ") </td>";

rowHTML += "<td>" + candidateVotes.toLocaleString() + "( " + candidatePercent.toFixed(1) +

"%)</td>";

/* Generate a bar chart showing the candidate's vote percentage */

for (var k = 0; k < candidatePercent; k++ ) { 12. Scroll up to the candidateRows()

function. Directly before the line that
rowHTML += createBar(candidateParty); adds the HTML code </tr> to the
value of the rowHTML variable, insert
} a for loop 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
rowHTML += "</tr>"; call the createBar() function using
candidateParty and candidatePercent
} as the parameter values

return rowHTML;

/* 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);
10. 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
/* Function to create a bar chart for different candidate vote percentages */ in your editor. At the bottom of the
file, create a function named
function createBar(partyType) { createBar() with one parameter
named partyType. Add the
/* Write a table cell for each percentage point */ commands described in Steps a
through b to the function:
var barHTML = ""; a. Declare a variable named barHTML
and set its initial value to an empty
switch (partyType) { text string. Explore b. Create a
switch/case statement that tests the
case "D": barHTML="<td class='dem'></td>";break; value of the partyType parameter. If
partyType equal "D" set barHTML
case "R": barHTML="<td class='rep'></td>";break; equal to: <td class='dem'></td> If
partyType equals "R" set barHTML
case "I": barHTML="<td class='ind'></td>";break; equal to: <td class='rep'></td> Finally,
if partyType equals "I" set barHTML
} to: <td class='ind'></td>

return barHTML;
11. 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
13. Add comments throughout the
file with descriptive information
about the variables and functions

14. Save your changes to the file, and

then reload vw_election.html in your
browser. Verify that each election
table shows a bar chart with different
the length of bars representing each
candidate's vote percentage