count-down.liquid

<div class="cd-container">
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div id="cd-content" class="emoji">
    <span>🥳</span>
  </div>
</div>

<style>
.cd-container {
  color: #333;
  margin: 0 auto;
  text-align: center;
}


.cd-container li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

.cd-container li span {
  display: block;
  font-size: 4.5rem;
}

.cd-container .emoji {
  display: none;
  padding: 1rem;
}

.cd-container .emoji span {
  font-size: 4rem;
  padding: 0 .5rem;
}

@media all and (max-width: 768px) {
  
  .cd-container li {
    font-size: calc(1.125rem * var(--smaller));
  }
  
  .cd-container li span {
    font-size: calc(3.375rem * var(--smaller));
  }
}
</style>

<script>
  (function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  
  const countDown = new Date("{{ section.settings.endDate }}").getTime(),
      x = setInterval(function() {    

        const now = new Date().getTime(),
              distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        //do something later when date is reached
        if (distance < 0) {
          // document.getElementById("countdown").style.display = "none";
          document.getElementById("cd-content").style.display = "block";
          clearInterval(x);
        }
        //seconds
      }, 0)
  }());
</script>

{% schema %}
  {
    "name": "Countdown Timer",
    "settings": [
          {
      "type": "text",
      "id": "endDate",
      "default": "12/25/2024",
      "label": "End Date"
    },
    ],
      "presets": [
    {
      "name": "Count Down",
      "blocks": [

      ]
    }
  ]
  }
{% endschema %}