Countdown to Christmas
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Countdown to Christmas</title>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap’);
.countdown-container {
font-family: ‘Mountains of Christmas’, cursive;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 300px;
margin: 20px auto;
}
.countdown-container p {
font-size: 24px;
margin: 10px 0;
transition: color 1s ease;
color: red;
}
</style>
</head>
<body>
<div class=”countdown-container”>
<h1>Countdown to Christmas</h1>
<p id=”days”></p>
</div>
<script>
function updateCountdown() {
const today = new Date();
const christmas = new Date(today.getFullYear(), 11, 25); // Month is 0-indexed (11 = December)
if (today.getMonth() == 11 && today.getDate() > 25) {
christmas.setFullYear(christmas.getFullYear() + 1);
}
const diff = christmas – today;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const daysElement = document.getElementById(‘days’);
daysElement.innerText = `${days} day${days !== 1 ? ‘s’ : ”} until Christmas!`;
// Change text color between red and green
daysElement.style.color = daysElement.style.color === ‘red’ ? ‘green’ : ‘red’;
}
updateCountdown();
setInterval(updateCountdown, 1000); // Update every second
</script>
</body>
</html>
CSS Code Explained!
1.) @import url(‘https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap’);
This CSS code was used to import a Google Font. The google font ‘Mountains of Christmas’ was imported to allow the christmas countdown to be more festive and change the font being used.
2.) box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
This CSS code was used to create the faint shadow around the christmas countdown box. The numbers could have been changed to increase or decrease the amount of shadow, the blur of the shadow, and opacity of the shadow.
3.) max-width: 300px;
This CSS code was used to make sure that the box would not exceed a certain width. This was added due to an issue with the code messing with the website layout.
4.) text-align: center;
This CSS code was used for centering the words within the countdown box. This code cound have replaced ‘center’ with left, right, or justify for a different orientation.
5.) transition: color 1s ease;
This CSS code was used for the transtion between the red and green color displaying the days left til Christmas. Instead of a flashing red and green, this CSS line makes the colors fade in and out making a smoother transition.
*
/_\
/o o\
/_O_O_\
/o o\
/_O_O_O_O_\
/o * o\
/_O_O_O_O_O_O_\
/o o o o\
/_O_O_O_O_O_O_O_O_\
|||||
|||||