Skills Block Calculator

by eanders

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
  <h1>Skills Block Calculator</h1>
  <form name="calculator" class="calculator">
    <input type="text" name="number_1" class="number_1" size="4" value="2" maxlength="4" /> +
    <input type="text" name="number_2" class="number_2" size="4" value="2" maxlength="4" /> =
    <input type="text" name="answer" class="answer" size="6" disabled="disabled" />
  </form>
  <p>Here's the code we wrote:</p>
  <pre>

$(document).ready(function($){
    doMath();
    $('.calculator').on('keyup', 'input', doMath);
  });
var doMath = function(){
  var number_1 = parseInt($('.number_1').val());
  var number_2 = parseInt($('.number_2').val());
  var answer = number_1 + number_2;
  $('.answer').val(answer);
}
</pre>

</body>

CSS

.calculator,
.calculator input,
.calculator select {
  font-size: 1.4em;
}

.calculator input {
  color: white;
  background-color: black;
}

JavaScript

var doMath = function() {
  var number_1 = parseInt($('.number_1').val());
  var number_2 = parseInt($('.number_2').val());
  var answer = number_1 + number_2;
  $('.answer').val(answer);
}
$(document).ready(function($) {
  doMath();
  $('.calculator').on('keyup', 'input', doMath)
});