JSFiddle - React, Tailwind, and code Playground

by Meily Chhon

HTML

<h1>My Calculator</h1>
	<form name="Calculator" action="#" method="post">
		<table border="1">
		<tr>
			<td colspan="4"><div id="display"></div></td>
			<td><input type="button" name="clear" value="CE" id="cancel"/></td>	
		</tr>
		<tr>
			<td><input type="button" name="7" value="7" id="n7" class="btnNum" /></td>
			<td><input type="button" name="8" value="8" id="n8" class="btnNum" /></td>
			<td><input type="button" name="9" value="9" id="n9" class="btnNum"/></td>
			<td><input type="button" name="btndiv" value="/" id="divi"/></td>
		</tr>
		<tr>
			<td><input type="button" name="4" value="4" id="n4" class="btnNum" /></td>
			<td><input type="button" name="5" value="5" id="n5" class="btnNum" /></td>
			<td><input type="button" name="6" value="6" id="n6" class="btnNum" /></td>
			<td><input type="button" name="btnmulti" value="*" id="multi"/></td>	
		</tr>
		<tr>
			<td><input type="button" name="1" value="1" id="n1" class="btnNum" /></td>
			<td><input type="button" name="2" value="2" id="n2" class="btnNum" /></td>
			<td><input type="button" name="3" value="3" id="n3" class="btnNum" /></td>
			<td><input type="button" name="btnsub" value="-" id="sub"/></td>

		</tr>
		<tr>
			<td><input type="button" name="dot" value="." id="btndot"/></td>
			<td><input type="button" name="0" value="0" id="n0" class="btnNum" /></td>
			<td><input type="button" name="equal" value="=" id="Equal"/></td>
			<td><input type="button" name="btnsum" value="+" id="Sum"/></td>
		</tr>
		</table>
	</form>

JavaScript

(function(){
	var btnNum = document.getElementsByClassName('btnNum');
	var defaultValue = 0;
	var calculator = function () {
		var display = document.getElementById('display');
		var btnSum = document.getElementById("Sum"); 
		var btnEqual = document.getElementById("Equal"); 	
		for(var i = 0; i<btnNum.length; i++){
			btnNum[i].addEventListener("click", function getNum() {
				number1 = this.value;
				display.innerHTML = number1;	
			});
		}
			
		btnSum.onclick = function addDigit() {
			temp = display.innerHTML;
		};

		btnEqual.onclick = function sum() {
			if(temp.length > 0){
				temp1 = parseFloat(temp) + parseFloat(temp);  
			}
			temp2 = parseFloat(temp1) + parseFloat(temp);
			display.innerHTML = parseFloat(temp) + parseFloat(number1);
		}
	}
	
	
	calculator();


})();