DevMarieta/simple-calculator

simple calculator

<title>Калкулатор</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; }

    .calculator {
        width: 300px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        padding: 20px;
    }

    .display {
        text-align: right;
        margin-bottom: 10px;
    }

    #result {
        width: 100%;
        height: 40px;
        font-size: 20px;
    }

    .buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    button {
        width: 100%;
        padding: 10px;
        font-size: 18px;
        cursor: pointer;
    }

    .clear {
        grid-column: span 2;
    }
</style>

C 7 8 9 + 4 5 6 - 1 2 3 * 0 . = /

<script> let displayValue = '';

    function appendToDisplay(value) {
        displayValue += value;
        document.getElementById('result').value = displayValue;
    }

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

    function calculate() {
        try {
            const result = eval(displayValue);
            document.getElementById('result').value = result;
            displayValue = result.toString();
        } catch (error) {
            document.getElementById('result').value = 'Error';
            displayValue = '';
        }
    }
</script>