Member Avatar for alexxx1

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 (https://www.w3schools.com/howto/howto_js_countdown.asp), 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.

Edited by alexxx1
  • 2 Contributors
  • 4 Replies
  • 24 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by alexxx1
Member Avatar for Dani

You need to include all of the code in order to put everything together to get a working timer. The code <span id="demo" class="demo"></span> is HTML which we're using as a placeholder for where the timer should be. Then, the javascript actually is what makes the timer function, with code that keeps updating the HTML within that <span> tag.

If you copy and paste all of the HTML and Javascript code in the working demo here, and put it into an HTML page, you can build your own timer.

Alternatively, you can break it up into two files, uploaded to the same directory on the www, as so:

timer.html:

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
    </style>

    // Note we add this here to reference where the JS file is
    <script src="./countdown.js">
</head>
<body>

<p id="demo"></p>

</body>
</html>

countdown.js:

*Everything within <script> and </script> tags in the demo, as so:

// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2030 15:37:25").getTime();

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

    [...]

}, 1000);

I hope this makes some sense. Please reply if you have any follow up questions.

Member Avatar for alexxx1

The first option actually worked and thank you for that, but why doesn't it run with a link to the .js path? I wouldn't like to include all my codes to my main page

Edited by alexxx1
Member Avatar for Dani

It should run with a link to the .js file. You just need to then also upload the JS file :) How to do that was my second option.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.