18. JavaScript Program for a Simple Calculator.

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Calculator</title>
        <style>
            table {
                border-collapse: collapse;
                margin: 20px 0;
            }
            input[type="text"] {
                width: 100%;
                text-align: right;
                font-size: 1.2em;
                padding: 5px;
                box-sizing: border-box; /* Ensures the input does not overflow */
            }
            input[type="button"] {
                width: 50px;
                height: 50px;
                font-size: 1.1em;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <h3>Simple Calculator</h3>
        <form name="calc">
            <table border="2">
                <tr>
                    <td colspan="4"><input type="text" name="display" readonly></td>
                </tr>
                <tr>
                    <td><input type="button" value="0" onclick="calc.display.value += '0'"></td>
                    <td><input type="button" value="1" onclick="calc.display.value += '1'"></td>
                    <td><input type="button" value="2" onclick="calc.display.value += '2'"></td>
                    <td><input type="button" value="+" onclick="calc.display.value += '+'"></td>
                </tr>
                <tr>
                    <td><input type="button" value="3" onclick="calc.display.value += '3'"></td>
                    <td><input type="button" value="4" onclick="calc.display.value += '4'"></td>
                    <td><input type="button" value="5" onclick="calc.display.value += '5'"></td>
                    <td><input type="button" value="-" onclick="calc.display.value += '-'"></td>
                </tr>
                <tr>
                    <td><input type="button" value="6" onclick="calc.display.value += '6'"></td>
                    <td><input type="button" value="7" onclick="calc.display.value += '7'"></td>
                    <td><input type="button" value="8" onclick="calc.display.value += '8'"></td>
                    <td><input type="button" value="×" onclick="calc.display.value += '*'"></td>
                </tr>
                <tr>
                    <td><input type="button" value="9" onclick="calc.display.value += '9'"></td>
                    <td><input type="button" value="C" onclick="calc.display.value = ''"></td>
                    <td><input type="button" value="=" onclick="try { calc.display.value = eval(calc.display.value) } catch { calc.display.value = 'Error' }"></td>
                    <td><input type="button" value="÷" onclick="calc.display.value += '/'"></td>
                </tr>
            </table>
        </form>
    </body>

    </html>

    

Output

        No Output Available