New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 12 Case 2 The VoterWeb

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 12 Case 2 The VoterWeb

VoterWeb is an online source for election news and results from national. state, and local races. Faye Summerall is one manager of the Web site development team. Faye wants to add horizontal bar charts to Web pages displaying election results. The length of each bar should correspond to the percentage of votes that a candidate receives in a given race. She has asked you to develop a JavaScript program that automatically writes the bar chat. Figure 12-37 shows a preview of the Web page for a series of Congressional races.

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 background 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, thename2 array contains the candidate names for the second race, and so on through the name5array. The party affiliations for the candidates in the first race have been stored in theparty1 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 datein 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 theelection.htmfile in your text editor, and then add two script elements to the head section of the file pointing to thebarchart.js and votes.jsfiles. Save your changes to the document.

3. Go to the barchart.jsfile in your text editor. Insert a function namedtotalvotes(). 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 calculate 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 function 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 election, 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>
If partyType equals G, barText should equal the following: <td class=’green’> </td> Finally, if partyType equals L, barText should equal the following: <td class=’lib’> </td> Be sure to add a break statement after each case statement so browsers do not attempt to test additional cases after finding a match.
b. Create a for loop in which the counter variable goes from 1 up through the value of the percent parameter in increments of 1. At each iteration, write the value of the barText variable to the Web document.

6. Insert a function named showresults(). The purpose of this function is to show the results of a particular race. The function has four parameters: race, name, party, and votes. The race parameter will contain the name of the race. The name parameter will contain the array of candidate names. The party parameter will contain the array of party affiliations. Finally, thevotes parameter will contain the array of votes for each candidate in the race. Add the following commands to the function:
a. Declare a variable named totalv equal to the value returned by the totalVotes() function using votes as the parameter value.
b. Write the HTML code <h2>race</h2> <table> <tr> <th>Candidate</th> <th class=’num’>Votes</th> <th class=’num’>%</th> </tr> to the document, where race is the value of the race parameter.

7. Next, within the showResults() function, add a for loop in which the counter variable starts at 0 and, while the counter is less than the length of the name array, increase the counter in increments of 1. At each iteration of the for loop, run the commands outlined in the following five steps:
a. Write the HTML code <tr> <td>name (party)</td> <td class=’num’>votes</td> where name, party, and votes are the entries in the name, party, and votes arrays, respectively, for the index indicated by the counter variable.
b. Create a variable named percent equal to the value returned by the calcPercent() function. Use the current value from the votes array for the value of the item parameter, and use the value from totalV for the value of the sum parameter.
c. Write the HTML code <td class=’num’>(percent%)</td> where percent is the value of the percent variable.
d. Call the createBar() function using the current value of the party array and percent as the parameter values.
e. Write a closing </tr> tag to the document.

8. After the for loop has completed within the showResults() function, write a closing </table> tag to the document.

9. Write comments throughout your code to document your work.

10. Save your changes to the file, and then return to theelection.htmfile in your text editor. Scroll down the document. After the Congressional Races h1 heading, insert a script element containing the following commands:
a. Call the showresults() function using race[0], name1, party1, and votes1 as the parameter values.
b. Repeat the previous command for the remaining four races, using race[1] through race[4] as the parameter values for the race parameter, party2 through party5 for the party parameter, name2 through name5 for the name parameter, and votes2 through votes5 for the votes parameter.

11. Save your changes to the file, and then openelection.htm in your Web browser. Verify that the correct percentage appears for each candidate, and that a horizontal bar chart representing the percent value is displayed next to each candidate.

12. Submit your completed Web site to your instructor, in either printed or electronic form, as requested.