JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<h1>How many US dollars did your online ad network make last year?</h1>
<input type="range" min="100000" max="100000000" step="100000" value="100000" id="revenue">
<p>Current revenue: <output id="current"></output></p>
<p>Lost revenue due to Ad Blockers: <output id="lost"></output></p>

<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<footer>a <a href="http://reallygood.co.il" target="_blank">Really good</a> demonstration. Confidential.</footer>

CSS

body {text-align: center; font-family: 'Oxygen', sans-serif; font-size: 18px; margin: 30px; background: url(http://subtlepatterns.com/patterns/brillant.png); line-height: 160%;}
h1 {font-size: 28px;}
output {font-weight: bold;}
#revenue {display: block; width: 300px; margin: 20px auto 15px;}
footer {font-size: 70%; color: #777; margin-top: 40px;}
footer a {color: #ce1729;}

JavaScript

function update(){
    $('#current').val(format($('#revenue').val()));
    $('#lost').val(format(parseInt( ($('#revenue').val() * 0.14), 10) ));
}

function format(val) {
    var valString = Number(val).toFixed(2).toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    return "$" + valString;
}
$('#revenue').change(update);
update();