Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        .calculator {
            border: 2px solid #ccc;
            padding: 20px;
            border-radius: 10px;
            background-color: white;
        }
        .calculator input, .calculator button {
            padding: 10px;
            margin: 5px;
            font-size: 18px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .calculator button {
            background-color: #f0f0f0;
            cursor: pointer;
        }
        .calculator button:hover {
            background-color: #ddd;
        }
        .output {
            width: 200px;
            text-align: right;
            font-size: 24px;
            height: 40px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="calculator">
    <div class="output" id="output">0</div>
    <div>
        <button onclick="appendNumber(7)">7</button>
        <button onclick="appendNumber(8)">8</button>
        <button onclick="appendNumber(9)">9</button>
        <button onclick="setOperation('+')">+</button>
    </div>
    <div>
        <button onclick="appendNumber(4)">4</button>
        <button onclick="appendNumber(5)">5</button>
        <button onclick="appendNumber(6)">6</button>
        <button onclick="setOperation('-')">-</button>
    </div>
    <div>
        <button onclick="appendNumber(1)">1</button>
        <button onclick="appendNumber(2)">2</button>
        <button onclick="appendNumber(3)">3</button>
        <button onclick="setOperation('*')">*</button>
    </div>
    <div>
        <button onclick="appendNumber(0)">0</button>
        <button onclick="clearOutput()">C</button>
        <button onclick="calculate()">=</button>
        <button onclick="setOperation('/')">/</button>
    </div>
</div>

<script>
    let currentInput = '';
    let previousInput = '';
    let operation = null;

    function appendNumber(number) {
        currentInput += number;
        updateOutput();
    }

    function clearOutput() {
        currentInput = '';
        previousInput = '';
        operation = null;
        updateOutput();
    }

    function setOperation(op) {
        if (currentInput === '') return;
        if (previousInput !== '') {
            calculate();
        }
        operation = op;
        previousInput = currentInput;
        currentInput = '';
    }

    function calculate() {
        let result;
        const prev = parseFloat(previousInput);
        const current = parseFloat(currentInput);

        if (isNaN(prev) || isNaN(current)) return;

        switch (operation) {
            case '+':
                result = prev + current;
                break;
            case '-':
                result = prev - current;
                break;
            case '*':
                result = prev * current;
                break;
            case '/':
                if (current === 0) {
                    result = 'Error';
                } else {
                    result = prev / current;
                }
                break;
            default:
                return;
        }

        currentInput = result.toString();
        operation = null;
        previousInput = '';
        updateOutput();
    }

    function updateOutput() {
        document.getElementById('output').textContent = currentInput || '0';
    }
</script>

</body>
</html>
Editor is loading...