mmaltsev/calculator.html

## calculator.html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <style>
      .calculator {
        margin: 0 auto;
      }
      .calculator td {
        font-size: 20px;
        height: 40px;
        border: 1px solid #888;
        min-width: 40px;
        cursor: pointer;
        text-align: center;
        user-select: none;
      }
      #display {
        text-align: right;
        cursor: default;
        padding: 0 5px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table class="calculator">
      <tr>
        <td id="display" colspan="5"></td>
      </tr>
      <tr>
        <td onclick="addDigit(7)">7</td>
        <td onclick="addDigit(8)">8</td>
        <td onclick="addDigit(9)">9</td>
        <td onclick="operation('+')">+</td>
        <td rowspan="2" onclick="clean()">C</td>
      </tr>
      <tr>
        <td onclick="addDigit(4)">4</td>
        <td onclick="addDigit(5)">5</td>
        <td onclick="addDigit(6)">6</td>
        <td onclick="operation('-')">-</td>
      </tr>
      <tr>
        <td onclick="addDigit(1)">1</td>
        <td onclick="addDigit(2)">2</td>
        <td onclick="addDigit(3)">3</td>
        <td onclick="operation('*')">*</td>
        <td rowspan="2" onclick="operation('=')">=</td>
      </tr>
      <tr>
        <td onclick="addDigit(0)" colspan="2">0</td>
        <td onclick="addComma()">.</td>
        <td onclick="operation('/')">/</td>
      </tr>
    </table>
    <script>
      document.addEventListener('keydown', keyPush);
      var isComma = false;
      var currentValue = 0;
      var lastOperator = '';

      function addDigit(digit) {
        if (lastOperator === '=')
          clean();
        document.getElementById('display').innerHTML += digit;
      }

      function clean() {
        document.getElementById('display').innerHTML = '';
        currentValue = 0;
        lastOperator = '';
        isComma = false;
      }

      function addComma() {
        if (!isComma) {
          document.getElementById('display').innerHTML += '.';
          isComma = true;
        }
      }

      function operation(operator) {
        let displayElement = document.getElementById('display');
        let displayValue = +displayElement.innerHTML;
        switch (lastOperator) {
          case '+':
            currentValue = currentValue + displayValue;
            break;
          case '-':
            currentValue = currentValue - displayValue;
            break;
          case '*':
            currentValue = currentValue * displayValue;
            break;
          case '/':
            currentValue = currentValue / displayValue;
            break;
          case '':
            currentValue = displayValue;
            break;
        }
        displayElement.innerHTML = operator === '=' ?  currentValue : '';
        isComma = false;
        lastOperator = operator;
      }

      function keyPush(evt) {
        if (+evt.key)
          addDigit(+evt.key);
        else if (['+', '-', '*', '/', '='].indexOf(evt.key) > -1)
          operation(evt.key);
        else if (evt.key === 'Enter')
          operation('=');
        else if (evt.key === '.')
          addComma();
        else if (evt.key === 'Delete')
          clean();
      }
    </script>
  </body>
</html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Calculator</title>
	<style>
	.calculator {
	margin: 0 auto;
	}
	.calculator td {
	font-size: 20px;
	height: 40px;
	border: 1px solid #888;
	min-width: 40px;
	cursor: pointer;
	text-align: center;
	user-select: none;
	}
	#display {
	text-align: right;
	cursor: default;
	padding: 0 5px;
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<table class="calculator">
	<tr>
	<td id="display" colspan="5"></td>
	</tr>
	<tr>
	<td onclick="addDigit(7)">7</td>
	<td onclick="addDigit(8)">8</td>
	<td onclick="addDigit(9)">9</td>
	<td onclick="operation('+')">+</td>
	<td rowspan="2" onclick="clean()">C</td>
	</tr>
	<tr>
	<td onclick="addDigit(4)">4</td>
	<td onclick="addDigit(5)">5</td>
	<td onclick="addDigit(6)">6</td>
	<td onclick="operation('-')">-</td>
	</tr>
	<tr>
	<td onclick="addDigit(1)">1</td>
	<td onclick="addDigit(2)">2</td>
	<td onclick="addDigit(3)">3</td>
	<td onclick="operation('')"></td>
	<td rowspan="2" onclick="operation('=')">=</td>
	</tr>
	<tr>
	<td onclick="addDigit(0)" colspan="2">0</td>
	<td onclick="addComma()">.</td>
	<td onclick="operation('/')">/</td>
	</tr>
	</table>
	<script>
	document.addEventListener('keydown', keyPush);
	var isComma = false;
	var currentValue = 0;
	var lastOperator = '';

	function addDigit(digit) {
	if (lastOperator === '=')
	clean();
	document.getElementById('display').innerHTML += digit;
	}

	function clean() {
	document.getElementById('display').innerHTML = '';
	currentValue = 0;
	lastOperator = '';
	isComma = false;
	}

	function addComma() {
	if (!isComma) {
	document.getElementById('display').innerHTML += '.';
	isComma = true;
	}
	}

	function operation(operator) {
	let displayElement = document.getElementById('display');
	let displayValue = +displayElement.innerHTML;
	switch (lastOperator) {
	case '+':
	currentValue = currentValue + displayValue;
	break;
	case '-':
	currentValue = currentValue - displayValue;
	break;
	case '*':
	currentValue = currentValue * displayValue;
	break;
	case '/':
	currentValue = currentValue / displayValue;
	break;
	case '':
	currentValue = displayValue;
	break;
	}
	displayElement.innerHTML = operator === '=' ? currentValue : '';
	isComma = false;
	lastOperator = operator;
	}

	function keyPush(evt) {
	if (+evt.key)
	addDigit(+evt.key);
	else if (['+', '-', '*', '/', '='].indexOf(evt.key) > -1)
	operation(evt.key);
	else if (evt.key === 'Enter')
	operation('=');
	else if (evt.key === '.')
	addComma();
	else if (evt.key === 'Delete')
	clean();
	}
	</script>
	</body>
	</html>