[xyz-ihs snippet=“kleiner-Taschenrechner“]
<!DOCTYPE html>
<html>
<head>
<title>Taschenrechner LKR</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
max-width: 200px;
margin: 0 auto;
padding: 13px;
border: 1px solid #ccc;
}
.calculator input {
grid-column: span 4;
padding: 15px;
font-size: 18px;
}
.calculator button {
padding: 9px;
font-size: 15px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<button onclick="clearResult()">C</button>
<button onclick="appendValue(7)">7</button>
<button onclick="appendValue(8)">8</button>
<button onclick="appendValue(9)">9</button>
<button onclick="appendValue(4)">4</button>
<button onclick="appendValue(5)">5</button>
<button onclick="appendValue(6)">6</button>
<button onclick="appendValue(1)">1</button>
<button onclick="appendValue(2)">2</button>
<button onclick="appendValue(3)">3</button>
<button onclick="appendValue(0)">0</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendOperator('/')">/</button>
<button onclick="calculate()">=</button>
</div>
<script>
function clearResult() {
document.getElementById('result').value = '';
}
function appendValue(value) {
document.getElementById('result').value += value;
}
function appendOperator(operator) {
document.getElementById('result').value += operator;
}
function calculate() {
var result = eval(document.getElementById('result').value);
document.getElementById('result').value = result;
}
</script>
</body>
</html>
