Calculate
March 05, 2025
0
### HTML (index.html)
```html
Calculator
```
### CSS (styles.css)
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: 100%;
height: 40px;
text-align: right;
font-size: 24px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 50px;
font-size: 18px;
}
```
### JavaScript (script.js)
```javascript
function appendToResult(value) {
document.getElementById("result").value += value;
}
function clearResult() {
document.getElementById("result").value = '';
}
function calculateResult() {
const resultField = document.getElementById("result");
try {
resultField.value = eval(resultField.value);
} catch (error) {
resultField.value = 'Error';
}
}
```
