Как создать калькулятор похожий на тот что используется в Windows?

Question

Pavel_Proca @Pavel_Proca

Как создать калькулятор похожий на тот что используется в Windows?

Нужно сделать так что если entered_number является +, -, *, / то он должен запускать функцию которая сделает так что бы цифры в поле ввода оставались теми же, а следующея нажатая цифра очистила поле rezult и заняла место в нём. Работать калькулятор должен, примерно, как калькулятор в windows.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="script.js"></script>
	<title>Date/Time 00</title>
</head>
<body>
	

	<div class="wrapper">
		<form>
			<input type="text" id="rezult" readonly>
			<input type="text" id="hid-rezult">
			<div class="marginator"></div>
			<input type="button" id="but_0" value="0" onClick="valera(0)">
			<input type="button" id="but_1" value="1" onClick="valera(1)">
			<input type="button" id="but_2" value="2" onClick="valera(2)">
			<input type="button" id="but_3" value="3" onClick="valera(3)">
			<input type="button" id="but_4" value="4" onClick="valera(4)">
			<input type="button" id="but_5" value="5" onClick="valera(5)">
			<input type="button" id="but_6" value="6" onClick="valera(6)">
			<input type="button" id="but_7" value="7" onClick="valera(7)">
			<input type="button" id="but_8" value="8" onClick="valera(8)">
			<input type="button" id="but_9" value="9" onClick="valera(9)">
			<input type="button" id="but_dot" value="." onClick="valera('.')">
			<input type="button" id="but_add" value="+" onClick="valera('+')">
			<input type="button" id="but_ded" value="-" onClick="valera('-')">
			<input type="button" id="but_mult" value="x" onClick="valera('*')">
			<input type="button" id="but_div" value="/" onClick="valera('/')">
			<input type="button" id="but_div" value="C" onClick="valera('C')">
			<input type="button" id="but_eq" value="=" onClick="evaluation()">
		</form>
	</div>
</body>
</html>

function valera(entered_number) {

	if(entered_number === 'C') {
		document.getElementById('rezult').value = '';
		document.getElementById('hid-rezult').value = '';
	}

	else if(entered_number === '+' || entered_number === '-' || entered_number === '*' || entered_number === '/') {
		document.getElementById('rezult').value = '';
		document.getElementById('hid-rezult').value += entered_number;
	}

	else {
		document.getElementById('rezult').value += entered_number;
		document.getElementById('hid-rezult').value += entered_number;
	};

};

function evaluation() {

	var opp = eval(document.getElementById('hid-rezult').value);
	document.getElementById('rezult').value = opp;
	document.getElementById('hid-rezult').value = opp;

};

* {
	margin: 0;
	padding: 0;
}

#rezult {
	display: block;
	width: 100%;
	height: 30px;
	padding: 0 10px;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 16px;
	cursor: default;
}

#hid-rezult {
	display: none;
}

.wrapper {
	width: 30%;
	display: block;
	margin: 100px auto;
	padding: 20px 10px;
	box-sizing: border-box;
	overflow: auto;
	border-radius: 10px;
	background: #1ac3d7;
	text-align: center;
	color: #fff;
	cursor: default;
	transition: linear 2s;
}

input {
	width: 20%;
	height: 30px;
	margin: 5px 5px;
	display: inline-block;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
}

.marginator {
	width: 100%;
	height: 15px;
}

#but_eq {
	width: 100%;
}