Preview:
<!DOCTYPE html>
<html>
<head>
    <title>Event Count for a Month</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f0e5;
            text-align: center;
        }
        .container {
            width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #fdf2e9;
        }
        .container h2 {
            text-align: center;
        }
        .container div {
            margin: 10px 0;
        }
        .container label {
            display: inline-block;
            width: 180px;
            text-align: left;
        }
        .container input {
            width: 150px;
            padding: 5px;
        }
        .container button {
            padding: 8px 16px;
            background-color: #d3d3d3;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

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

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

    // Find the maximum event count
    let maxCount = Math.max(event1, event2, event3, event4);
    let eventName = "";

    // Determine which event has the max count and set the name according to the expected format
    if (maxCount === event1) {
        eventName = "Birthday party";
    } else if (maxCount === event2) {
        eventName = "Engagement parties";
    } else if (maxCount === event3) {
        eventName = "Corporate";
    } else if (maxCount === event4) {
        eventName = "Social Gathering";
    }

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

</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter