86 views
HTML Calculator
Here’s an example of a simple calculator implemented in HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.calculator {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
}
.calculator input {
width: 100%;
margin-bottom: 10px;
}
.calculator button {
width: 48%;
margin: 5px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="appendOperator('/')">/</button>
<button onclick="calculate()">=</button>
</div>
<script>
var display = document.getElementById('display');
var calculation = '';
function appendNumber(number) {
calculation += number;
display.value = calculation;
}
function appendOperator(operator) {
calculation += operator;
display.value = calculation;
}
function calculate() {
try {
var result = eval(calculation);
display.value = result;
calculation = '';
} catch (error) {
display.value = 'Error';
}
}
function clearDisplay() {
calculation = '';
display.value = '';
}
</script>
</body>
</html>This code creates a basic calculator interface with a display input field and buttons for numbers, operators, and the equals sign. JavaScript functions are used to handle button clicks, append numbers and operators to the calculation, perform the calculation, and clear the display.