Calculator Program

html

<div id="calculator">
	<input id="display" type="text" readonly>
	<div id="keys">
		<button onclick="appendToDisplay('+')" class="operator-btn">+</button>
		<button onclick="appendToDisplay('7')">7</button>
		<button onclick="appendToDisplay('8')">8</button>
		<button onclick="appendToDisplay('9')">9</button>
		<button onclick="appendToDisplay('-')" class="operator-btn">-</button>
		<button onclick="appendToDisplay('4')">4</button>
		<button onclick="appendToDisplay('5')">5</button>
		<button onclick="appendToDisplay('6')">6</button>
		<button onclick="appendToDisplay('*')" class="operator-btn">*</button>
		<button onclick="appendToDisplay('1')">1</button>
		<button onclick="appendToDisplay('2')">2</button>
		<button onclick="appendToDisplay('3')">3</button>
		<button onclick="appendToDisplay('/')" class="operator-btn">/</button>
		<button onclick="appendToDisplay('0')">0</button>
		<button onclick="appendToDisplay('.')">.</button>
		<button onclick="calculate()">=</button>
		<button onclick="clearDisplay()" class="operator-btn">C</button>
	</div>
</div>

js

const display = document.getElementById("display");  
 
function appendToDisplay(input){
	display.value += input;
}
 
function clearDisplay(){
	display.value = "";
}
 
function calculate(){
	try{
	display.value = eval(display.value)
	}
	catch(error){
	display.value = "Error"
	}
}

css

body{
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: hsl(0, 0%, 95%);
}
 
#calculator{
	font-family: Arial, Helvetica, sans-serif;
	background-color: hsl(0, 0%, 15%);
	border-radius: 15px;
	min-width: 500px;
	overflow: hidden;
}
 
#display{
	width: 100%;
	padding: 20px;
	font-size: 5rem;
	text-align: left;
	border: none;
	background-color: hsl(0, 0%, 20%);
	color: white;
}  
 
#keys{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding: 25px;
}
 
button{
	width: 100px;
	height: 100px;
	border-radius: 50px;
	border: none;
	background-color: hsl(0, 0%, 30%);
	color: white;
	font-size: 3rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 100ms; 
}
 
button:hover{
	background-color: hsl(0, 0%, 40%);
}
 
button:active{
	background-color: hsl(0, 0%, 50%);
}
 
.operator-btn{
	background-color: hsl(35, 100%, 55%);
}
 
.operator-btn:hover{
	background-color: hsl(35, 100%, 65%);
}
 
.operator-btn:active{
	background-color: hsl(35, 100%, 75%);
}