Merry Christmas 2024 Countdown Code | HTML, CSS, And Javascript

WhatsApp Group Join Now

Telegram Group Join Now

Instagram Group Join Now

So Guys Are You Looking for a Merry Christmas 2023 Countdown Code For your Christmas Projects and your work?

Table of Contents

Details Of Merry Christmas 2023 Countdown Code
HTML Code For Merry Christmas 2023 Countdown Code
CSS Code For Merry Christmas 2023 Countdown
JavaScript Code For Merry Christmas 2023 Countdown
Result from Merry Christmas 2023 Countdown

Then I will help you, dude.

In this article, I’ll give you a Merry Christmas 2023 Countdown Code for free so you can use it on your projects.

We use HTML, CSS & Javascript Languages for this awesome countdown. Also, We added a snow effect to this. Using Snow Effect its Design is pretty good and compatible with Christmas Theme.

Details Of Merry Christmas 2023 Countdown Code

Languages	HTML, CSS, and JavaScript
Responsive	Yes
Downloading Link	Below

Merry Christmas 2023 Countdown Code | HTML, CSS, and Javascript

HTML Code For Merry Christmas 2023 Countdown Code

<html><H1>Merry Christmas</H1><div class="timer">
  <div class="box">
    <h2 id="days"></h2>
    <h4>Days</h4>
  </div>
  <div class="box">
    <h2 id="hrs"></h2>
    <h4>Hours</h4>
  </div>
  <div class="box">
    <h2 id="mins"></h2>
    <h4>Minutes</h4>
  </div>
  <div class="box">
    <h2 id="secs"></h2>
    <h4>Seconds</h4>
    <body><style></html>
  #snowflakeContainer {
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
  }

  .snowflake {
    position: fixed;
    background-color: #CCC;
    user-select: none;
    z-index: 1000;
    pointer-events: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
</style>

<div id="snowflakeContainer">
<span class="snowflake"></span>
</div>

<script>
  //<![CDATA[
  // Array to store our Snowflake objects
  var snowflakes = [];

  // Global variables to store our browser's window size
  var browserWidth;
  var browserHeight;

  // Specify the number of snowflakes you want visible
  var numberOfSnowflakes = 50;

  // Flag to reset the position of the snowflakes
  var resetPosition = false;

  // Handle accessibility
  var enableAnimations = false;
  var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");

  // Handle animation accessibility preferences 
  function setAccessibilityState() {
    if (reduceMotionQuery.matches) {
      enableAnimations = false;
    } else { 
      enableAnimations = true;
    }
  }
  setAccessibilityState();

  reduceMotionQuery.addListener(setAccessibilityState);

  //
  // It all starts here...
  //
  function setup() {
    if (enableAnimations) {
      window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
      window.addEventListener("resize", setResetFlag, false);
    }
  }
  setup();

  //
  // Constructor for our Snowflake object
  //
  function Snowflake(element, speed, xPos, yPos) {
    // set initial snowflake properties
    this.element = element;
    this.speed = speed;
    this.xPos = xPos;
    this.yPos = yPos;
    this.scale = 1;

    // declare variables used for snowflake's motion
    this.counter = 0;
    this.sign = Math.random() < 0.5 ? 1 : -1;

    // setting an initial opacity and size for our snowflake
    this.element.style.opacity = (.1 + Math.random()) / 3;
  }

  //
  // The function responsible for actually moving our snowflake
  //
  Snowflake.prototype.update = function () {
    // using some trigonometry to determine our x and y position
    this.counter += this.speed / 5000;
    this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
    this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
    this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20);

    // setting our snowflake's position
    setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element);

    // if snowflake goes below the browser window, move it back to the top
    if (this.yPos > browserHeight) {
      this.yPos = -50;
    }
  }

  //
  // A performant way to set your snowflake's position and size
  //
  function setTransform(xPos, yPos, scale, el) {
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0) scale(${scale}, ${scale})`;
  }

  //
  // The function responsible for creating the snowflake
  //
  function generateSnowflakes() {

    // get our snowflake element from the DOM and store it
    var originalSnowflake = document.querySelector(".snowflake");

    // access our snowflake element's parent container
    var snowflakeContainer = originalSnowflake.parentNode;
    snowflakeContainer.style.display = "block";

    // get our browser's size
    browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;

    // create each individual snowflake
    for (var i = 0; i < numberOfSnowflakes; i++) {

      // clone our original snowflake and add it to snowflakeContainer
      var snowflakeClone = originalSnowflake.cloneNode(true);
      snowflakeContainer.appendChild(snowflakeClone);

      // set our snowflake's initial position and related properties
      var initialXPos = getPosition(50, browserWidth);
      var initialYPos = getPosition(50, browserHeight);
      var speed = 5 + Math.random() * 40;

      // create our Snowflake object
      var snowflakeObject = new Snowflake(snowflakeClone,
        speed,
        initialXPos,
        initialYPos);
      snowflakes.push(snowflakeObject);
    }

    // remove the original snowflake because we no longer need it visible
    snowflakeContainer.removeChild(originalSnowflake);

    moveSnowflakes();
  }

  //
  // Responsible for moving each snowflake by calling its update function
  //
  function moveSnowflakes() {

    if (enableAnimations) {
      for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];
        snowflake.update();
      }      
    }

    // Reset the position of all the snowflakes to a new value
    if (resetPosition) {
      browserWidth = document.documentElement.clientWidth;
      browserHeight = document.documentElement.clientHeight;

      for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];

        snowflake.xPos = getPosition(50, browserWidth);
        snowflake.yPos = getPosition(50, browserHeight);
      }

      resetPosition = false;
    }

    requestAnimationFrame(moveSnowflakes);
  }

  //
  // This function returns a number between (maximum - offset) and (maximum + offset)
  //
  function getPosition(offset, size) {
    return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
  }

  //
  // Trigger a reset of all the snowflakes' positions
  //
  function setResetFlag(e) {
    resetPosition = true;
  }
  //]]>
</script></body>
  </div>
</div>

CSS Code For Merry Christmas 2023 Countdown

* {
    margin: 0;
    padding: 0;
    font-family: 'poppins', sans-serif;
}
H1 {
    position: relative;
    background-color: #FFF;
    color: #0F4C75;
    height: 50px;
    width: 140px;
    margin: 4px;
    font-size: 1.1rem;
    text-align: center;
    box-shadow: 2px 12px 18px 4px #333;
}
body {
    background-color: #0F4C75;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
}

.timer {
    display: flex;
}

.box {
    position: relative;
    background-color: #FFF;
    color: #1B262C;
    height: 140px;
    width: 140px;
    margin: 4px;
    font-size: 3.2rem;
    text-align: center;
    box-shadow: 2px 12px 18px 4px #333;
}

.box h4 {
    position: absolute;
    bottom: 0;
    background-color: #3282B8;
    width: 100%;
    color: #FFF;
    text-transform: uppercase;
    font-size: 1.0rem;
    padding: 8px 0;
}

JavaScript Code For Merry Christmas 2023 Countdown

var countDownDate = new Date("Dec 25, 2022 00:00:00").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
    document.getElementById("days").innerHTML = days;
                
          document.getElementById("hrs").innerHTML = hours;
                
                document.getElementById("mins").innerHTML = minutes;
                
                document.getElementById("secs").innerHTML = seconds;
}, 1000);

Download The Code (ZIP)