Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
  <title>U.S. ELECTION MAP</title>
​
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
​
  <script type="text/javascript" src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/map.js"></script>
​
</head>
​
<body onload="onLoad();" >
<div class="page">
  <header>
    <h1>U.S. ELECTION MAP</h1>
  </header>
​
  <div class="map-container">
​
    <canvas id="map_canvas" width="800" height="550" style="position:relative;">
    </canvas>
​
    <table id='stateResults' style="position:absolute; bottom:10px; right:10px;">
      <theader>
        <tr><th>STATE NAME</th><th>Abbreviation</th></tr>
      </theader>
      <tbody>
        <tr><td class="name-1">NAME1</td><td class="name-1">RESULTS1</td></tr>
        <tr><td class="name-2">NAME2</td><td class="name-2">RESULTS2</td></tr>
        <tr><td class="winner">WINNER:</td><td class="winner">WINNER NAME</td></tr>
      </tbody>
    </table>
​
    <table id='countryResults' style="position:absolute; top:10px; left:10px;">
      <tbody>
        <tr><td class="name-1">NAME1</td><td class="name-1">RESULTS1</td><td class="name-2">NAME2</td><td class="name-2">RESULTS2</td><th>WINNER</th><th>Name</th></tr>
      </tbody>
    </table>
​
  </div>
  <br clear="all">
  <footer>
    <p>&copy; Skillcrush 2016  <span>//</span>  HTML5 Map Created By: <a href="http://dougx.net/map/usmap.html" target="_blank">DougX.net</a></p>
  </footer>
​
  <script type="text/javascript" src="script.js"></script>
</div>
</body>
</html>
​
 
.page {
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
  background-color: #eee;
}
​
body {
  font: 16px/26px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #454545;
  margin: 0px;
  padding: 0px;
  background-color: #eee;
}
​
header {
  padding: 0.75em 0;
  text-align: center;
  font-family: 'Montserrat', serif;
  font-size: 21px;
  text-shadow: 1px 1px #ccc;
}
​
.map-container {
  width:800px;
  margin: 0 auto;
  position:relative;
}
​
#stateResults {
  width: 25%;
  font: 12px/16px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #454545;
}
​
#countryResults {
  width: 95%;
  font: 16px/28px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #454545;
}
#stateResults, #countryResults {
  border-collapse: collapse;
  background-color: #f2f2f2;
  -webkit-box-shadow: 1px 1px 1px 1px rgba(204,204,204,0.5);
  -moz-box-shadow: 1px 1px 1px 1px rgba(204,204,204,0.5);
  box-shadow: 1px 1px 1px 1px rgba(204,204,204,0.5);
}
​
th, td {
  text-align: left;
  padding: 8px;
}
#stateResults th{
  background-color: #3b3b3b;
  color: white;
}
#countryResults th {
  background-color: #f16059;
  color: white;
}
.name-1 {
  background-color: rgb(132,17,11);
  color: white;
}
.name-2 {
  background-color: rgb(245, 141, 136);
  color: white;
}
.winner {
  background-color: #f16059;
  color: white;
}
​
footer p {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}
footer span {
  color: #f16059;
  padding: 0 5px;
}
​
 
createPolitician = function(name, partyColor) 
{
    var politician = {};
    politician.name = name; 
    politician.electionResults = null;
    politician.totalVotes = 0;
    politician.partyColor = partyColor;
​
    politician.tallyUpTotalVotes = function()
    {
      this.totalVotes = 0;
​
      for (var i = 0; i < this.electionResults.length; i++)
      {
        this.totalVotes = this.totalVotes + this.electionResults[i];
      }
  };
​
​
    return politician;
​
};
​
var jane = createPolitician("Jane Doesitall",[245, 141, 136]);
var betsy = createPolitician("Betsy Rocks", [132, 17, 11]); 
​
​
betsy.electionResults = [4, 2, 4, 4, 22, 3, 3, 1, 2, 15, 8, 1, 3, 9, 0, 6, 1, 5, 5, 1, 3, 7, 8, 1, 3, 3, 1, 3, 2, 2, 6, 2, 14, 0, 1, 6, 7, 3, 7, 3, 6, 1, 3, 17, 3, 1, 2, 11, 2, 3, 1];
jane.electionResults = [5, 1, 7, 2, 33, 6, 4, 2, 1, 14, 8, 3, 1, 11, 11, 0, 5, 3, 3, 3, 7, 4, 8, 9, 3, 7, 2, 2, 4, 2, 8, 3, 15, 15, 2, 12, 0, 4, 13, 1, 3, 2, 8, 21, 3, 2, 11, 1, 3, 7, 2];
​
jane.electionResults[9] = 1;
betsy.electionResults[9] = 28;
​
jane.electionResults[4] = 17;
betsy.electionResults[4] = 38;
​
jane.electionResults[43] = 11;
betsy.electionResults[43] = 27;
​
console.log(jane.electionResults);
console.log(betsy.electionResults);
​
​
var setStateResults = function(state)
{
     theStates[state].winner = null;
​
     if (betsy.electionResults[state] > jane.electionResults[state])
     {
         theStates[state].winner = betsy;
     }
     else if (betsy.electionResults[state] < jane.electionResults[state])
     {
         theStates[state].winner = jane;
     }
​
     var stateWinner = theStates[state].winner;
​
     if (stateWinner !== null)
     {
        theStates[state].rgbColor = stateWinner.partyColor;
     }
     else
     {
        theStates[state].rgbColor = [11,32,57];
    } 
​
  var stateInfoTable = document.getElementById('stateResults');
​
  var header = stateInfoTable.children[0];
  var body = stateInfoTable.children[1];
​
  var stateName = header.children[0].children[0];
  var abbrev = header.children[0].children[1];
​
  var candidate1Name = body.children[0].children[0];
  var candidate2Name = body.children[1].children[0];
​
  var candidate1Results = body.children[0].children[1];
  var candidate2Results = body.children[1].children[1];
​
  var winnersName = body.children[2].children[1];
​
  stateName.innerText = theStates[state].nameFull;
  abbrev.innerText = "(" +theStates[state].nameAbbrev + ")";
​
  candidate1Name.innerText = betsy.name;
  candidate2Name.innerText = jane.name;
​
  candidate1Results.innerText = betsy.electionResults[state];
  candidate2Results.innerText = jane.electionResults[state];
​
  if (theStates[state].winner === null)
  {
    winnersName.innerText = "DRAW";
  }
  else
  {
    winnersName.innerText = theStates[state].winner.name;
  }
​
};
​
betsy.tallyUpTotalVotes();
jane.tallyUpTotalVotes();
​
console.log(betsy.totalVotes);
console.log(jane.totalVotes);
​
console.log("Betsy's color is: " + betsy.partyColor);
console.log("Jane's color is: " + jane.partyColor);
​
var winner = "???";
​
if (jane.totalVotes > betsy.totalVotes)
{
    winner = jane.name;
}
else if (jane.totalVotes < betsy.totalVotes)
{
    winner = betsy.name;
}
else
{
    winner = "DRAW."
}
​
console.log("AND THE WINNER IS..." + winner + "!!!");
​
var countryInfoTable = document.getElementById('countryResults');
​
var row = countryInfoTable.children[0].children[0];
row.children[0].innerText = betsy.name;
row.children[1].innerText = betsy.totalVotes;
row.children[2].innerText = jane.name;
row.children[3].innerText = jane.totalVotes;
​
row.children[5].innerText = winner;
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
csndra0504pro
0viewers