js_task3.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Task 3</title>
    <style>
        body {
            display: grid;
            place-content: center;
        }
        .box {
            border-radius: 3px;
            padding: 12px;
            min-width: fit-content;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="num1">1st Number:</label>
        <input type="number" name="num1" id='num1' placeholder="Enter the first number" required>
        <br>
        <label for="num2">2nd Number:</label>
        <input type="number" name="num2" id="num2" placeholder="Enter the second number" required>
        <br>
        <button onclick="multiply()">Multiply</button>
        <button onclick="divide()">Divide</button>
        <br>
        <label for="output">The result is:</label>
        <br>
        <p id="output">0</p>
    </div>
    <script>
        const num1Elem = document.getElementById('num1');
        const num2Elem = document.getElementById('num2');
        const outputElem = document.getElementById('output');
        const multiply = ()=> {
            const num1 = parseInt(num1Elem.value)
            const num2 = parseInt(num2Elem.value)
            let res = num1 * num2;
            outputElem.innerText = res;
        }
        const divide = ()=> {
            const num1 = parseInt(num1Elem.value)
            const num2 = parseInt(num2Elem.value)
            let res = num1 / num2;
            outputElem.innerText = res;
        }
    </script>
</body>
</html>