gistfile1.html

<!-- CSS -->
<style id="jsbin-css">
#pricing {
  font-family: PT Sans;
}

#monthly-traffic,
#order-size{
  display: block;
  width: 100%;
  padding: 9px;
  margin-bottom: 15px;
  border-radius: 4px;
  border: 1px solid #ccc
}

label[for=monthly-traffic],
label[for=order-size]{
  font-size: 90%
}

#pricing .lead-dollas {
  display: block;
  width: 100%;
}

#dollas {
  font-style: italic;
  font-weight: bold;
}
</style>

<!-- HTML -->
<div id="pricing">
  <h2>What's your lead worth?</h2>
  <label for="monthly-traffic">Monthly site traffic</label>
  <input type="text" id="monthly-traffic" placeholder="1000">
  <label for="order-size">Order size</label>
  <input type="text" id="order-size" placeholder="400">
  <div class="lead-dollas"></div>
</div>

<!-- JS -->
<script>
  (function() {
    Number.prototype.toCheddah = function(c, d, t){
      var n = this, 
          c = isNaN(c = Math.abs(c)) ? 2 : c, 
          d = d == undefined ? "." : d, 
          t = t == undefined ? "," : t, 
          s = n < 0 ? "-" : "", 
          i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
          j = (j = i.length) > 3 ? j % 3 : 0;

      return s 
        + (j ? i.substr(0, j) + t : "")
        + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t)
        + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    };

    var pricingForm = document.getElementById('pricing');
    var lead = pricing.querySelector('.lead-dollas');

    pricingForm.addEventListener('keyup', function(e) {
      e.preventDefault();
      var monthlyTraffic = parseFloat(pricingForm.querySelector('#monthly-traffic').value) || 0;
      var orderSize = parseFloat(pricingForm.querySelector('#order-size').value) || 0;
      var missedOpportunity = orderSize * monthlyTraffic * 0.10;

      lead.innerHTML = displayDemDollas(missedOpportunity);
    })

    function displayDemDollas(num) {
      return "You're missing <span id=\"dollas\">$" + num.toCheddah(2) + "</span> of Leads Every Month!"
    }
  })();
</script>