HTML CSS JS CODE Form with Basic Arithmetic Operations

Posted on by admin 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arithmetic Operations</title>
</head>
<body>
    <form>
        <input type="number" id="num1" placeholder="Enter first number">
        <input type="number" id="num2" placeholder="Enter second number">
        <select id="operation">
            <option value="add">Add</option>
            <option value="subtract">Subtract</option>
            <option value="multiply">Multiply</option>
            <option value="divide">Divide</option>
        </select>
        <button type="button" onclick="calculate()">Calculate</button>
    </form>
    <div id="result">Result: </div>

    <script>
        function calculate() {
            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
            const operation = document.getElementById('operation').value;
            let result;

            switch(operation) {
                case 'add': result = num1 + num2; break;
                case 'subtract': result = num1 - num2; break;
                case 'multiply': result = num1 * num2; break;
                case 'divide': result = num1 / num2; break;
            }
            document.getElementById('result').textContent = 'Result: ' + result;
        }
    </script>
</body>
</html>
JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *


error: Content is protected !!
Scroll to Top
MacroNepal
Verified by MonsterInsights