HTML and CSS Reference
The horizontal bar charts will be created within table rows. The length of each bar will
be determined by the number of blank table cells it contains. For example, to display a
horizontal bar representing 45% of the vote, you'll write 45 blank table cells. The color
of each bar is determined by the background color of its table cells. To apply the back-
ground color, you'll add class attributes to the blank table cells. A style rule in the results.
css style sheet will determine the background color for each class of table cells.
The data for each election has been stored in arrays in an external file named
votes.js . The file includes data from five elections for different Congressional seats. The
names of the races have been stored in an array named race . The name1 array contains
the candidate names for the first race, the name2 array contains the candidate names
for the second race, and so on through the name5 array. The party affiliations for the
candidates in the first race have been stored in the party1 array, for the second race in
the party2 array, and so forth. The votes1 through votes5 arrays store the votes for each
candidate in each of the five races.
Complete the following:
1. Using your text editor, open electtxt.htm and bartxt.js from the tutorial.12\case2
folder, enter your name and the date in the head section, and then save the files as
election.htm and barchart.js , respectively.
2. Open the votes.js ile from the tutorial.12\case2 folder in your text editor, study the
file to become familiar with the different arrays and their contents, and then close
the file. Return to the election.htm file in your text editor, and then add two script
elements to the head section of the file pointing to the barchart.js and votes.js files.
Save your changes to the document.
3. Go to the barchart.js file in your text editor. Insert a function named totalvotes() . The
purpose of this function is to calculate the sum of all the values within an array. The
function has a single parameter, votes , representing one of the five vote arrays ( vote1
through vote5 ). Add the following commands to the function:
a. Declare a variable named total , setting its initial value to 0.
b. Create a for loop that loops through each of the items in the votes array, adding
that item's value to the total variable.
c. After the for loop is completed, return the value of the total variable from the
4. Insert another function named calcPercent() . The purpose of this function is to calcu-
late a percentage, rounded to the nearest integer. The function has two parameters:
item and sum . Have the function return the value of the item parameter divided
by sum , multiplied by 100, and then rounded to the nearest integer. (Hint: Use the
Math.round() method to round the calculated percentage.)
5. Insert a function named createbar() . The purpose of this function is to write the
blank table cells that make up each horizontal bar in the election results. The func-
tion has two parameters: partytype and percent . The partyType parameter will be
used to store the party affiliation of the candidate ( D , R , I , G , or L ). The percent
parameter will be used to store the percentage the candidate received in the elec-
tion, rounded to the nearest integer. Add the following commands to the function:
a. Create a switch statement that tests the value of the partyType parameter. If
partyType equals D , store the following text string in a variable named bartext :
<td class='dem'> </td>
If partyType equals R , barText should equal the following:
<td class='rep'> </td>
If partyType equals I , barText should equal the following:
<td class='ind'> </td>