calculator

calculator.markdown

calculator

A Pen by Jesse Hattabaugh on CodePen.

License.

index.html

<output></output>
<div>
  <input type="button" value="7" />
  <input type="button" value="8" />
  <input type="button" value="9" />
  <button value="/">&divide;</button>
</div>
<div>
  <input type="button" value="4" />
  <input type="button" value="5" />
  <input type="button" value="6" />
  <button value="*">x</button>
</div>
<div>
  <input type="button" value="1" />
  <input type="button" value="2" />
  <input type="button" value="3" />
  <button value="-">-</button>
</div>
<div>
  <input type="button" value="0" />
  <input type="button" value="." />
  <button value="+">+</button>
  <button value="=">=</button>
</div>

script.js

var output = document.querySelector('output');
var inputs = document.querySelectorAll('[type=button]');
var operators = document.querySelectorAll('button');

var left;
var op;

[].forEach.call(inputs, function (el) {
  el.addEventListener('click', function (ev) {
    if (op == '=') {
      output.value = '';
    }
    output.value += parseInt(ev.target.value);
  });
});

[].forEach.call(operators, function (el) {
  el.addEventListener('click', function (ev) {

    var right = parseFloat(output.value);

    if (left) {
      if (op == '/') {
        left = left / right;
      } else if (op == '*') {
        left = left * right;
      } else if (op == '-') {
        left = left - right;
      } else if (op == '+') {
        left = left + right;
      } 
    } else {
      left = right;
    }

    op = ev.target.value;

    if (op == '=') {
      output.value = left;
      left = null;
    } else {
      output.value = '';
    }
  });
});

style.css

output {
  display: block;
  border: 1px inset silver;
  width: 5em;
  height: 1em;
  padding: .5em;
  text-align: right;
}