.calculator {
width: 300px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type=”text”] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 18px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}

button {
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #f0f0f0;
}
function appendToDisplay(value) {
document.getElementById(‘display’).value += value;
}

function clearDisplay() {
document.getElementById(‘display’).value = ”;
}

function calculate() {
let expression = document.getElementById(‘display’).value;
let result = eval(expression);
document.getElementById(‘display’).value = result;
}