arithmetic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arithmatic</title>
    <link rel="stylesheet" href="style.css">

    <script>
        function calc() {
            var n1 = parseInt(document.getElementById("n1").value);
            var n2 = parseInt(document.getElementById("n2").value);
            var oper = document.getElementById("operation").value;
           
            

            if (oper === 'add'){
                var n2 = document.getElementById("result").value = n1 + n2;
            }

            if (oper === 'sub'){
                var n2 = document.getElementById("result").value = n1 - n2;
            }

            if (oper === 'mul'){
                var n2 = document.getElementById("result").value = n1 * n2;
            }

            if (oper === 'div'){
                var n2 = document.getElementById("result").value = n1 / n2;
            }
        }
    </script>
</head>
<body>
    <label>Enter First Number:</label>
    <input type="text" id="n1"></br> <br>
    <label>Enter Second Number:</label>
    <input type="text" id="n2"> </br> <br>
    <label>add/sub/mul/div:</label>
    <input type="text" id="operation"> </br> <br>
    

    <!-- <select name="" id="operation">
        <option value="add">Add</option>
        <option value="sub">Sub</option>
        <option value="mul">Mul</option>
        <option value="div">Div</option>
    </select> -->
    <button onclick="calc();">=</button>
    <input type="text" id="result">
    

    <!-- <div class="container">
        <input type="number" id="firstInput">
        <input type="number" id="secondInput">
        <button>Mul.</button>
        <h1>Result</h1>
    </div> -->

    <script src="script.js"></script>
</body>
</html>