JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div id='grid'>
  <table>
	<tr>
		<td id="1" onclick='type1()'>1</td>
		<td id="2" onclick='type2()'>2</td>
		<td id="3" onclick='type3()'>3</td>
	</tr>
    <tr>
		<td id="=" onclick='equals()'>=</td>
		<td id="+" onclick='type_plus()'>+</td>
		<td id="-" onclick='type_minus()'>-</td>
	</tr>
	<tr>
		<td id="times" onclick='times()'>X</td>
		<td id="clear" onclick='clear_line()'>C</td>
		<td id="divide" onclick='divide()'>%</td>
	</tr>
   </table>
   </div>
   <div id="result">
	<b></b>
   </div>

CSS

#grid{
				height:510px;
				width:260px;
				background-color:blue;
				color:white;
				border-collapse:collapse;
				border:10px solid black;
				float:left;
				margin-right:10px;
				
			}
#result{
				float:right;
				height:525px;
				width:950px;
				background-color:white;
				border:2px solid black;
				text-align:right;
				font-size:45px;
				font-family:courier;
				font-weight:strong;
			}
td{
				padding:30px;
				font-size:40px;
				size:400%;
				font-family:courier;
				font-weight:bold;
			}

JavaScript

var resultline_str = " ";
var multidigit = 0;
var space = 0;
var operating = [];
			
			function type1(){
				resultline_str += " 1";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(1);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '1';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '1';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type2(){
				resultline_str += " 2";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(2);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '2';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '2';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
			
			function type3(){
				resultline_str += " 3";
				document.getElementById('result').innerHTML = resultline_str;
				if(multidigit === 0){
					operating.push(3);
					multidigit = 1;
				}else{
					if(space === 0){
						var n = operating[0]
						n = operating[0].toString();
						n += '3';
						n = parseInt(n);
						operating[0] = n;
					}else{
						var n = operating[2]
						n = operating[2].toString();
						n += '3';
						n = parseInt(n);
						operating[2] = n;
					};
				};
			};
            function type_plus(){
				resultline_str += " +";
				document.getElementById('result').innerHTML = resultline_str;
				operating.push('+');
				multidigit = 0;
				place = 2;
			};
			
			function type_minus(){
				resultline_str += " -";
				document.getElementById('result').innerHTML = resultline_str;
				operating.push('-');
				multidigit = 0;
				place =...