Here is an example HTML code for a basic scientific calculator:
```
<!DOCTYPE html>
<html>
<head>
<title>Scientific Calculator</title>
<style>
.calculator {
width: 300px;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
font-family: Arial, sans-serif;
}
.calculator input {
width: 100%;
font-size: 20px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.calculator button {
width: 50%;
font-size: 20px;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
box-sizing: border-box;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
.calculator button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<button onclick="clearResult()">C</button>
<button onclick="backspace()">←</button>
<button onclick="insert('*')">x</button>
<button onclick="insert('/')">÷</button>
<button onclick="insert('7')">7</button>
<button onclick="insert('8')">8</button>
<button onclick="insert('9')">9</button>
<button onclick="insert('-')">-</button>
<button onclick="insert('4')">4</button>
<button onclick="insert('5')">5</button>
<button onclick="insert('6')">6</button>
<button onclick="insert('+')">+</button>
<button onclick="insert('1')">1</button>
<button onclick="insert('2')">2</button>
<button onclick="insert('3')">3</button>
<button onclick="insert('%')">%</button>
<button onclick="insert('0')">0</button>
<button onclick="insert('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="insert('(')">(</button>
<button onclick="insert(')')">)</button>
<button onclick="insert('^')">x<sup>y</sup></button>
<button onclick="insert('Math.sqrt(')">√</button>
<button onclick="insert('Math.sin(')">sin</button>
<button onclick="insert('Math.cos(')">cos</button>
<button onclick="insert('Math.tan(')">tan</button>
</div>
<script>
function insert(char) {
document.getElementById('result').value += char;
}
function clearResult() {
document.getElementById('result').value = '';
}
function backspace() {
var result = document.getElementById('result').value;
document.getElementById('result').value = result.substring(0, result.length - 1);
}
function calculate() {
var result = document.getElementById('result').value;
try {
document.getElementById('result').value = eval(result);
} catch (error) {
document.getElementById('result').value = 'Error';
}
}
</script>
</body>
</html>
```
This code defines four functions:
- `insert(char)`: Appends the given character to the end of the calculator's input field.
- `clearResult()`: Clears the calculator's input field.
- `backspace()`: Removes the last character from the calculator's input field.
- `calculate()`: Evaluates the expression in the calculator's input field using the `eval()` function, and displays the result in the input field. If there is an error evaluating the expression, the input field displays the string "Error".
Note that using the `eval()` function can be potentially dangerous if the input is not properly sanitized, as it can execute arbitrary code. This example is meant for educational purposes only and should not be used in a production environment.
No comments:
Post a Comment