qxjit/calculator.html

## calculator.html
<html>
  <head>
    <style type="text/css">
      body {
        width: 966px;
        margin: auto;
        background-color: gray;
      }

      .button-section {
        clear: both;
      }

      .button {
        width: 50px;
        height: 50px;
        border: 1px solid red;
        background-color: #900;
        font-size: 40px;
        color: white;
        float: left;
      }

      #display {
        height: 50px;
        border: 1px solid black;
        background-color: white;
        font-size: 40px;
        color: black;
        text-align: right;
      }

    </style>
  </head>
  <body>
    <h1>Calculator</h1>

    <div id="display"></div>
    <div class='button-section'>
      <div class='button clear'>C</div>
      <div class='button allclear'>AC</div>
      <div class='button plus'>+</div>
      <div class='button times'>*</div>
      <div class='button equals'>=</div>
    </div>
    <div class='button-section'>
      <div class='button num' data-value="1">1</div>
      <div class='button num' data-value="2">2</div>
      <div class='button num' data-value="3">3</div>
      <div class='button num' data-value="4">4</div>
      <div class='button num' data-value="5">5</div>
      <div class='button num' data-value="6">6</div>
      <div class='button num' data-value="7">7</div>
      <div class='button num' data-value="8">8</div>
      <div class='button num' data-value="9">9</div>
      <div class='button num' data-value="0">0</div>
    </div>

    <script type="text/javascript">
      var display = document.getElementById('display');
      var operand = 0;
      var operator;
      var lastOp;
      var answer = 0;
      var input = "";
      var staleInput = false;

      function setupClick(className, callback) {
        var elems = document.getElementsByClassName(className);
        for (var i = 0; i < elems.length; i++) {
          elems[i].addEventListener('click', callback);
        }
      }

      setupClick('num', function(event) {
        if (staleInput) {
          input = "";
        }

        var value = event.target.dataset.value;
        input = input + value;
        display.innerText = input;
      });

      setupClick('clear', function(event) {
        input = "";
        staleInput = false;
        display.innerText = input;
      });

      setupClick('allclear', function(event) {
        input = "";
        staleInput = false;
        answer = 0;
        display.innerText = input;
      });

      setupClick('plus', function(event) {
        operand = parseInt(input);
        operator = function (x,y) { return x + y };
        staleInput = true;
        display.innerText = input;
      });

      setupClick('times', function(event) {
        operand = parseInt(input);
        operator = function (x,y) { return x * y };
        staleInput = true;
        display.innerText = input;
      });

      setupClick('equals', function(event) {
        if (operator) {
          var newOperand = parseInt(input);
          var op = operator;

          lastOp = function() { return op(operand, newOperand) };
          operator = null;
        }

        answer = lastOp();
        operand = answer;
        input = "" + answer;
        staleInput = true;
        display.innerText = answer;
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<style type="text/css">
	body {
	width: 966px;
	margin: auto;
	background-color: gray;
	}

	.button-section {
	clear: both;
	}

	.button {
	width: 50px;
	height: 50px;
	border: 1px solid red;
	background-color: #900;
	font-size: 40px;
	color: white;
	float: left;
	}

	#display {
	height: 50px;
	border: 1px solid black;
	background-color: white;
	font-size: 40px;
	color: black;
	text-align: right;
	}

	</style>
	</head>
	<body>
	<h1>Calculator</h1>

	<div id="display"></div>
	<div class='button-section'>
	<div class='button clear'>C</div>
	<div class='button allclear'>AC</div>
	<div class='button plus'>+</div>
	<div class='button times'>*</div>
	<div class='button equals'>=</div>
	</div>
	<div class='button-section'>
	<div class='button num' data-value="1">1</div>
	<div class='button num' data-value="2">2</div>
	<div class='button num' data-value="3">3</div>
	<div class='button num' data-value="4">4</div>
	<div class='button num' data-value="5">5</div>
	<div class='button num' data-value="6">6</div>
	<div class='button num' data-value="7">7</div>
	<div class='button num' data-value="8">8</div>
	<div class='button num' data-value="9">9</div>
	<div class='button num' data-value="0">0</div>
	</div>

	<script type="text/javascript">
	var display = document.getElementById('display');
	var operand = 0;
	var operator;
	var lastOp;
	var answer = 0;
	var input = "";
	var staleInput = false;

	function setupClick(className, callback) {
	var elems = document.getElementsByClassName(className);
	for (var i = 0; i < elems.length; i++) {
	elems[i].addEventListener('click', callback);
	}
	}

	setupClick('num', function(event) {
	if (staleInput) {
	input = "";
	}

	var value = event.target.dataset.value;
	input = input + value;
	display.innerText = input;
	});

	setupClick('clear', function(event) {
	input = "";
	staleInput = false;
	display.innerText = input;
	});

	setupClick('allclear', function(event) {
	input = "";
	staleInput = false;
	answer = 0;
	display.innerText = input;
	});

	setupClick('plus', function(event) {
	operand = parseInt(input);
	operator = function (x,y) { return x + y };
	staleInput = true;
	display.innerText = input;
	});

	setupClick('times', function(event) {
	operand = parseInt(input);
	operator = function (x,y) { return x * y };
	staleInput = true;
	display.innerText = input;
	});

	setupClick('equals', function(event) {
	if (operator) {
	var newOperand = parseInt(input);
	var op = operator;

	lastOp = function() { return op(operand, newOperand) };
	operator = null;
	}

	answer = lastOp();
	operand = answer;
	input = "" + answer;
	staleInput = true;
	display.innerText = answer;
	});
	</script>
	</body>
	</html>