JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<h2>Calculator</h2>
<form action='index.html' method='post' name='calc'>
	<input type='text' name='output' id='output' /> 
<table>
	<tr>
		<td><input type='button' id='seven' value='7' class='btn'/></td>
		<td><input type='button' id='eight' value='8' class='btn'/></td>
		<td><input type='button' id='nine' value='9' class='btn'/></td>
        <td><input type='button' id='plus' value='+' class='btn'/></td>
	</tr>
	<tr>
		<td><input type='button' id='four' value='4' class='btn'/></td>
		<td><input type='button' id='five' value='5' class='btn'/></td>
		<td><input type='button' id='six' value='6' class='btn'/></td>
        <td><input type='button' id='minus' value='-' class='btn'/></td>
	</tr>
	<tr>
		<td><input type='button' id='one' value='1' class='btn'/></td>
		<td><input type='button' id='two' value='2' class='btn'/></td>
		<td><input type='button' id='three' value='3' class='btn'/></td>
        <td><input type='button' id='divide' value='Ă·' class='btn'/></td>
	</tr>
	<tr>
        <td><input type='button' id='zero' value='0' class='btn'/></td>
		<td><input type='button' id='period' value='.' class='btn' /></td>
		<td><input type='button' id='equal' value='=' class='btn' /></td>
        <td><input type='button' id='multiply' value='x' class='btn'/></td>
	</tr>
</table>
	 
</form>

CSS

tbal, td, tr, div, input { margin: 0; padding: 0; }

.btn { 
   padding: 10px;
   width: 44px; 
   height: 60px; 
}
#output { 
    width: 200px; 
    height: 30px; 
    padding: 2px; 
}

JavaScript

(function() {  
var btns = document.querySelectorAll('.btn'); 
var output = document.getElementById('output'); 

var c = new Calc(); 

   
function Calc() {
  console.log(Calc); 
}
Calc.prototype = { 
    constructor: Calc, 
    add: function(a, b) { 
        console.log(a + b); 
    }, 
    o: function() { 
      output.value += this.value;       
    }
}; 

for (var i=0; i < btns.length; i++) { 
    btns[i].addEventListener('click', c, false); 
}
    
//console.log(c);

}());