Halloween countdown

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

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

I copy pasted this from w3schools. I want to try to make a Halloween countdown for our Frankenpage. How do I make it so that it displays “Happy Halloween!” for 24 hours on the 31st, then resets the countdown for next year on midnight of November 1?

3

You would want countDownDate to be set to next Halloween rather than always Halloween 2024. This can be achieved by replacing the beginning of the script with this:

// Set the date we're counting down to
var countDownDate = new Date(new Date().getFullYear()+(new Date().getMonth()>9),9,31).getTime();

(Note the month in the Date constructor is offset by 1, which is why we use the month 9 for October.)
Then you can replace the "EXPIRED" with "Happy Halloween!". When the page is refreshed on --11-01 or later, it’ll be counting down to next year’s Halloween again.

1 Like
4

Actually, someone’s done this already. I’d copy and paste from that script instead, it’s much cleaner and the year isn’t hard-coded.

2 Likes
5

How do I connect the script to the HTML? I don’t know much about Javascript.

6

The code you shared in your original post already connects the JavaScript script to HTML by wrapping the JavaScript script in the HTML <script> tag.

7

Just to add a little more info on how the JS is connected to the HTML, in the original example, there’s this empty paragraph with an id in the HTML:

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

This is where the changing text goes. In the JavaScript, it changes the text in this paragraph with the lines that look like this:

document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

Breaking this specific line down further, the first part selects that specific paragraph by using its unique id, “demo.”

document.getElementById("demo")

The next part then says “set the content inside of this paragraph to something.”

.innerHTML =

And finally the bit after the equals sign is what the paragraph’s content is changed to. In this case it’s taking the variables defined by the code (days, hours, minutes, seconds) and combining them with letters (and spaces) to help label/format them.

days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
2 Likes
8

So, is it okay if I change the id to something other than “demo”? That won’t break anything, will it?

9

Yep that’s okay, just as long as the id matches in all places it’s being used (in the HTML and JavaScript).

1 Like
10

I finished my manatee image (shown below) but how do I make the countdown overlap it? I tried applying background-image to the paragraph the script is in, but that made the top of the manatee’s face repeat in a grid.