open_in_new content_copy 
<!DOCTYPE html>
<html>
<head>
    <title>Event Count</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #fdf2e9;
        }
        .container {
            background-color: #fcefe3;
            width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            margin: 100px auto;
            text-align: center;
        }
        h2 {
            text-align: center;
        }
        input {
            margin-bottom: 10px;
            padding: 5px;
            width: 200px;
        }
        button {
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Event count for a month</h2>
        
        <label for="event1">Birthday party event :</label>
        <input type="number" id="event1"><br>
        
        <label for="event2">Engagement parties event :</label>
        <input type="number" id="event2"><br>
        
        <label for="event3">Corporate event :</label>
        <input type="number" id="event3"><br>
        
        <label for="event4">Social Gathering event :</label>
        <input type="number" id="event4"><br>
        
        <button id="button" onclick="maxevent()">Submit</button>
        
        <div id="result"></div>
    </div>

    <script>
       function maxevent() {
    // Getting event counts
    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;
    
    // Finding the maximum event count
    var maxCount = Math.max(event1, event2, event3, event4);
    
    // Displaying the result
    var resultDiv = document.getElementById('result');
    if (maxCount === event1) {
        resultDiv.innerHTML = "Maximum number of event occurred in this month is Birthday party";
    } else if (maxCount === event2) {
        resultDiv.innerHTML = "Maximum number of event occurred in this month is Engagement parties";
    } else if (maxCount === event3) {
        resultDiv.innerHTML = "Maximum number of event occurred in this month is Corporate";
    } else if (maxCount === event4) {
        resultDiv.innerHTML = "Maximum number of event occurred in this month is Social Gathering";
    }
}

    </script>
</body>
</html>