title: javascript countdown won't display on webpage issue/problem
body: <p>I'm doing a new year's countdown and for some reason my java script code wont display on the page. I am aware that it's working as it should because when I <code>console.log</code> the d, h, or m <code>const</code> it shows the timers going down. However, it's not displaying the timers on the webpage.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const days        = document.querySelectorAll('days')
  const hours       = document.querySelectorAll('hours')
  const minutes     = document.querySelectorAll('minutes')
  const seconds     = document.querySelectorAll('seconds')
  const currentYear = new Date().getFullYear();
  const newYearTime = new Date('january 1 2023 00:00:00');
  
  function updateCountdown() {
    const currentTime = new Date();
    const diff = newYearTime - currentTime;
  
    const d = Math.floor(diff / 1000 / 60 / 60 / 24);
    const h = Math.floor(diff / 1000 / 60 / 60) % 24;
    const m = Math.floor(diff / 1000 / 60) % 60;
    const s = Math.floor(diff / 1000) % 60;
  
    days.innerHTML    = d;
    hours.innerHTML   = h &lt; 10 ? '0' + h : h;
    minutes.innerHTML = m &lt; 10 ? '0' + m : m;
    seconds.innerHTML = s &lt; 10 ? '0' + s : s;
  }
  
  setInterval(updateCountdown, 1000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;display=swap');
  * {
    box-sizing: border-box;
  }
  
  body {
    background-image: url(joanna-kosinska-0CQfTLOVTPU-unsplash.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    font-family: "Bebas Neue", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0%;
    overflow: hidden;
  }
  
  h1 {
    font-weight: normal;
    font-size: 80px;
    margin: 90px;
    text-shadow: rgb(255, 180, 238) 5px 5px 15px, black 2px 2px 6px;
  }
  
  .countdown {
    display: flex;
    transform: scale(2.5);
  }
  
  .time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px;
    text-shadow: rgb(255, 180, 238) 4px 4px 15px, black 1px 1px 6px;
  }
  
  .time h2 {
    font-size: 28px;
    margin: 0 0 5px;
  }
  
  @media screen and (max-width: 800px) {
    h1 {
      font-size: 60px;
    }
    .time {
      margin: 5px;
    }
    .time h2 {
      font-size: 24px;
      margin: 0 0 10px;
    }
  }
  
  @media screen and (max-width: 650px) {
    h1 {
      font-size: 40px;
    }
    .time {
      margin: 5px;
    }
    .time h2 {
      font-size: 20px;
      margin: 0 0 10px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;New Years Countdown&lt;/h1&gt;
  
  &lt;div id="countdown" class="countdown"&gt;
  
    &lt;div class="time"&gt;
      &lt;h2 id="days"&gt;&lt;/h2&gt;
      &lt;small&gt;Days&lt;/small&gt;
    &lt;/div&gt;
  
    &lt;div class="time"&gt;
      &lt;h2 id="hours"&gt;&lt;/h2&gt;
      &lt;small&gt;Hours&lt;/small&gt;
    &lt;/div&gt;
  
    &lt;div class="time"&gt;
      &lt;h2 id="minutes"&gt;&lt;/h2&gt;
      &lt;small&gt;Minutes&lt;/small&gt;
    &lt;/div&gt;
  
    &lt;div class="time"&gt;
      &lt;h2 id="seconds"&gt;&lt;/h2&gt;
      &lt;small&gt;Seconds&lt;/small&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>