Calculator Tools Calculator Tools
Create

Days Until Christmas

Oct 1, 2023

About this app

Calculate the number of days until Christmas

Days Until Christmas

Related apps

Put this on your site

Source

                    <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>Days Until Christmas</title>
<meta name="description" content="Calculate the number of days until Christmas">
<meta name="keywords" content="days until Christmas, countdown, holiday">

<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.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
var today = new Date();
var christmas = new Date(today.getFullYear(), 11, 25);
if (today.getMonth() === 11 && today.getDate() > 25) {
christmas.setFullYear(christmas.getFullYear() + 1);
}
var timeDiff = christmas.getTime() - today.getTime();
var daysUntilChristmas = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

var countdownContainer = document.getElementById("countdown");
countdownContainer.innerHTML = daysUntilChristmas + " days until Christmas!";
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
body {
background-color: #f2f2f2;
font-family: 'Arial', sans-serif;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.countdown {
text-align: center;
}

.countdown h1 {
font-size: 48px;
color: #333;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="countdown">
<h1 id="countdown"></h1>
</div>
</div>
</body>
</html>