VoterWeb VoterWeb is an online source for election news and results from nationa

ID: 3744094 • Letter: V

Question

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 the Web pages displaying election

results. The length of each bar should correspond to the percentage of votes that a can-

didate receives in a given race. She has asked you to develop a JavaScript program that

automatically writes the bar chart. 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 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, 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.

o 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 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:

If partyType equals R, barText should equal the following:

If partyType equals I, barText should equal the following:

<table>

<tr>

<th>Candidate</th>

<th class='num'>Votes</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 vari-

able 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

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.

Explanation / Answer

election.htm

<!DOCTYPE html>
<html>

<head>

</head>

   <body>
      <nav>
         <img src="logo.jpg" alt="Election Day Results" />
         <ul>
            <li><a href="#">Election Home Page</a></li>
            <li><a href="#">President</a></li>
            <li><a href="#">Senate Races</a></li>
            <li><a href="#">Congressional Races</a></li>
            <li><a href="#">State Senate</a></li>
            <li><a href="#">State House</a></li>
            <li><a href="#">Local Races</a></li>
            <li><a href="#">Judicial</a></li>
            <li><a href="#">Referendums</a></li>
         </ul>
      </nav>

<article>
<h1>Congressional Races</h1>

</article>

</body>

</html>

barchart.js

      function totalVotes(votes) {
         var total=0;
         /* Add up the total number of votes */
         for (var i=0; i<votes.length; i++) total+=votes[i];
         return total;
      }

      function calcPercent(item, sum) {
         /* Return the percent value rounded to the nearest integer */
         return Math.round(100*item/sum);
      }

      function createBar(partyType, percent) {
         /* Write a table cell for each candidate */
         switch (partyType) {
            case "D": barText="<td class='dem'> </td>";break;
            case "R": barText="<td class='rep'> </td>";break;
            case "I": barText="<td class='ind'> </td>";break;
            case "G": barText="<td class='green'> </td>";break;
            case "L": barText="<td class='lib'> </td>";break;
         }

for (var j=1; j <= percent; j++) document.write(barText);
}

      function showResults(race, name, party, votes) {
         /* Calculate the total number of votes */
         var totalV=totalVotes(votes);

/* Write the heading */
document.write("<h2>"+race+"</h2>");

         /* Write the vote table */
         document.write("<table>");
         document.write("<tr><th>Candidate</th><th class='num'>Votes</th><th class='num'>%</th></tr>");
         for (var i=0; i < name.length; i++) {
            document.write("<tr>");
            document.write("<td>"+name[i]+" ("+party[i]+")</td>");
            document.write("<td class='num'>"+votes[i]+"</td>");

var percent = calcPercent(votes[i],totalV);
document.write("<td class='num'>("+percent+"%)</td>");

/* Create a bar chart for each vote total */
createBar(party[i], percent);

document.write("</tr>");
}

         document.write("</table>");
      }


results.css

/* Default Styles */

* {
   list-style: none;
   margin: 0px;
   padding: 0px;
}

header, figure, footer, article, nav, section {
display: block;
}

body {
background: white url(back.jpg) top left repeat-y;
font-family: Verdana, Geneva, sans-serif;
}

nav {
float: left;
width: 200px;
}

nav ul {
margin-left: 15px;
}

nav ul li {
   line-height: 35px;
   height: 35px;
   margin: 5px 0px;
}

nav ul li a {
   color: black;
   font-size: 0.9em;
   text-decoration: none;
}

nav ul li a:hover {
text-decoration: underline;
}

article {
float: left;
margin: 20px 0px 0px 20px;
}

article h1 {
   font-size: 22px;
   letter-spacing: 5px;
   margin: 0px;
}

article h2 {
   font-size: 14px;
   margin-top: 12px;
   margin-bottom: 0px;
}

article table {
   font-size: 10px;
   margin-top: 0px;
   border-collapse: collapse;
}

article th {
   width: 170px;
   text-align: left;
   border-bottom: 1px solid black;
}

article td {
margin: 0px;
}

article .num {
   text-align: right;
   width: 50px;
   padding-right: 5px;
}

article .dem {
background-color: rgb(174,224,250);
width: 2px;
}

article .rep {
background-color: red;
width: 2px;
}

article .ind {
background-color: rgb(255,192,255);
width: 2px;
}

article .green {
background-color: rgb(128,255,128);
width: 2px;
}

article .lib {
background-color: cyan;
width: 2px;
}

votes.js

var race = new Array();

var name1 = new Array();
var name2 = new Array();
var name3 = new Array();
var name4 = new Array();
var name5 = new Array();

var party1 = new Array();
var party2 = new Array();
var party3 = new Array();
var party4 = new Array();
var party5 = new Array();

var votes1 = new Array();
var votes2 = new Array();
var votes3 = new Array();
var votes4 = new Array();
var votes5 = new Array();

race[0]="1st Congressional District";
race[1]="2nd Congressional District";
race[2]="3rd Congressional District";
race[3]="4th Congressional District";
race[4]="5th Congressional District";

name1[0]="Sarah Carlson";
party1[0]="D";
votes1[0]=45125;
name1[1]="Pete deJesus";
party1[1]="R";
votes1[1]=44498;
name1[2]="Alan Tompkins";
party1[2]="I";
votes1[2]=5143;

name2[0]="Gary Griffin";
party2[0]="D";
votes2[0]=69505;
name2[1]="Frank Brown";
party2[1]="R";
votes2[1]=78133;
name2[2]="Roland Washington";
party2[2]="G";
votes2[2]=8109;
name2[3]="Karen Reese";
party2[3]="L";
votes2[3]=13004;

name3[0]="Anne Sanchez";
party3[0]="D";
votes3[0]=65203;
name3[1]="Cynthia Thomas";
party3[1]="R";
votes3[1]=51289;

name4[0]="Jerry Wilkes";
party4[0]="D";
votes4[0]=49201;
name4[1]="Barry Mitchell";
party4[1]="R";
votes4[1]=58414;
name4[2]="Paula Welton";
party4[2]="I";
votes4[2]=3901;

name5[0]="Pete Grimbold";
party5[0]="D";
votes5[0]=42105;
name5[1]="Carol Ives";
party5[1]="R";
votes5[1]=43349;
name5[2]="Michael Dorn";
party5[2]="G";
votes5[2]=1401;

Navigate

Vote for me!! say all political candidates. But what combination of policies wou

Voters Poll. A polling agency wants to determine the size of a random sample nee

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

VoterWeb VoterWeb is an online source for election news and results from nationa

Question

Explanation / Answer

Related Questions

Navigate