p3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Program3</title>
    <style>
        button{
            height: 50px;
            width: 50px;
            text-align: center;
            background-color: green;
        }
        button:hover{
            background-color: lightgreen;
        }
    </style>
</head>
<body bgcolor=#ffdead>
    <table bgcolor="white" border="1" cellspacing="5" cellpadding="15" width="700px">
        <tr align="center">
            <th>First Number</th>
            <th>Second Number</th>
            <th>Result</th>
        </tr>
        <tr align="center">
            <td><input type=text id=num1></td>
            <td><input type=text id=num2></td>
            <td><input type=text id=result></td>

        </tr>
        <tr>
            <td colspan="3">
                <button onclick="showresult('1')">+</button>
                <button onclick="showresult('2')">-</button>
                <button onclick="showresult('3')">*</button>
                <button onclick="showresult('4')">/</button>
                <button onclick="clr()">Clear</button>
            </td>
        </tr>
    </table>
    <script>
       function clr(){
        num1.value="";
        num2.value="";
        result.value="";
       }
       function showresult(choice){
        var n1=parseFloat(document.getElementById("num1").value);
        var n2=parseFloat(document.getElementById("num2").value);
        var r;
        var c=choice;
        switch(c){
            case '1':r=n1+n2;
            break;
            case '2':r=n1-n2;
            break;
            case '3':r=n1*n2;
            break;
            case '4':r=n1/n2;
            break;
            default:break;

        }
        document.getElementById("result").value=r;
       }
    </script>
</body>
</html>