Keywords: Scientific calculator, mathematical calculations, scientific functions, versatile tool, complex operations, engineering, mathematics.
Save the HTML code in a file named calculator.html, the CSS code in a file named styles.css, and the JavaScript code in a file named script.js. Make sure to place all three files in the same directory.
When you open the calculator.html file in a web browser, you'll see the scientific calculator with the provided functions. The display at the top allows you to enter and view the input and results. The calculator supports basic arithmetic operations (+, -, *, /) as well as functions like square root, logarithm, sine, cosine, and tangent. Pressing the "=" button will evaluate the expression and display the result. The "C" button clears the display, and the "⌫" button deletes the last character entered.
Note: While the code provided is functional, please note that using eval() to evaluate user-inputted expressions can be risky in terms of security. In a production environment, it's recommended to use a safer approach for evaluating expressions
<!DOCTYPE html>
<html>
<head>
<title>Scientific Calculator</title>
<link rel="stylesheet" type="text/css" .calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
.calculator input[type="text"] {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 18px;
}
.calculator table {
width: 100%;
}
.calculator button {
width: 70px;
height: 40px;
margin: 5px;
font-size: 16px;
}
">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<table>
<tr>
<td><button onclick="clearDisplay()">C</button></td>
<td><button onclick="deleteChar()">⌫</button></td>
<td><button onclick="appendChar('/')">/</button></td>
<td><button onclick="appendChar('*')">x</button></td>
</tr>
<tr>
<td><button onclick="appendChar('7')">7</button></td>
<td><button onclick="appendChar('8')">8</button></td>
<td><button onclick="appendChar('9')">9</button></td>
<td><button onclick="appendChar('-')">-</button></td>
</tr>
<tr>
<td><button onclick="appendChar('4')">4</button></td>
<td><button onclick="appendChar('5')">5</button></td>
<td><button onclick="appendChar('6')">6</button></td>
<td><button onclick="appendChar('+')">+</button></td>
</tr>
<tr>
<td><button onclick="appendChar('1')">1</button></td>
<td><button onclick="appendChar('2')">2</button></td>
<td><button onclick="appendChar('3')">3</button></td>
<td rowspan="2"><button onclick="calculate()">=</button></td>
</tr>
<tr>
<td colspan="2"><button onclick="appendChar('0')">0</button></td>
<td><button onclick="appendChar('.')">.</button></td>
</tr>
<tr>
<td><button onclick="appendFunction('Math.sqrt')">√</button></td>
<td><button onclick="appendFunction('Math.log10')">log</button></td>
<td><button onclick="appendFunction('Math.sin')">sin</button></td>
<td><button onclick="appendFunction('Math.cos')">cos</button></td>
</tr>
<tr>
<td><button onclick="appendFunction('Math.tan')">tan</button></td>
<td><button onclick="appendFunction('Math.asin')">asin</button></td>
<td><button onclick="appendFunction('Math.acos')">acos</button></td>
<td><button onclick="appendFunction('Math.atan')">atan</button></td>
</tr>
</table>
</div>
<script src="let displayValue = "";
function appendChar(char) {
displayValue += char;
updateDisplay();
}
function appendFunction(func) {
displayValue += func + "(";
updateDisplay();
}
function calculate() {
try {
const result = eval(displayValue);
displayValue = result.toString();
updateDisplay();
} catch (error) {
displayValue = "Error";
updateDisplay();
}
}
function clearDisplay() {
displayValue = "";
updateDisplay();
}
function deleteChar() {
displayValue = displayValue.slice(0, -1);
updateDisplay();
}
function updateDisplay() {
document.getElementById("display").value = displayValue;
}
"></script>
</body>
</html>
No comments:
Post a Comment