Calculator
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.calculator {
background-color: #222;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.display {
grid-column: span 4;
text-align: right;
margin-bottom: 10px;
}
button {
background-color: #444;
color: white;
border: none;
padding: 10px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.2s;
}
button:hover {
background-color: #555;
}
.clear {
grid-column: span 2;
background-color: #ff9800;
}
.calculate {
background-color: #2196f3;
grid-column: span 2;
}
let displayValue = '';
function appendToDisplay(value) {
displayValue += value;
document.getElementById('display').value = displayValue;
}
function clearDisplay() {
displayValue = '';
document.getElementById('display').value = '';
}
function calculate() {
try {
displayValue = eval(displayValue);
document.getElementById('display').value = displayValue;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
br<
br<
No comments:
Post a Comment