<!DOCTYPE html>
<html>
<body style="font-family:Arial;padding:20px;background:#f0f4f8;text-align:center">
    <h2>Kalkulyator</h2>
    <input type="number" id="a" placeholder="Son 1" style="padding:10px;width:100px;border-radius:8px;border:2px solid #ddd;font-size:18px">
    <select id="op" style="padding:10px;border-radius:8px;border:2px solid #ddd;font-size:18px">
        <option>+</option><option>-</option><option>*</option><option>/</option>
    </select>
    <input type="number" id="b" placeholder="Son 2" style="padding:10px;width:100px;border-radius:8px;border:2px solid #ddd;font-size:18px">
    <button onclick="hisoblash()" style="padding:10px 25px;background:#27AE60;color:white;border:none;border-radius:8px;font-size:18px;cursor:pointer">=</button>
    <div id="natija" style="margin-top:20px;font-size:36px;font-weight:800;color:#1B3A5C"></div>

    <script>
        // Oddiy funksiya
        function qoshish(a, b) { return a + b; }
        function ayirish(a, b) { return a - b; }

        // Arrow funksiya
        const kopaytirish = (a, b) => a * b;
        const bolish = (a, b) => b !== 0 ? a / b : 'Nolga bo\'lish mumkin emas!';

        function hisoblash() {
            let a = Number(document.getElementById('a').value);
            let b = Number(document.getElementById('b').value);
            let op = document.getElementById('op').value;
            let natija;

            switch(op) {
                case '+': natija = qoshish(a, b); break;
                case '-': natija = ayirish(a, b); break;
                case '*': natija = kopaytirish(a, b); break;
                case '/': natija = bolish(a, b); break;
            }
            document.getElementById('natija').textContent = natija;
        }
    </script>
</body>
</html>