Calculator
```
CSS (in style.css file)
```
body {
font-family: Arial, sans-serif;
}
.calculator {
width: 250px;
margin: 50px auto;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#display {
width: 100%;
height: 40px;
font-size: 24px;
font-weight: bold;
text-align: right;
padding: 10px;
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.button {
width: 55px;
height: 55px;
font-size: 18px;
font-weight: bold;
margin: 5px;
border: none;
border-radius: 10px;
background-color: #fff;
cursor: pointer;
}
.button:hover {
background-color: #ccc;
}
```
JavaScript (in script.js file)
```
let display = document.getElementById('display');
let expression = '';
function append(char) {
if (char === '=') {
try {
expression = eval(expression);
display.value = expression;
} catch (e) {
display.value = 'Error';
}
} else {
expression += char;
display.value = expression;
}
}
function clearDisplay() {
expression = '';
display.value = '';
}
function backspace() {
expression = expression.slice(0, -1);
display.value = expression;
}
```
