JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="candidate clinton">
  <div class="name">Hillary Clinton</div>
  <div class="chance">&nbsp;</div>
</div>

<div class="candidate trump">
  <div class="name">Donald Trump</div>
  <div class="chance">&nbsp;</div>
</div>

CSS

html, body {
  background: #000;
  font-family: Avenir, sans-serif;
  color: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  transition: opacity .15s ease;
  font-size: 8vw;
}

html:not([loaded]) body {
  opacity: 0
}

.candidate {
  width: 50%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 50%;
}

.candidate + .candidate {
  right: 0;
}

.clinton {
  background: #0176ff;
}

.trump {
  background: #f44336;
}

.name {
  opacity: .5
}

.chance {
  font-size: 1.5em;
  margin-top: .125em
}

JavaScript

var request = new XMLHttpRequest();
request.open('GET', 'https://extraction.import.io/query/extractor/411305eb-9758-4c07-aa18-8874bd194f62?url=http%3A%2F%2Fprojects.fivethirtyeight.com%2F2016-election-forecast%2F&_apikey=466029e60397429384ed475ac829fdfa52b553289ddcfd90342653b5814f9109ea98f4d9f4fb29b98f04ce914068580dfdf760303ade50c73d73f27e6cb6ad7c37d1bdcd88a70f8ad3bd49bc217d6d95', true);

var clinton = 0, trump = 1;
var $ = function(selector) {
  return document.querySelector(selector);
}

request.onload = function() {
  if (request.status < 200 || request.status > 400) {
    return;
  }

  var data = JSON.parse(request.responseText);
	var chance = function(id) {
    return data.extractorData.data[0].group[id]['Chance of Winning (%)'][0].text + '%';
  };

  $('.clinton .chance').innerHTML = chance(clinton);
  $('.clinton').style.width = chance(clinton);
  $('.clinton').style.fontSize = chance(clinton);
  $('.trump .chance').innerHTML = chance(trump);
  $('.trump').style.width = chance(trump);
  $('.trump').style.fontSize = chance(trump);
  
	document.documentElement.setAttribute('loaded', '');
};

request.send();