<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>Fun Date Calculator</title>

        <meta name="description" content="A fun and colorful date calculator app that allows you to calculate the difference between two dates easily.">

        <meta name="keywords" content="date calculator, fun app, HTML, JavaScript, counting days, colorful UI, date difference">



        <!-- Libraries -->

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

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

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">





        <script type="text/javascript">

            try {

                document.addEventListener("DOMContentLoaded", function() {

                    const startDateInput = document.getElementById('start-date');

                    const endDateInput = document.getElementById('end-date');

                    const resultDiv = document.getElementById('result');



                    function calculateDateDifference() {

                        const startDate = new Date(startDateInput.value);

                        const endDate = new Date(endDateInput.value);

                        const timeDiff = Math.abs(endDate - startDate);

                        const diffDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); 

                        resultDiv.style.display = 'block';

                        resultDiv.innerHTML = `<h3>The difference is <span class="text-success">${diffDays}</span> days!</h3>`;

                    }



                    document.getElementById('calculate-btn').addEventListener('click', calculateDateDifference);

                });



            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(to right, #ffbb33, #ff9900);

                color: white;

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

                display: flex;

                align-items: center;

                justify-content: center;

                height: 100vh;

                margin: 0;

            }

            #main-container {

                background: rgba(255, 255, 255, 0.2);

                border-radius: 10px;

                padding: 30px;

                box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

                text-align: center;

            }

            h1 {

                color: #ffcc00;

            }

            input {

                border-radius: 4px;

                border: none;

                padding: 10px;

                width: 80%;

                margin: 10px 0;

            }

            button {

                background-color: #ffcc00;

                color: black;

                padding: 10px 20px;

                border: none;

                border-radius: 5px;

                transition: background-color 0.3s ease;

            }

            button:hover {

                background-color: #ff9900;

            }

            #result {

                display: none;

                margin-top: 20px;

            }

        </style>

    </head>

    <body>

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

            <h1>Fun Date Calculator</h1>

            <input type="date" id="start-date" placeholder="Start Date" required>

            <input type="date" id="end-date" placeholder="End Date" required>

            <button id="calculate-btn">Calculate</button>

            <div id="result"></div>

        </div>

    </body>

</html>