A website's small confetti burst of joy! 🎉 (JavaScript)

confetti-burst.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script async>
  confetti.create(null, {
    resize: true,
    useWorker: true,
  })({ particleCount: 200, spread: 200 });
</script>

confetti-buttons.html

<button data-confetti>Celebrate!</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script>
  const burst = () => (confetti.create(null, {
      resize: true,
      useWorker: true,
    })({ particleCount: 200, spread: 200 }));
  
  // Find our components in the DOM
  const buttons = document.querySelectorAll('[data-confetti]');
  // Add event listeners to fire confetti when a button is clicked.
  buttons.forEach((button) => {
    button.addEventListener('click', () => burst());
  });
</script>