Created
December 23, 2025 21:01
-
-
Save MrBisquit/1424e541dc34727afbb4d44b28cd450b to your computer and use it in GitHub Desktop.
Christmas countdown
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Christmas 2025</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| background: url("path-to-cool-background-image"); | |
| background-repeat: no-repeat; | |
| overflow: hidden; | |
| width: 100vh; | |
| } | |
| .snowflake { | |
| position: absolute; | |
| top: -10px; | |
| width: 10px; | |
| height: 10px; | |
| background: white; | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| animation: fall linear infinite; | |
| } | |
| @keyframes fall { | |
| to { | |
| transform: translateY(100vh); | |
| opacity: 0; | |
| } | |
| } | |
| .settings { | |
| color: white; | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| text-align: center; | |
| color: white; | |
| } | |
| .days { | |
| font-size: 150; | |
| } | |
| </style> | |
| <script> | |
| let snowflakes = 1000; | |
| const start = () => { | |
| document.getElementById("snowflakes").innerHTML = ""; | |
| for(let i = 0; i < snowflakes; i++) { | |
| let duration = Math.random() * 3 + 2 * 5; | |
| let size = Math.random() * 10; | |
| const snowflake = document.createElement("div"); | |
| snowflake.classList.add("snowflake"); | |
| snowflake.style.left = `${Math.random() * 100}vw`; | |
| snowflake.style.animationDuration = `${duration}s`; | |
| snowflake.style.width = `${size}px`; | |
| snowflake.style.height = `${size}px`; | |
| document.getElementById("snowflakes").appendChild(snowflake); | |
| setInterval(() => { | |
| snowflake.style.left = `${Math.random() * 100}vw`; | |
| snowflake.style.width = `${size}px`; | |
| snowflake.style.height = `${size}px`; | |
| }, duration * 1000); | |
| } | |
| } | |
| const updateCounter = () => { | |
| const date1 = new Date(); | |
| const date2 = new Date(2025, 11, 24, 23, 59, 59, 999); | |
| const timeDifference = date2 - date1; | |
| const daysDifference = timeDifference / (1000 * 60 * 60 * 24); | |
| const hourDifference = timeDifference / (1000 * 60 * 60); | |
| if(daysDifference < 1) { | |
| document.getElementById("counter").innerHTML = Math.round(hourDifference).toString(); | |
| } else { | |
| document.getElementById("counter").innerHTML = Math.round(daysDifference).toString(); | |
| } | |
| if(daysDifference < 1) { | |
| document.getElementById("message").innerHTML = `Hour${hourDifference > 1 ? "s" : ""} until Christmas`; | |
| } else if(daysDifference < 2) { | |
| document.getElementById("message").innerHTML = "Day until Christmas"; | |
| } else { | |
| document.getElementById("message").innerHTML = "Days until Christmas"; | |
| } | |
| } | |
| setInterval(() => { | |
| updateCounter(); | |
| }, 60000); | |
| window.onload = () => { | |
| start(); | |
| updateCounter(); | |
| } | |
| const changeSnowflakes = (value) => { | |
| snowflakes = value; | |
| document.getElementById("snowflakesValue").innerHTML = value.toString(); | |
| start(); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="settings"> | |
| <label>Snowflakes: </label> | |
| <input type="range" min="1" max="5000" value="250" onChange="changeSnowflakes(this.value);" /> | |
| <span id="snowflakesValue">250</span> | |
| <audio autoplay loop> | |
| <source src="add-an-audio-file-here.mp3" type="audio/mpeg" /> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </div> | |
| <div id="snowflakes"></div> | |
| <div class="container"> | |
| <div> | |
| <span class="days" id="counter">0</span> | |
| <p id="message">Days until Christmas</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment