The code I wrote doesn't appear in live environment

[ItaySviri]

Hi,
I wrote a code in order to show a countdown timer in an announcement bar. It appears to be alright in the builder, but my site doesn’t show it at all.
I’m now hiding the section until I’ll get an answer here.

Builder.io: Drag and drop page builder and CMS

This is the code:

.announcement { font-size: 32px; margin-bottom: 20px; color:red; text-align:center; }

// Set the date we're counting down to var countDownDate = new Date("Jan 6, 2022 23:59:59").getTime();

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

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    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);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";

    // If the count down is over, write some text
    /*if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
    }*/
  }, 1000);
</script>

Some screenshots:

[maddy]

Hi @ItaySviri!

I’m glad we were able to resolve this over chat by adding a binding of showIf Builder.isBrowser. If anyone else runs into a similar issue, you can find solutions in this forum post or use the suggestion above.