Sweetalert2

Sweetalert2 is a modern, responsive, and customizable popup library that allows you to create beautiful, user-friendly alert boxes. It's widely used for displaying popups, alerts, and confirmations. This section covers the steps required to include Sweetalert2 in your project:

Install from Yarn

To install Sweetalert2, run the following command in the root directory of your project:

yarn add sweetalert2 --save

To use Sweetalert2 in your project, you need to include its stylesheet and JavaScript files in your HTML:

<link rel="stylesheet" href="assets/libs/sweetalert2/sweetalert2.min.css"><link/>

<script src="assets/libs/sweetalert2/sweetalert2.min.js"><script/>

Below is an example of the HTML code to create a Sweetalert2 popup. The button triggers a Sweetalert2 alert when clicked:

    Click Me

Here is the JavaScript code that initializes the Sweetalert2 instance. This will trigger a Sweetalert2 popup when the button is clicked:

document.getElementById("basicMessage").addEventListener("click", function() {
    Swal.fire(
        {
            title: 'Good job!',
            confirmButtonClass: 'btn btn-primary',
            buttonsStyling: false
        }
    )
});

The above JavaScript code does the following:

• Selects the button with the ID `basicMessage` and adds an event listener for the `click` event.
• Initializes the Sweetalert2 instance by calling `Swal.fire()`, which displays the popup.
• The `title` option sets the text shown in the popup.
• The `confirmButtonClass` option customizes the button's class for styling.
• The `buttonsStyling` option is set to `false`, which disables the default button styling of Sweetalert2 so you can customize it as needed.