JS SCRIPT NOT RUNNING

Curriculum Help
1

I am creating a basic page in w3spaces and while I’ve finished editing the html and css part, I’d like to add a few scripts in it. I tried to add this script (How To Create a Countdown Timer), which is a countdown timer to my own page but it seems like it doesn’t run. Initially I used the code provided <p id="demo"></p> and nothing happened. I also tried other things such as <span id="demo" class="demo"></span> and <script src="./countdown.js"></script> but neither worked. Do you have any suggestion please as I am not very experienced.

2

Hello, normally It would be script.js in place of countdown wouldn’t it? with the count down logic or js in between.

3

what is your code and what are the file names?

4

The root page of the script is named “countdown.js” that’s why this code.
Also, there is button called “copy relative path” which gives me that “./countdown.js”

5

This is my whole coding so far (plus the script added on a .js root page)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-pink.css">    
    <title>Links website</title>
    <script src="https://unpkg.com/feather-icons@4.28.0/dist/feather.min.js"></script>
    <style>
    body {
      background: url("removed");
      background-size: cover;
    }

    .container {
      width: 100%;
      height: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }


    .links-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }

    .links-container a {
      width: 80%;
    }

    .margin-top-2 {
      margin-top: 32px;
    }

    .bottom {
      width: 100%;
      text-align: center;
      width: auto;
      font-weight: bolder;
    }

    .bottom span {
      color: #ed4d82;
    }

    .bottom svg {
      stroke: #ed4d82;
      fill: #ed4d82;
    }

    @media (min-width: 768px) {
      .link {
        width: 100%;
      }
    }
    @media (min-width: 576px) {
      .container {
        max-width: 540px;
      }
    }
    .status {
    background-color: #d4edda;
    color: #155724;
    font-size: 0.85em;
    padding: 4px 10px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    white-space: nowrap;
}
.status-dot {
    width: 8px;
    height: 8px;
    background-color: #2ecc71;
    border-radius: 50%;
    margin-right: 5px;
}
.info {
    margin: 6px 0;
    font-size: 1.1em;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.icon {
    width: 20px;
    height: 20px;
}
.name{
color: #000000;
}
.button {
      background-color: #00adef !important;
      color: #ffffff !important;
       text-decoration: none;
      border-radius: 8px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 17px;
      font-weight: bold;
    }
    .button:hover {
      background-color: #018ccf !important;
      color: #ffffff !important;
       text-decoration: none;
    }
    .off{
    color: #e3242b;
    }
    .profile-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 25px;
  padding: 25px 25px 25px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}
.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
    overflow: hidden;
}

    </style>
  </head>
  <body>
    <!-- Content container -->
    <div class="container">

      <!-- Image and name container. Change to your pictue here. -->
      <div style="text-align: center">
        <br><br><br><br><br><br><br>
        <div class="profile-card">
<img src="removed" class="profile-picture" id="profile-picture">        <br><br>
        <p><span class="name" style="font-weight: bolder;">Alex</span> 
        <span class="status"> <span class="status-dot"></span> Available to work</span></p>

      <!-- Links section 1. Replace the # inside of the "" with your links. -->
      <div class="links-container">
        <a href="removed" class="button" target="_blank">Contact me</a>
      </div>
<div style="text-align: center">
              <p style="font-weight: bolder;"><span class="off">This offer</span> ends in <p id="demo"><script src="./countdown.js"></script></p></p>
 </div>

    </div>
    </div>
    </div>
    <script>
      feather.replace()
    </script>
  </body>  
</html>

<p id="demo">
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 5, 2024 15:37:25").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("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

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