Confetti & SweetAlert in Lightning Web Component

confettiComponent.html

<template>
  <p>Confetti and Sweet alert demo using LWC component</p>
  
  <canvas class="confettiCanvas" id="canvas" lwc:dom="manual"></canvas>

  <lightning-card title="Sweet Alert">
    <lightning-button
      label="Success"
      onclick={showSuccessAlert}
      variant="success"
      class="slds-m-left_x-small"
    ></lightning-button>


    <lightning-button
      label="Error"
      onclick={showFailureAlert}
      variant="destructive"
      class="slds-m-left_x-small"
    ></lightning-button>


    <lightning-button
      label="Warning"
      onclick={showWarningAlert}
      class="slds-m-left_x-small"
    ></lightning-button>


    <lightning-button
      label="Info"
      onclick={showInfoAlert}
      class="slds-m-left_x-small"
    ></lightning-button>
  </lightning-card>


  <lightning-card title="Confetti">
    <lightning-button
      label="Basic Cannon"
      onclick={basicCannon}
      class="slds-m-left_x-small"
    ></lightning-button>


    <lightning-button
      label="Random Cannon"
      onclick={randomCannon}
      class="slds-m-left_x-small"
    ></lightning-button>


    <lightning-button
      label="Fire Work"
      onclick={fireworks}
      class="slds-m-left_x-small"
    ></lightning-button>
  </lightning-card>
</template>

confettiComponent.js

import { LightningElement } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import CONFETTI from "@salesforce/resourceUrl/confetti";
import SWEETALERT from "@salesforce/resourceUrl/sweetalert";


export default class ConfettiComponent extends LightningElement {
  myconfetti;


  connectedCallback() {
    Promise.all([
      loadScript(this, CONFETTI + "/confetti.js"),
      loadScript(this, SWEETALERT + "/sweetalert.js")
    ])
      .then(() => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Success",
            message: "Dependencies loaded successfully",
            variant: "Success"
          })
        );
        this.setUpCanvas();
      })
      .catch(error => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error",
            message: error.message,
            variant: error
          })
        );
      });
  }


  setUpCanvas() {
    var confettiCanvas = this.template.querySelector("canvas.confettiCanvas");
    this.myconfetti = confetti.create(confettiCanvas, { resize: true });
    this.myconfetti({
      zIndex: 10000
    });
  }
  showSuccessAlert() {
    swal("Congrats", "You won the match", "success");
  }
  showFailureAlert() {
    swal("Failure", "Better luck next time", "error");
  }
  showInfoAlert() {
    swal("Info", "You are supposed to click Ok", "info");
  }
  showWarningAlert() {
    swal("Warning", "Maintainence page", "warning");
  }


  basicCannon() {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: {
        y: 0.6
      }
    });
  }


  randomFun(min, max) {
    return Math.random() * (max - min) + min;
  }


  randomCannon() {
    confetti({
      angle: this.randomFun(55, 125),
      spread: this.randomFun(50, 70),
      particleCount: this.randomFun(50, 100),
      origin: {
        y: 0.6
      }
    });
  }


  fireworks() {
    var end = Date.now() + 15 * 1000;


    // eslint-disable-next-line @lwc/lwc/no-async-operation
    let interval = setInterval(function() {
      if (Date.now() > end) {
        return clearInterval(interval);
      }


      // eslint-disable-next-line no-undef
      confetti({
        startVelocity: 30,
        spread: 360,
        ticks: 60,
        origin: {
          x: Math.random(),
          // since they fall down, start a bit higher than random
          y: Math.random() - 0.2
        }
      });
    }, 200);
  }
}

confettiComponent.css

.confettiCanvas{
    position: fixed;
}
p{
    background-color: white;
    font-size: 1.5rem;
}

confettiComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ConfettiComponent">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Confetti with SweetAlert component</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>