Font-weight in innerHTML text on Laravel only works if it's set to white color

Question

I implemented a countdown in my Laravel 5 application and I wish to change the font weight of its text. For some reason this simple task is taking me a lot of time to figure out. If the color is set to #fff the font-weight is correctly applied. If I change the color, the fon't weight stops working.

Images for comparison:

blade.php file

<a style="color: #fff" href="">
  <div id="countdown-component" style="display:inline;color:#EC1B33;font-weight:600;letter-spacing:2px;">
  </div>
</a>

JS function to generate the countdown:

<script>
      // Set the date we're counting down to
      var countDownDate = new Date("Feb 15, 2022 12:00:00").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);
    
      // Display the result in the element with id="demo"
      document.getElementById("countdown-component").innerHTML = days + " DAYS " + hours + " HOURS "
      + minutes + " MINUTES " + seconds + " SECONDS ";
    
      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown-component").innerHTML = "EXPIRED";
      }
    }, 1000);
</script>

Thanks in advance.

Answer 1

    // Set the date we're counting down to
          var countDownDate = new Date("Feb 15, 2022 12:00:00").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);

            // Display the result in the element with id="demo"
            document.getElementById("countdown-component").innerHTML =
              days +
              " DAYS " +
              hours +
              " HOURS " +
              minutes +
              " MINUTES " +
              seconds +
              " SECONDS ";

            // If the count down is finished, write some text
            if (distance < 0) {
              clearInterval(x);
              document.getElementById("countdown-component").innerHTML = "EXPIRED";
            }
          }, 1000);
    <a style="color: #fff" href="">
          <div
            id="countdown-component"
            style="
              display: inline;
              color: #fff;
              font-weight: 400;
              letter-spacing: 2px;
            "
          ></div>
        </a>