Render JS Script on specific location

Render JS Script on specific location

Hi,

I'm trying to add a countdown timer with this JS script :

  2. <script>
  3. // Set the date we're counting down to
  4. var countDownDate = new Date("Mar 31, 2024 00:00:00").getTime();

  6. // Update the count down every 1 second
  7. var x = setInterval(function() {

  9.   // Get today's date and time
  10.   var now = new Date().getTime();
  11.     
  12.   // Find the distance between now and the count down date
  13.   var distance = countDownDate - now;
  14.     
  15.   // Time calculations for days, hours, minutes and seconds
  16.   var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  17.   var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  18.   var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  19.   var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  20.     
  21.   // Output the result in an element with id="demo"
  22.   document.getElementById("CountdownTimer").innerHTML = days + "d " + hours + "h "
  23.   + minutes + "m " + seconds + "s ";
  24.     
  25.   // If the count down is over, write some text 
  26.   if (distance < 0) {
  27.     clearInterval(x);
  28.     document.getElementById("CountdownTimer").innerHTML = "EXPIRED";
  29.   }
  30. }, 1000);
  31. </script>

Then I add it as a snippet.
However I just can't find a way to render it on the published website? I would need to assign the specific ID CountdownTimer to a paragraph, just no idea how to do it?
Anyhelp? Or other way of doing it (not embedding 3rd party service that are all the time paying)
Thanks!