Skip to content

Instantly share code, notes, and snippets.

@houhr
Created February 8, 2015 06:38
Show Gist options
  • Save houhr/5dbc66522c7a6d33e919 to your computer and use it in GitHub Desktop.
Save houhr/5dbc66522c7a6d33e919 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href='http://fonts.googleapis.com/css?family=Flamenco:300,400' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Flamenco', cursive;
font-size: 80px;
}
#number {
text-align: center;
padding-top: 3em;
}
</style>
</head>
<body>
<p id="number"></p>
<script>
window.onload = function() {
var value = 0,
text = document.getElementById('number'),
xhr = new XMLHttpRequest();
function getdata(){
xhr.open('GET', '/data', true);
xhr.send();
xhr.onloadend = function () {
value = parseInt(xhr.responseText.trim());
};
document.body.style.backgroundColor = 'hsla(' + Math.floor(value * 0.35) + ', 50%, 45%, 1)';
text.innerText = 'Hue: ' + Math.floor(value * 0.35);
};
setInterval(getdata, 100);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment