Embedded Files
Code
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Calculator</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
background-color: #f4f4f4;
padding: 20px;
}
.calculator {
width: 300px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
input, .buttons {
width: 90%;
padding: 10px;
font-size: 18px;
text-align: right;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
input {
font-weight: bold;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
button {
padding: 15px;
font-size: 18px;
background-color: #f0f0f0;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ddd;
}
.result {
font-size: 24px;
font-weight: bold;
color: #333;
margin-top: 10px;
}
.history {
margin-top: 20px;
font-size: 14px;
color: #777;
}
</style>
</head>
<body>
<h2>Real-Time Calculator</h2>
<div class="calculator">
<input type="text" id="expression" placeholder="Type here..." oninput="calculate()" onkeydown="handleKey(event)">
<div class="buttons">
<button onclick="appendToExpression('1')">1</button>
<button onclick="appendToExpression('2')">2</button>
<button onclick="appendToExpression('3')">3</button>
<button onclick="appendToExpression('+')">+</button>
<button onclick="appendToExpression('4')">4</button>
<button onclick="appendToExpression('5')">5</button>
<button onclick="appendToExpression('6')">6</button>
<button onclick="appendToExpression('-')">-</button>
<button onclick="appendToExpression('7')">7</button>
<button onclick="appendToExpression('8')">8</button>
<button onclick="appendToExpression('9')">9</button>
<button onclick="appendToExpression('*')">*</button>
<button onclick="appendToExpression('0')">0</button>
<button onclick="appendToExpression('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToExpression('/')">/</button>
<button onclick="appendToExpression('(')">(</button>
<button onclick="appendToExpression(')')">)</button>
<button onclick="clearExpression()">C</button>
</div>
<div class="result" id="result">= 0</div>
<div class="history" id="history"></div>
</div>
<script>
let expression = "";
let history = [];
function appendToExpression(value) {
expression += value;
document.getElementById("expression").value = expression;
calculate();
}
function calculate() {
let resultBox = document.getElementById("result");
let historyBox = document.getElementById("history");
try {
if (expression.trim() === "") {
resultBox.innerText = "= 0";
return;
}
// Validate input to allow only safe characters
if (!/^[-+*/()\d.\s]+$/.test(expression)) {
throw new Error("Invalid characters");
}
// Insert implicit multiplication (e.g., 2(3) -> 2*(3), (2)(3) -> (2)*(3)
let sanitizedExpression = expression.replace(/(\d)\(/g, '$1*(').replace(/\)(\d)/g, ')*$1').replace(/\)\(/g, ')*(');
// Evaluate expression safely
let result = new Function('return ' + sanitizedExpression)();
// Display result
resultBox.innerText = "= " + result;
// Add calculation to history
history.push(`${expression} = ${result}`);
displayHistory();
} catch (error) {
resultBox.innerText = "= Error";
}
}
function displayHistory() {
let historyBox = document.getElementById("history");
historyBox.innerHTML = "<strong>History:</strong><br>" + history.join("<br>");
}
function handleKey(event) {
// Allow typing numbers, operators, parentheses, and other valid characters
const validKeys = /[0-9+\-*/().\b]/;
if (validKeys.test(event.key)) {
if (event.key === "Backspace") {
expression = expression.slice(0, -1); // Remove last character
} else if (event.key === "Enter") {
calculate();
} else {
expression += event.key;
}
document.getElementById("expression").value = expression;
calculate();
} else if (event.key === "Escape") {
clearExpression(); // Clear expression on Escape key
}
}
function clearExpression() {
expression = "";
document.getElementById("expression").value = expression;
calculate();
}
</script>
</body>
</html>
C = clear
Brackets added :)
Page updated
Report abuse