hyrious · August 28, 2017 12:39
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    table
    td {
      margin: 2px; border: 2px solid transparent; padding: 8px;
      background: lightgrey;
      text-align: center;
      vertical-align: middle;
      user-select: none;
      cursor: pointer;
    }
    td:hover { background: silver; border-color: darkgrey }
    td:active { background: black; color: white; border-color: white }
    #formula {
      height: 34px;
      margin: 0 2px; border: 2px solid transparent;
      font-size: 20px
    }
    #formula:hover { border-color: darkgrey }
  </style>
 </head>
 <body>
  <div id="formula"> Free Calculator! </div>
  <table>
    <tr><td> 1   <td> 2   <td> 3    <td>C
    <tr><td> 4   <td> 5   <td> 6    <td>+
    <tr><td> 7   <td> 8   <td> 9    <td>-
    <tr><td> 0   <td> *   <td> /    <td>=
    <tr><td> (   <td> )   <td> sin  <td>cos
    <tr><td> cos <td> log <td> sqrt <td>CE
  </table>
  <script>

    const cos = Math.cos.bind(Math)
    const sin = Math.sin.bind(Math)
    const log = Math.log.bind(Math)
    const sqrt = Math.sqrt.bind(Math)

    const $ = document.querySelector.bind(document)
    const $$ = document.querySelectorAll.bind(document)
    var lastInputLength = 0
    $('#formula').style.width = $('table').clientWidth - 8 + 'px'
    for (let td of $$('td'))
      td.onclick = function() {
        if (this.innerText === '=')
          $('#formula').innerText = '' + eval($('#formula').innerText) || 'Syntax Error!'
        else if (this.innerText === 'CE')
          $('#formula').innerText = $('#formula').innerText.substring(0, $('#formula').innerText.length - lastInputLength)
        else if (this.innerText === 'C')
          $('#formula').innerText = ''
        else {
          $('#formula').innerText += this.innerText
          lastInputLength = this.innerText.length
        }
      }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	table
	td {
	margin: 2px; border: 2px solid transparent; padding: 8px;
	background: lightgrey;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	cursor: pointer;
	}
	td:hover { background: silver; border-color: darkgrey }
	td:active { background: black; color: white; border-color: white }
	#formula {
	height: 34px;
	margin: 0 2px; border: 2px solid transparent;
	font-size: 20px
	}
	#formula:hover { border-color: darkgrey }
	</style>
	</head>
	<body>
	<div id="formula"> Free Calculator! </div>
	<table>
	<tr><td> 1 <td> 2 <td> 3 <td>C
	<tr><td> 4 <td> 5 <td> 6 <td>+
	<tr><td> 7 <td> 8 <td> 9 <td>-
	<tr><td> 0 <td> * <td> / <td>=
	<tr><td> ( <td> ) <td> sin <td>cos
	<tr><td> cos <td> log <td> sqrt <td>CE
	</table>
	<script>

	const cos = Math.cos.bind(Math)
	const sin = Math.sin.bind(Math)
	const log = Math.log.bind(Math)
	const sqrt = Math.sqrt.bind(Math)

	const $ = document.querySelector.bind(document)
	const $$ = document.querySelectorAll.bind(document)
	var lastInputLength = 0
	$('#formula').style.width = $('table').clientWidth - 8 + 'px'
	for (let td of $$('td'))
	td.onclick = function() {
	if (this.innerText === '=')
	$('#formula').innerText = '' + eval($('#formula').innerText) \|\| 'Syntax Error!'
	else if (this.innerText === 'CE')
	$('#formula').innerText = $('#formula').innerText.substring(0, $('#formula').innerText.length - lastInputLength)
	else if (this.innerText === 'C')
	$('#formula').innerText = ''
	else {
	$('#formula').innerText += this.innerText
	lastInputLength = this.innerText.length
	}
	}
	</script>
	</body>
	</html>