JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div id="main"><div class="keys"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>.</span><span>=</span><span class="operator">+</span><span class="operator">-</span><span class="operator">x</span><span class="operator">/</span><span>C</span><div class="window"></div></div></div>

CSS

#main {
	margin: 1px;
	padding: 1px;
	height: 520px;
	width: 400px;
	border: thin solid #9C3;
	position: absolute;
	left: 300px;
	top: 200px;
	background-color: #99CCCC;
}
.keys span{
	font-family: "Courier New", Courier, monospace;
	font-size: 48px;
	font-style: normal;
	font-weight: bold;
	color: #F03;
	background-color: #000;
	letter-spacing: 0em;
	text-align: center;
	word-spacing: 2em;
	padding: 7px;
	display: inline-block;
	margin: 17px;
	float: none;
	height: auto;
	width: 50px;
	border: thin dotted #0C6;
}
.window {
	background-color: #CFC;
	height: 50px;
	width: 250px;
	float: right;
	display: inline;
	margin-top: 30px;
	padding-right: 0px;
	margin-right: 30px;
}

JavaScript

var keys = document.querySelectorAll('.keys span');
var operators = ['+', '-', 'x', '÷'];
var inputVal ="";
// Add onclick event to all the keys and perform operations
for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function(e) {
        inputVal += e.target.innerHTML;
        document.getElementsByClassName("window").item(0).innerHTML=inputVal; 
    }
}