Sure! I can provide you with a basic example of a calculator website using HTML, CSS, and JavaScript in separate files. Here's how you can set it up:
1. HTML File (index.html):
```html
Calculator
```
2. CSS File (styles.css):
```css
.calculator {
width: 200px;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
.calculator input[type="text"] {
width: 100%;
margin-bottom: 10px;
padding: 5px;
}
.calculator .buttons button {
width: 48%;
padding: 10px;
margin: 2px;
font-size: 18px;
}
.calculator .buttons button:last-child {
width: 100%;
}
```
3. JavaScript File (script.js):
```javascript
function appendValue(value) {
var result = document.getElementById('result');
result.value += value;
}
function clearResult() {
var result = document.getElementById('result');
result.value = '';
}
function calculate() {
var result = document.getElementById('result');
var expression = result.value;
try {
var calculatedValue = eval(expression);
result.value = calculatedValue;
} catch (error) {
result.value = 'Error';
}
}
```
Save the HTML code in an "index.html" file, the CSS code in a "styles.css" file, and the JavaScript code in a "script.js" file. Place all three files in the same directory.
Now, if you open the "index.html" file in a web browser, you should see a basic calculator interface. You can perform basic arithmetic operations by clicking the buttons. The result will be displayed in the input field.
Please note that using the `eval()` function to evaluate the expression is not recommended in production environments due to security concerns. This example is provided for simplicity and learning purposes. In a real-world scenario, you would implement a safer and more robust way to calculate expressions.