JSFiddle - React, Tailwind, and code Playground

by cheeaun

HTML

<h1 id="psi"></h1>

<footer>More info at <a href="http://www.haze.gov.sg/" target="_blank">haze.gov.sg</a>. <a href="https://twitter.com/cheeaun">@cheeaun</a>.</footer>

CSS

html, body {
    margin: 0;
    padding: 0;
    font-family: HelveticaNeue-Thin, 'helvetica neue thin', 'helvetica neue', helvetica, arial, sans-serif;
    text-align: center;
    font-weight: 300;
    height: 100%;
}
#psi {
    font-family: HelveticaNeue-UltraLight, 'helvetica neue ultralight', 'helvetica neue', helvetica, arial, sans-serif;
    font-weight: 100;
    line-height: 200%;
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}
footer {
    display: block;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: .5em;
    text-align: center;
}

JavaScript

var $psi = document.getElementById('psi');
var load = function (data) {
    var val = data.query.results.strong.content;
    $psi.innerText = val;
};

var s = document.createElement('script');
s.src = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fapp2.nea.gov.sg%2Fhome-lite%2Fpsi-lite%22%20and%20xpath%3D%22descendant-or-self%3A%3A*%5B%40id%20%3D%20'main'%5D%2Fdescendant%3A%3A*%5Bcontains(concat('%20'%2C%20normalize-space(%40class)%2C%20'%20')%2C%20'%20content%20')%5D%2Fdescendant%3A%3Atable%2Fdescendant%3A%3Atd%2Fdescendant%3A%3Astrong%5B%40style%5D%22&format=json&callback=load&_maxage=900";
document.body.appendChild(s);