Halloween countdown (again) :(

Help
1

I started a new thread because the old one was getting cluttered.

I’ve copied this meticulously…

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halloween Countdown</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
   <p id= "countdown"></p>
   <script>
    var countDownDate = new Date("Oct 31, 2024 00:00:00").getTime();
    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;
      
      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);
      
    document.getElementById("countdown").innerHTML = days + "d" + hours + "h" + minutes + "m" + seconds + "s";
    
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "Happy Halloween, BOO-oop! See you next year!";
     }
    }, 1000);
   </script>
  </body>
</html>

…yet the webpage is totally blank! Why isn’t the timer appearing in the

tag?

2

Your parentheses don’t match up on the var minutes and var seconds lines — for each of those you have one more opening parenthesis than you do closing parentheses.

3

Ah. There are so many parentheses it’s hard to keep track. That worked, thanks! But how do I put spaces between days, hours, minutes, and seconds? The countdown is all smooshed together.

4

In your strings (the parts in quotes), you can add spaces. So instead of days + "d" you can do days + " d ".

1 Like
5

Aaaaaaaagh, now I have another problem. I’ve linked a css stylesheet to my html, but the css isn’t taking effect. I tried clearing the cache.

The link looks like this:

<link href="countdown-timer/halloween.css" rel="stylesheet" type="text/css" media="all">

and here’s the css:

.frankendiv {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAiZJREFUeF7tm0FSxDAMBDe/4Fk8lWfxi6X2iA+ZnZqJEkJztSRL7ZEwprI9+KkS2KrRCPYAaFkEAAVomUA5HAoFaJlAORwKvTvQ5+fH06lx+/q+lCgulcwLJEAdOb1hC9A3IDkm/x5oCmD1d2ei8k/zc8Twso1naJqwAqIKUv5pfmr/dR2gCxG3QwAqJDcOVLWYapHU/+j4aX52y6cbpv4AXQgAtAwEoGWgqmXPXk8PfHyGng1M7Q9QRchcB6gJTJkDVBEy1wFqAlPmAFWEzHWAmsCU+TjQNaE0AVXg0evt/O17KED3jxigy39Zx5/vUGhZoe2Zc/SMdOOn9dktn27oFjhtn9YH0PJrGkCngaYtMN2y7f3c+qVC3YDtgs6O59YPUHFiAC1LGqAALRMoh0OhAC0TKIdDoQAtEyiHQ6EALRMoh6sr9G4Pyoq3C3CNJ//0BKj3YRlAp5/vUOjBCr0b4HRmxjMUoPu/1uwZClCA7hI4veXbCah74fR6Wp/d8umG04Dc/dL6AMo91NWcZ49CPV7SGqASkWcAUI+XtAaoROQZ/DmgacIKTxo/9R+/NqUJA7R8zwMoQJUGfq+vLay8168s0hGg/NP8VD2Hv4eqBAAqCKUKUApTB6T80/zU/ihUEDr9wy/3BJX9tKJUPu66fQ91N3DtAeoSO3gml9Oxw6FQG9m+w+WAlusbDwfQMnKAArRMoBwOhQK0TKAcDoUCtEygHO4HExKAc0lJAKsAAAAASUVORK5CYII=") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
}

I’ve triple-checked the name of the css file, which is in the same folder as the html file. And I’ve made sure the css class is applied to the div.

Edit: never mind, I figured it out!

1 Like
6

Actually… I do need help again. The background of my div has rounded corners, but the corners of the border won’t round along with it. Here’s my code:

.frankendiv {
  border-radius: 20px;
  border-style: solid;
border-width: 5px;
  border-image: linear-gradient(to right, #ff5018, #fff59c) 1;
  background: #161118;
  color: #fff59c;
  font-family: Courier, monospace;
  text-align: center;
  width: 275px;
  padding: 10px;
}

I’ve tried overflow: hidden and added height: auto. Nothing is working.

7

MDN says:

border-radius has no effect on the border image. This is because border-image-outset is able to place the image outside the border box, so it doesn’t make sense for the border image to be clipped by the border area. To create rounded borders when using a border image, you should create the image itself with rounded corners, or, in the case of a gradient, draw it as the background instead.

at border-image - CSS: Cascading Style Sheets | MDN

8

In other words… no gradients with rounded corners? Aww.

9

you can get the effect by nesting one div inside another

1 Like