TLG Countdown Timer

The last countdown timer component you'll ever need.

Days

Hours

Minutes

Seconds

Tutorial

Bonus: Confetti

Below is an example of a code snippet you can add to the page to blast confetti when a countdown reaches 0. It uses a custom event countdownEnded which triggers when a countdown has reached 0. Make sure the event listener is added before the countdown timer, for most consistent behaviour.

<!-- Blast Confetti -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
<script>
  // Function to blast emoji confetti
  function blastConfetti() {

    const scalar = 4; // Scale factor
    const emojis = ["🎉", "😂", "💩", "🎈", "🤩", "🎂", "🍕", "🌈", "🦄"];

    // Map the emojis to shapes using shapeFromText with scalar
    const emojiShapes = emojis.map((emoji) => confetti.shapeFromText({ text: emoji, scalar }));

    confetti({
      spread: 100,
      origin: { x: 0.5, y: 0.9 },
      decay: 0.94,
      ticks: 400,
      shapes: emojiShapes,
      scalar,
    });
  };

  // Call the function when the countdown reaches 0
  document.addEventListener("countdownEnded", (event) => {
    blastConfetti();
  });
</script>