open_in_new content_copy 
1)<!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>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        input {
            margin: 5px;
        }
        button {
            margin: 5px;
            padding: 10px;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h3>Simple Calculator</h3>
    <div>
        <label for="value1">Value 1 :</label>
        <input type="number" id="value1" />
    </div>
    <div>
        <label for="value2">Value 2 :</label>
        <input type="number" id="value2" />
    </div>
    <div>
        <!-- Ensure the buttons are properly named and events are attached -->
        <button name="add" onclick="add()">ADDITION</button>
        <button name="sub" onclick="sub()">SUBTRACT</button>
        <button name="mul" onclick="mul()">MULTIPLY</button>
        <button name="div" onclick="div()">DIVISION</button>
    </div>
    <div id="result"></div>

    <script>
        // Function to add two numbers
        function add() {
            var value1 = parseFloat(document.getElementById('value1').value);
            var value2 = parseFloat(document.getElementById('value2').value);
            var result = value1 + value2;
            document.getElementById('result').innerHTML = "Addition of " + value1 + " and " + value2 + " is " + result;
        }

        // Function to subtract two numbers
        function sub() {
            var value1 = parseFloat(document.getElementById('value1').value);
            var value2 = parseFloat(document.getElementById('value2').value);
            var result = value1 - value2;
            document.getElementById('result').innerHTML = "Subtraction of " + value1 + " and " + value2 + " is " + result;
        }

        // Function to multiply two numbers
        function mul() {
            var value1 = parseFloat(document.getElementById('value1').value);
            var value2 = parseFloat(document.getElementById('value2').value);
            var result = value1 * value2;
            document.getElementById('result').innerHTML = "Multiplication of " + value1 + " and " + value2 + " is " + result;
        }

        // Function to divide two numbers
        function div() {
            var value1 = parseFloat(document.getElementById('value1').value);
            var value2 = parseFloat(document.getElementById('value2').value);
            if (value2 === 0) {
                document.getElementById('result').innerHTML = "Division by zero is not allowed!";
            } else {
                var result = value1 / value2;
                document.getElementById('result').innerHTML = "Division of " + value1 + " and " + value2 + " is " + result;
            }
        }
    </script>
</body>
</html>

2)<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Count for a Month</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f9f9f9;
        }
        .container {
            margin-top: 50px;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #fff;
            width: 300px;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0px 0px 10px #ccc;
        }
        h2 {
            margin-bottom: 20px;
        }
        table {
            margin-left: auto;
            margin-right: auto;
        }
        td {
            padding: 5px;
        }
        input[type="text"] {
            width: 50px;
            padding: 5px;
        }
        button {
            margin-top: 10px;
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Event count for a month</h2>
    <table>
        <tr>
            <td>Birthday party event</td>
            <td>:</td>
            <td><input type="text" id="event1"></td>
        </tr>
        <tr>
            <td>Engagement parties event</td>
            <td>:</td>
            <td><input type="text" id="event2"></td>
        </tr>
        <tr>
            <td>Corporate event</td>
            <td>:</td>
            <td><input type="text" id="event3"></td>
        </tr>
        <tr>
            <td>Social Gathering event</td>
            <td>:</td>
            <td><input type="text" id="event4"></td>
        </tr>
    </table>
    <button id="button" onclick="maxevent()">Submit</button>
    <div id="result"></div>
</div>

<script>
    function maxevent() {
        // Get the values from the input fields
        var event1 = parseInt(document.getElementById('event1').value) || 0;
        var event2 = parseInt(document.getElementById('event2').value) || 0;
        var event3 = parseInt(document.getElementById('event3').value) || 0;
        var event4 = parseInt(document.getElementById('event4').value) || 0;

        // Find the maximum value
        var max = Math.max(event1, event2, event3, event4);
        var resultText = '';

        // Determine the event with the maximum value
        if (max === event1) {
            resultText = 'Birthday party event';
        } else if (max === event2) {
            resultText = 'Engagement parties event';
        } else if (max === event3) {
            resultText = 'Corporate event';
        } else if (max === event4) {
            resultText = 'Social Gathering event';
        }

        // Display the result
        document.getElementById('result').innerHTML = "Maximum number of event occurred in this month is " + resultText;
    }
</script>

</body>
</html>