Free Halloween Widgets with Countdown

We are just a week away from Halloween! and I am sure that the celebrations have already begun at your school or the workplace. If you run a website and want to quickly add some Halloween widgets to it, we are offering some of them for free!

Feel free to edit the code and customize it as per your needs.

Halloween Widget 1:

HTML:

<div id="countdown-widget">
  <img id="h-img" width=160 height=160 src="https://code2care.org/c2c-img/shared/halloween.png?y=2023"
   alt="Halloween Countdown!!">
  <div id="heading">Halloween Countdown!</div>
 <div id="countdown"></div>
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Creepster'); 
 
 #countdown-widget {
   text-align: center;
   padding: 20px;
   text-align: center;
   padding: 20px;
   border: 5px solid #ff6600;
   background: black;
   border-radius: 12px;
   width: 340px;
 }

#h-img {
   max-width: 180px;
   height: auto;
 }

#heading {
   font-family: 'Creepster', cursive;
   color: orange;
   font-size: 34px;
 }

 #countdown {
   font-family: 'Creepster', cursive;
   color: orange;
   margin-top:15px;
   font-size: 26px;
 }

JavaScript:

const d = new Date("October 31, 2023 00:00:00").getTime();
const i = setInterval(() => {
  const c = new Date().getTime();
  const r = d - c;
  const [a, h, m, s] = [
    r / (1000 * 60 * 60 * 24),
    (r % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
    (r % (1000 * 60 * 60)) / (1000 * 60),
    (r % (1000 * 60)) / 1000
  ].map(Math.floor);
  const e = document.getElementById("countdown");
  e.innerHTML = `${a}d ${h}h ${m}m ${s}s`;
  if (r < 0) {
    clearInterval(i);
    e.innerHTML = "Happy Halloween!";
  }
}, 1000);

Demo:

Halloween Widget 2:

You can try the image "https://code2care.org/c2c-img/shared/trick-or-treat.png"

Demo:

Halloween Widget 3:

You can try the image "https://code2care.org/c2c-img/shared/happy-halloween.png"

Demo:

Command Palette

Free Halloween Widgets with Countdown

Halloween Widget 1:

Halloween Widget 2:

Halloween Widget 3:

Comments & Discussion

Provide Feedback For This Article