kalkulator

<!DOCTYPE html>
<html>
<head>
    <title>Kalkulator</title>
    <style>
        .calculator {
            width: 250px;
            margin: 0 auto;
            padding: 40px;
            border: 1px solid #ccc;
            border-radius: 4px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
        .calculator input[type="text"] {
            grid-column: 1 / span 3;
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            font-size: 18px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .calculator input[type="button"] {
            width: 100%;
            padding: 10px;
            font-size: 18px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <input type="button" value="1" onclick="appendToResult('1')">
        <input type="button" value="2" onclick="appendToResult('2')">
        <input type="button" value="3" onclick="appendToResult('3')">
        <input type="button" value="4" onclick="appendToResult('4')">
        <input type="button" value="5" onclick="appendToResult('5')">
        <input type="button" value="6" onclick="appendToResult('6')">
        <input type="button" value="7" onclick="appendToResult('7')">
        <input type="button" value="8" onclick="appendToResult('8')">
        <input type="button" value="9" onclick="appendToResult('9')">
        <input type="button" value="0" onclick="appendToResult('0')">
        <input type="button" value="C" onclick="clearResult()">
        <input type="button" value="+" onclick="appendToResult('+')">
        <input type="button" value="-" onclick="appendToResult('-')">
        <input type="button" value="*" onclick="appendToResult('*')">
        <input type="button" value="=" onclick="calculateResult()">
        <input type="button" value="/" onclick="appendToResult('/')">
    </div>

    <script>
        function appendToResult(value) {
            document.getElementById('result').value += value;
        }

        function clearResult() {
            document.getElementById('result').value = '';
        }

        function calculateResult() {
            var result = eval(document.getElementById('result').value);
            document.getElementById('result').value = result;
        }
    </script>
</body>
</html>