CodePen - Live Editor

*{
box-sizing: border-box;
				
}
				
				
html{
	font-size: 10px;
}	
body{
	font-size: 12px;
}
.calculator{
	border: 2px solid;
	border-radius: 5px;
	width: 400px;
	position:absolute;
	left: 30%;
	margin-top: 30px;
}
.calculator-input{
	width: 100%;
	font-size: 40px;
	height: 70px;
	border: none;
	background-color: #252525;
	color: #fff;
	text-align: right;
	padding-left: 20px;
	padding-right: 20px;
}
	
button{
	height: 50px;
	background-color:#fff;
	border-radius: 3px;
	border: 3px solid black;
	background-color:transparent;
	font-size: 25px;
	color: black;
}	
.calculator-keys{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-gap: 20px;
	padding: 20px;
}	
button:hover{
	background-color: #eaeaea;
	border-color: black;
}	
.operator{
	background-color:red;
	color: azure;
}	
.operator:hover{
	background-color:azure;
	color: red;
}		
.clear{
	background-color: #f0595f;
	color: #ffff;
}	
.clear:hover{
		 background-color: #f17377;
}	
.equal-sign{
	background-color:#4e9ed4;
	color: wheat;
	height: 100%;
	grid-area: 2/4/6/5;
}	
.equal-sign:hover{
	background-color:#2e86c0;
}

const display = document.querySelector('.calculator-input');
const keys = document.querySelector('.calculator-keys');

let displayValue = '0';
let firstValue = null;
let operator = null;
let waitingForSecondValue = false;

updateDisplay();

function updateDisplay() {
	display.value = displayValue; 
}

keys.addEventListener('click' , function(e){
	const element = e.target;

if (!element.matches('button')) return;

if(element.classList.contains('operator')) {
	//console.log('operator', element.value); 
	handleOperator(element.value);
	updateDisplay();
	return;
}

if(element.classList.contains('decimal')) {
	//console.log('decimal', element.value); 
	inputDecimal();
	updateDisplay();
	return;
}

if(element.classList.contains('clear')) {
	clear();
	updateDisplay();
	return;
}

// console.log('number', element.value); 
inputNumber(element.value);
updateDisplay();
});

function handleOperator(nextOperator) {
	const value = parseFloat(displayValue);

if(operator && waitingForSecondValue){ operator = nextOperator; return; }

if (firstValue === null) {
		firstValue = value; 
	} else if (operator) {
		const result = calculate(firstValue, value, operator);

displayValue = String(result);
		firstValue = result;
	}

waitingForSecondValue = true; 
	operator = nextOperator;
	console.log(displayValue, firstValue, operator, waitingForSecondValue);
}

function calculate(first, second, operator) {
	if (operator === '+') {
		return first + second;
	}
	else if (operator === '-'){
			  return first - second; 
	}

else if (operator === '*'){
			  return first * second; 
	}

else if (operator === '/'){
			  return first / second; 
	}
	return second;
}

function inputNumber(num) {
		if(waitingForSecondValue) {
			displayValue = num;
			waitingForSecondValue = false;
		} else{

displayValue = displayValue === '0'? num: displayValue + num ;
	}

console.log(displayValue, firstValue, operator, waitingForSecondValue);
}
function inputDecimal() {
	if (!displayValue.includes('.')){
		displayValue += '.';
	}
}

function clear() {
	displayValue = '0';
}