<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <title>Event Calendar</title>

    <meta name="description" content="Event Calendar App">

    <meta name="keywords" content="event calendar, celebrations, holidays">



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



    <script type="text/javascript">

        try {

            // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

            $(document).ready(function () {

                // Event data

                var events = [

                    { name: "New Year", date: "01-01-2022" },

                    { name: "Christmas Day", date: "12-25-2022" },

                    { name: "Valentine's Day", date: "02-14-2022" },

                    { name: "International Women's Day", date: "03-08-2022" },

                    { name: "Fools' Day", date: "04-01-2022" },

                    { name: "Easter", date: "04-17-2022" },

                    { name: "Victory Day (VE Day)", date: "05-09-2022" },

                    { name: "Defence of Children Day", date: "06-01-2022" },

                    { name: "Constitution Day", date: "07-17-2022" },

                    { name: "Independence Day", date: "09-15-2022" },

                    { name: "Day of Knowledge", date: "09-01-2022" },

                    { name: "Teachers Day", date: "10-05-2022" }

                ];

                

                // Function to display the event on selection

                function displayEvent() {

                    var eventIndex = $("#event-select").val();

                    var selectedEvent = events[eventIndex];

                    var eventDate = new Date(selectedEvent.date);

                    var month = eventDate.toLocaleString('default', { month: 'long' });

                    var day = eventDate.getDate();

                    var year = eventDate.getFullYear();

                    $("#event-details").text("Date: " + month + " " + day + ", " + year);

                }



                // Populate event select options

                events.forEach(function (event, index) {

                    $("#event-select").append(`<option value="${index}">${event.name}</option>`);

                });



                // Event select change event

                $("#event-select").change(function () {

                    displayEvent();

                });



                // Initial event display

                displayEvent();

            });



        } catch (error) {

            // This will throw the error to the parent window.

            throw error;

        }

    </script>



    <style>

        /* App CSS Goes Here */

        body {

            background-color: #f5f5f5;

            font-family: 'Roboto', sans-serif;

        }



        .container {

            margin-top: 50px;

            text-align: center;

            max-width: 500px;

        }



        h1 {

            font-size: 24px;

            color: #333;

            margin-bottom: 20px;

        }



        select {

            width: 100%;

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 4px;

            background-color: #fff;

            font-size: 16px;

            color: #333;

            margin-bottom: 20px;

        }



        p {

            font-size: 18px;

            color: #555;

        }

    </style>

</head>

<body>

<div id="main-container" class="container">

    <h1>Event Calendar</h1>

    <select id="event-select">

        <!-- Event options will be populated dynamically -->

    </select>

    <p id="event-details"></p>

</div>

</body>

</html>