[NEW SOLN] CSIS 310 MINDTAP VOTER WEB

[SOLVED] CSIS 310 MINDTAP VOTER WEB: VoterWeb Pam Carls is a manager for the website Voter Web, which compiles voting totals and statistics from local and national elections. Pam has the results of recent congressional elections from eight districts in Minnesota stored as multidimensional arrays in a JavaScript file. Pam wants you to create a script displaying these results and calculating the vote percentage for each candidate within each race.

[SOLVED] CSIS 310 MINDTAP VOTER WEB: A preview of the home page is shown above.

The style sheets and graphic files have already been created for you. Your job is to write the HTML markup.

[SOLVED] CSIS 310 MINDTAP VOTER WEB: Instructions

This Review Assignment contains interactive instructions that you can complete to ensure you’ve completed the instruction correctly.

After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.

After you’ve completed an instruction, click the corresponding check box in your list of instructions. This will trigger simulated tests of your website to ensure that you successfully completed the instruction.

[SOLVED] CSIS 310 MINDTAP VOTER WEB: HTML File

Setup

Enter your name and the date in the comment section of vw_election.html and vw_results.js.

Link JS Files

Open the vw_election.html file. Directly above the closing </head> tag, insert script elements to link the page to the vw_congminn.js and vw_results.js files in that order. Defer the loading and running of both script files until after the page has loaded.

[SOLVED] CSIS 310 MINDTAP VOTER WEB: Election Report

Scroll down the file and, directly above the footer, insert an empty section element. You will write the HTML code of the election report in this element.

JS File

Open the vw_congminn.js file and study the contents. Note that the file contains the results of 8 congressional elections in Minnesota. The candidate information is stored in multidimensional arrays named candidate, party, and votes. Do not make any changes to this file.

Variables

Next, go to the vw_results.js file. Declare a variable named reportHTML containing the following HTML text

<h1> title </h1>

JS File Continued

Rows Function

Next, create the candidateRows() function. The purpose of this function is to write individual table rows for each candidate, showing the candidate’s name, party affiliation, vote total, and vote percentage. The candidateRows() function has two parameters named raceNum and totalVotes. Place the commands in the following steps within this function.

Declare a local variable named rowHTML that will contain the HTML code for the table row. Set the initial value of this variable to an empty text string.
Create a for loop in which the counter variablej goes from 0 to 2 in steps of 1 unit. Within the for loop do the following:
- Declare a variable named candidateName that retrieves the name of the current candidate and the current race. (Hint : Retrieve the candidate name from the multidimensional candidate array using the reference, candidate[raceNum][j].)
- Declare a variable named candidateParty that retrieves the party affiliation of the current candidate in the current race from the multidimensional party array.
- Declare a variable named candidateVotes that retrieves the votes cast for the current candidate in the current race from the multidimensional votes array.
- Declare a variable named candidatePercent equal to the value returned by the calcPercent() function, calculating the percentage of votes received by the current candidate in the loop. Use candidateVotes as the first parameter value and totalVotes as the second parameter value.
- Add the following HTML code to the value of the rowHTML variable

<tr>
<td> name ( party )</td>
<td> votes ( percent )</td>
</tr>

where name is the value of candidateName, party is the value of candidateParty, votes is the 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.

Return the value of the rowHTML variable.

Task

Complete the Rows Function step described above.

HTML File Continued

Open vw_election.html Verify that the three candidate names, party affiliations, votes, and vote percentages are shown for each of the eight congressional races.

Bar Chart Function

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. At the bottom of the file create a function named createBar() with one parameter named partyType. Add the commands described in the following steps to the function:

Declare a variable named barHTML and set its initial value to an empty text string.
Create a switch/case statement that tests the value of the partyType parameter.
- If partyType equal “D” set barHTML equal to:

If partyType equals “R” set barHTML equal to:

Finally, if partyType equals “I” set barHTML to:

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.

Bar Chart Creation

Scroll up to the candidateRows() function. Directly before the line that 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 call the createBar() function using candidateParty as the parameter value.

Task

Complete the Bar Chart Function step described above.

Wrapping Up

Verify

Add comments throughout the file with descriptive information about the variables and functions. Open vw_election.html and click the “Build Website” button. Verify that each election table shows a bar chart with different the length of bars representing each candidate’s vote percentage.

FILES:

vw_congminn.js

“use strict”;

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Case Problem 4

Filename: vw_congminn.js

Variables:

raceTitle

Contains the title to be placed in the election results page

race

An array of race names

candidate

A multidimensional array showing the candidate names for each

of the races

party

A multidimensional array showing the party afflilations for

each candidate from each race

votes

A multidimensional array showing the votes for each

candidate from each race

var raceTitle = “Minnesota Congressional Elections”;

var race = [“District 1”, “District 2”, “District 3”, “District 4”,

“District 5”, “District 6”, “District 7”, “District 8”];

var candidate =

[

[“Sanchez, Onita”, “Troutman, Rachel”, “Whitman, Gary”],

[“Berk, Thomas”, “Chiang, Michael”, “Larson, Alicia”],

[“Thomas, Howard”, “Olsen, Fred”, “Shapiro, Douglas”],

[“Sweet, Alice”, “Grovener, Stewart”, “Reardin, Samuel”],

[“Aitkens, Mary”, “Mundleberg, Linda”, “Ketrick, Rachel”],

[“Nielsen, Kevin”, “Francis, Trevor”, “Inglessohn, Ray”],

[“Pulaski, Stewart”, “Biersen, Nancy”, “Pope, Richard”],

[“Venn, Michael”, “Ramirez, Juan”, “Zander, Audry”]

];

var party =

[

[“D”, “R”, “I”],

[“D”, “R”, “I”]

];

var votes =

[

[193211, 142164, 22486],

[164338, 193587, 42168],

[159937, 222335, 23217],

[216685, 123703, 21135],

[262102, 100744, 27255],

[174944, 179240, 11145],

[197791, 114151, 15296],

[191976, 161831, 4012],

];

vw_election.html:

<!DOCTYPE html>

<head>

<!–

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Case Problem 4

VoterWeb Election Results

Author:

Date:

Filename: vw_election.html

–>

<title>VoterWeb Election Results</title>

</head>

<body>

<ul>

<li><a href=”#”>U.S. Congress</a></li>

<li><a href=”#”>U.S. Senate</a></li>

<li><a href=”#”>State Governors</a></li>

<li><a href=”#”>Presidential</a></li>

<li><a href=”#”>Timeline</a></li>

<li><a href=”#”>Search</a></li>

</ul>

</nav>

</header>

<ul>

<li><a href=”#”>Alabama</a></li>

<li><a href=”#”>Alaska</a></li>

<li><a href=”#”>Arizona</a></li>

<li><a href=”#”>Arkansas</a></li>

<li><a href=”#”>California</a></li>

<li><a href=”#”>Colorado</a></li>

<li><a href=”#”>Connecticut</a></li>

<li><a href=”#”>Delaware</a></li>

<li><a href=”#”>Florida</a></li>

<li><a href=”#”>Georgia</a></li>

<li><a href=”#”>Hawaii</a></li>

<li><a href=”#”>Idaho</a></li>

<li><a href=”#”>Illinois</a></li>

<li><a href=”#”>Indiana</a></li>

<li><a href=”#”>Kansas</a></li>

<li><a href=”#”>Kentucky</a></li>

<li><a href=”#”>Louisiana</a></li>

<li><a href=”#”>Maine</a></li>

<li><a href=”#”>Maryland</a></li>

<li><a href=”#”>Massachusetts</a></li>

<li><a href=”#”>Michigan</a></li>

<li><a href=”#”>Minnesota</a></li>

<li><a href=”#”>Mississippi</a></li>

<li><a href=”#”>Missouri</a></li>

<li><a href=”#”>Montana</a></li>

<li><a href=”#”>Nebraska</a></li>

<li><a href=”#”>Nevada</a></li>

<li><a href=”#”>New Hampshire</a></li>

<li><a href=”#”>New Jersey</a></li>

<li><a href=”#”>New Mexico</a></li>

<li><a href=”#”>North Carolina</a></li>

<li><a href=”#”>North Dakota</a></li>

<li><a href=”#”>Oklahoma</a></li>

<li><a href=”#”>Oregon</a></li>

<li><a href=”#”>Pennsylvania</a></li>

<li><a href=”#”>Rhode Island</a></li>

<li><a href=”#”>South Carolina</a></li>

<li><a href=”#”>South Dakota</a></li>

<li><a href=”#”>Tennessee</a></li>

<li><a href=”#”>Texas</a></li>

<li><a href=”#”>Vermont</a></li>

<li><a href=”#”>Virginia</a></li>

<li><a href=”#”>Washington</a></li>

<li><a href=”#”>West Virginia</a></li>

<li><a href=”#”>Wisconsin</a></li>

<li><a href=”#”>Wyoming</a></li>

</ul>

</nav>

</footer>

</body>

</html>

vw_reset.css:

@charset “utf-8”;

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Case Problem 4

VoterWeb Reset Style Sheet

Filename: vw_reset.css

/* Basic styles to be used with all devices and under all conditions */

article, aside, figcaption, figure,

footer, header, main, nav, section {

display: block;

}

address, article, aside, blockquote, body, cite,

div, dl, dt, dd, em, figcaption, figure, footer,

h1, h2, h3, h4, h5, h6, header, html, img,

li, main, nav, nav a, ol, p, section, span, ul {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

/* Set the default page element styles */

body {

line-height: 1.2em;

}

ul, ol {

list-style: none;

}

nav ul {

list-style: none;

list-style-image: none;

}

nav a {

text-decoration: none;

}

vw_results.js:

“use strict”;

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Case Problem 4

Author:

Date:

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.

/* 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);

}

vw_styles.css:

@charset “utf-8”;

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Case Problem 4

VoterWeb General Style Sheet

Filename: vw_styles.css

/* HTML and Body Styles */

html {

background: white;

font-family: Verdana, Geneva, sans-serif;

font-size: 12px;

}

body {

background: #f2e6ca;

max-width: 1200px;

min-width: 420px;

margin: 0px auto;

border: 1px solid rgb(221, 221, 221);

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row wrap;

flex-flow: row wrap;

}

/* Header Styles */

body > header {

width: 100%;

}

img#logoImg {

display: block;

width: 100%;

}

/* Horizontal Navigation Styles */

nav.horizontal ul {

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row nowrap;

flex-flow: row nowrap;

-webkit-justify-content: center;

justify-content: center;

-webkit-align-items: center;

align-items: center;

background-color: rgb(51, 51, 51);

height: 40px;

}

nav.horizontal ul li {

-webkit-flex: 1 1 0px;

flex: 1 1 0px;

margin: 10px;

}

nav.horizontal ul li a {

color: rgb(211, 211, 255);

display: block;

font-size: 1.2em;

text-align: center;

padding: 50% 0%;

}

nav.horizontal ul li a:hover, nav.horizontal ul li a:active {

color: rgb(255, 211, 211);

text-shadow: 0px 0px 2px white, 0px 0px 8px white;

}

/* Vertical Navigation Styles */

nav.vertical {

background: linear-gradient(to bottom right, rgb(151, 0, 51), rgb(51, 0, 151));

padding-top: 10px;

padding-left: 20px;

padding-bottom: 10px;

-webkit-flex: 0 0 300px;

flex: 0 0 300px;

}

nav.vertical ul {

-moz-column-width: 120px;

-webkit-column-width: 120px;

column-width: 120px;

-moz-column-gap: 10px;

-webkit-column-gap: 10px;

column-gap: 10px;

}

nav.vertical ul li {

line-height: 1.8em;

font-size: 1.2em;

}

nav.vertical ul li a {

color: rgb(211, 211, 211);

}

nav.vertical ul li a:hover {

text-decoration: underline;

}

/* Section Styles */

section {

-webkit-flex: 1 1 500px;

flex: 1 1 500px;

padding-left: 30px;

padding-bottom: 10px;

}

section > h1 {

font-size: 3em;

letter-spacing: 0.12em;

line-height: 1.4em;

font-weight: normal;

color: rgb(42, 57, 144);

font-family:Cambria, “Hoefler Text”, “Liberation Serif”, Times, “Times New Roman”, serif;

text-shadow: rgb(51, 51, 51) 3px 3px 10px;

margin: 10px 0px 20px 0px;

}

/* Voter Table Styles */

section table {

margin: 10px 0px 5px 0px;

border-collapse: collapse;

}

section table caption {

font-family: Cambria, “Hoefler Text”, “Liberation Serif”, Times, “Times New Roman”, serif;

color: rgb(42, 57, 144);

font-size: 1.9em;

text-align: left;

font-weight: bold;

letter-spacing: 0.08em;

margin-bottom: 10px;

}

section table th, section table td {

text-align: left;

}

section table tr:first-of-type th:last-of-type {

text-align: right;

}

th {border-bottom: 1px solid black;}

section table tr td:first-of-type {

width: 150px;

}

section table tr td:nth-of-type(2) {

width: 150px;

text-align: right;

padding-right: 7px;

}

td.dem, td.rep, td.ind {

width: 2px;

}

td.dem {background-color: rgba(0, 0, 255, 0.5);}

td.rep {background-color: rgba(255, 0, 0, 0.5);}

td.ind {background-color: rgba(0, 255, 0, 0.5);}

/* Footer Styles */

footer {

width: 100%;

}

footer p {

color: rgb(211, 211, 255);

font-size: 0.9em;

text-align: center;

background-color: rgb(51, 51, 51);

margin: 0px;

padding: 10px 0px;

}

Tasks

Complete the Variables step described above.

Complete the For Loop step described above.

Complete the Rows Function step described above.

Complete the Bar Chart Function step described above.

[NEW SOLN] CSIS 310 MINDTAP VOTER WEB

You May Also Like