jQuery addClass example

Change class name on click in jQuery

by Sampath_Madhuranga

CSS

.search__popup { /* I think the problem is here. But I don't know how to solve it */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1500rem;
  width: 1500rem;

  &--popup {
    height: 50rem;
  }
  &--header {
    transform: translateY(-17rem);
  }
  &--input {
    transform: translateY(-16rem);
  }
}

JavaScript

const search = document.querySelector( // This is the element that when I click on. The popup gets fired
  ".fas.fa-search.navigation__search-cart--icon"
);

search.addEventListener("click", () => {
  Swal.fire({
    title: "Search",
    input: "text",
    inputPlaceholder: "Search...",
    inputAttributes: {
      autocapitalize: "off"
    },
    confirmButtonText: "Search",
    showLoaderOnConfirm: true,
    customClass: { // Here are the classes that were styled with CSS
      container: "search__popup",
      popup: "search__popup--popup",
      header: "search__popup--header",
      title: "search__popup--title",
      closeButton: "search__popup--close",
      icon: "search__popup--icon",
      image: "search__popup--image",
      content: "search__popup--content",
      input: "search__popup--input",
      actions: "search__popup--actions",
      confirmButton: "search__popup--confirm",
      cancelButton: "search__popup--cancel",
      footer: "search__popup--footer"
    },
    preConfirm: async val => {
      try {
        const response = await fetch(`//api.github.com/users/${val}`);
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        return response.json();
      } catch (err) {
        Swal.showValidationMessage(`Request failed: ${err}`);
      }
    },
    allowOutsideClick: () => !Swal.isLoading()
  }).then(result => {
    if (result.value) {
      Swal.fire({
        title: `${result.value.login}'s avatar`,
        imageUrl: result.value.avatar_url
      });
    }
  });
});