HTML and CSS Reference
In-Depth Information
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
function.
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>
