Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>New Year Countdown</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f0f0f0; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .container { | |
| text-align: center; | |
| background-color: #fff; | |
| padding: 40px; | |
| border-radius: 10px; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .countdown { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 30px; | |
| } | |
| .time-container { | |
| margin: 0 20px; | |
| } | |
| .time-container span { | |
| font-size: 48px; | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| .time-container p { | |
| font-size: 18px; | |
| color: #666; | |
| margin-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>New Year Countdown <span id="current-year"></span></h1> | |
| <div class="countdown"> | |
| <div class="time-container"> | |
| <span id="days">00</span> | |
| <p>Days</p> | |
| </div> | |
| <div class="time-container"> | |
| <span id="hours">00</span> | |
| <p>Hours</p> | |
| </div> | |
| <div class="time-container"> | |
| <span id="minutes">00</span> | |
| <p>Minutes</p> | |
| </div> | |
| <div class="time-container"> | |
| <span id="seconds">00</span> | |
| <p>Seconds</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const daysElement = document.getElementById('days'); | |
| const hoursElement = document.getElementById('hours'); | |
| const minutesElement = document.getElementById('minutes'); | |
| const secondsElement = document.getElementById('seconds'); | |
| const currentYearElement = document.getElementById('current-year'); | |
| // Get the current year | |
| const currentYear = new Date().getFullYear(); | |
| currentYearElement.textContent = `(${currentYear})`; | |
| // Set the date we're counting down to (New Year's Eve) | |
| const countDownDate = new Date(`Jan 1, ${currentYear + 1} 00:00:00`).getTime(); | |
| // Update the count down every 1 second | |
| const x = setInterval(function() { | |
| // Get today's date and time | |
| const now = new Date().getTime(); | |
| // Find the distance between now and the count down date | |
| const distance = countDownDate - now; | |
| // Time calculations for days, hours, minutes and seconds | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| // Output the result in an element with id="demo" | |
| daysElement.textContent = days; | |
| hoursElement.textContent = hours; | |
| minutesElement.textContent = minutes; | |
| secondsElement.textContent = seconds; | |
| // If the count down is over, write some text | |
| if (distance < 0) { | |
| clearInterval(x); | |
| document.getElementById("demo").innerHTML = "EXPIRED"; | |
| } | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> |