.calculator-container {
width: 320px;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background-color: #f4f4f4;
}
.calculator-header {
text-align: center;
padding: 10px;
background-color: #0093da;
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.button-container {
display: flex;
justify-content: space-between;
padding: 10px;
}
.calc-button {
width: 70px;
height: 70px;
font-size: 24px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.calc-button:hover {
background-color: #f1f1f1;
}
.calc-button-equal {
width: 100%;
height: 70px;
font-size: 24px;
background-color: #0093da;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}
.calc-button-equal:hover {
background-color: #007bb5;
}
.calculator-display {
padding: 10px;
text-align: center;
}
#display {
width: 100%;
height: 50px;
font-size: 32px;
text-align: right;
padding: 10px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
}
let currentInput = ”;
const buttons = document.querySelectorAll(‘.calc-button’);
const display = document.getElementById(‘display’);
buttons.forEach(button => {
button.addEventListener(‘click’, () => {
const value = button.textContent;
if (value === ‘C’) {
currentInput = ”;
} else {
currentInput += value;
}
display.value = currentInput;
});
});
document.querySelector(‘.calc-button-equal’).addEventListener(‘click’, () => {
try {
currentInput = eval(currentInput).toString();
} catch (e) {
currentInput = ‘Error’;
}
display.value = currentInput;
});
