HTML HTML Text Format & Calculation

[Spencer]

Hi there,

So I am trying to embed a HTML Countdown timer into my website and have found this code from W3schools.com (https://www.w3schools.com/howto/howto_js_countdown.asp)

Two parts to my question:

1) How do I modify the first part of the code (when exported) to make it simple to change the font size, colour, alignment etc.? I am using a Google SItes website and the embed code doesn't seem to pick up the site's H1, H2 etc. styles. So what are the correct lines/variables to put in between p { }

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

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

2) How can I modify this line so that the timer counts down from seven days from when the page loaded? In other words, when someone visits the page it starts counting down from seven days? How might it look for counting down from 2 hours?

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

Thanks
++++++++++++++++++++++++++++++

Here's the full code

<!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>
</head>
<body>

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

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 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);
    
  // 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>

</body>
</html>

 

[Deleted member 2829]

1) What exactly is the issue with your <p> formatting ? This works fine in the WTC example you linked. And where do the "H1, H2 etc. styles" come in ? The code doesn't use them. Is this specific to Google Sites ?

2) Instead of hardcoding countDownDate you can set it to new Date().getTime() in the page's onLoad() event. Then subtract 7 days (7*24*60*60 seconds) and use that date instead in the counter. For 2 hours, only subtract 2*60*60 seconds.

HTH - if I understood your question correctly, which I'm not sure about.

 

[Spencer]

1) What exactly is the issue with your <p> formatting ? This works fine in the WTC example you linked. And where do the "H1, H2 etc. styles" come in ? The code doesn't use them. Is this specific to Google Sites ?

2) Instead of hardcoding countDownDate you can set it to new Date().getTime() in the page's onLoad() event. Then subtract 7 days (7*24*60*60 seconds) and use that date instead in the counter. For 2 hours, only subtract 2*60*60 seconds.

HTH - if I understood your question correctly, which I'm not sure about.

Thanks for responding - really appreciate it.

The code works fine and the formatting is fine as it is. I just wanted to know how to change its size and colour in this instance so I can get it to fit in better with the website (It's probably going to be on a dark background and so think it will need to be white). I suggested h1, h2, etc since Google Sites uses some preformated styles (Heading, Sub-Heading etc.) which I thought would align to h1, h2 and so on, meaning this counter could follow the site's style.

Thanks for the second part - I will give that a go.

 

[Deleted member 2829]

I'm still not sure what Google Sites with its h1, h2, etc has to do with this (I admit not knowing anything about Google Sites).
But surely you can do anything you like in the CSS entry for p ? Although I think that should have been named #demo otherwise there is little point in giving your paragraph id="demo".