title: Simple countdown timer issue
body: <p>I am trying to figure out why my timer is not working. I got this code from this guy on YouTube, its seems to be working for him but the countdown always shows as '00' for days, hours, minutes, and seconds on my Shopify store. This is the code that was written below</p>
  <pre><code> {% if end_date != blank %} 
  
   &lt;div class=&quot;timer&quot;&gt; 
  
     {% if title != blank %}&lt;h4 class=&quot;timer__title&quot;&gt;{{ title }}&lt;/h4&gt;{% endif %} 
  
     &lt;div class=&quot;timer-display&quot;&gt; 
  
       &lt;div class=&quot;timer-block&quot;&gt; 
  
         &lt;span class=&quot;timer-block__num js-timer-days&quot;&gt;00&lt;/span&gt; 
  
         &lt;span class=&quot;timer-block__unit&quot;&gt;Days&lt;/span&gt; 
  
       &lt;/div&gt; 
  
       &lt;div class=&quot;timer-block&quot;&gt; 
  
         &lt;span class=&quot;timer-block__num js-timer-hours&quot;&gt;00&lt;/span&gt; 
  
         &lt;span class=&quot;timer-block__unit&quot;&gt;Hours&lt;/span&gt; 
  
       &lt;/div&gt; 
  
       &lt;div class=&quot;timer-block&quot;&gt; 
  
         &lt;span class=&quot;timer-block__num js-timer-minutes&quot;&gt;00&lt;/span&gt; 
  
         &lt;span class=&quot;timer-block__unit&quot;&gt;Minutes&lt;/span&gt; 
  
       &lt;/div&gt; 
  
       &lt;div class=&quot;timer-block&quot;&gt; 
  
         &lt;span class=&quot;timer-block__num js-timer-seconds&quot;&gt;00&lt;/span&gt; 
  
         &lt;span class=&quot;timer-block__unit&quot;&gt;Seconds&lt;/span&gt; 
  
       &lt;/div&gt; 
  
     &lt;/div&gt; 
  
   &lt;/div&gt; 
  
   &lt;style&gt; 
  
     .timer { 
  
       background: #f6fafd; 
  
       padding: 10px; 
  
       margin: 10px 0; 
  
     } 
  
     .timer--expired { 
  
       display: none; 
  
     } 
  
     .timer__title { 
  
       @extend .paragraph; 
  
       text-align: center; 
  
     } 
  
     .timer-display { 
  
       display: -webkit-box; 
  
       display: -ms-flexbox; 
  
       display: flex; 
  
       -ms-flex-wrap: wrap; 
  
           flex-wrap: wrap; 
  
       -webkit-box-pack: justify; 
  
           -ms-flex-pack: justify; 
  
               justify-content: space-between; 
  
       margin-top: 5px; 
  
     } 
  
     .timer-block { 
  
       position: relative; 
  
       width: 25%; 
  
       padding: 0 10px; 
  
       &amp;:not(:last-child):after { 
  
         content: ':'; 
  
         position: absolute; 
  
         right: 0; 
  
         top: 3px; 
  
       } 
  
     } 
  
     .timer-block__num, 
  
     .timer-block__unit { 
  
       display: block; 
  
       text-align: center; 
  
     } 
  
   &lt;/style&gt; 
  
   &lt;script type=&quot;text/javascript&quot;&gt; 
  
     var second = 1000, 
  
         minute = second * 60, 
  
         hour = minute * 60, 
  
         day = hour * 24; 
  
     var countDown = new Date('{{- end_date -}}').getTime(), 
  
         x = setInterval(function() { 
  
         var now = new Date().getTime(), 
  
             distance = countDown - now; 
  
       document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)), 
  
         document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)), 
  
       document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)), 
  
       document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second); 
  
       }, second) 
  
   &lt;/script&gt; 
  
   {% endif %} 
  </code></pre>
  <p>I am trying to render it on another page using this</p>
  <pre><code> {% include 'countdown-timer', 
  
     title: &quot;Special Offer End In&quot;, 
  
     end_date: &quot;Dec 31, 2023&quot; 
  
   %} 
  </code></pre>
  <p>This is what I am getting</p>
  <p><a href="https://i.stack.imgur.com/Mi7OX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mi7OX.png" alt="enter image description here" /></a></p>
  <p>Here is a link to the code, for some reason with the mix of liquid code there seems to be some formatting issues here. How do I actually get this darn thing to run.</p>
  <p><a href="https://ecomexperts.io/blogs/liquid-tutorial-shopify/how-to-add-sale-countdown-timer-to-your-shopify-store" rel="nofollow noreferrer">https://ecomexperts.io/blogs/liquid-tutorial-shopify/how-to-add-sale-countdown-timer-to-your-shopify-store</a></p>