Author: John Au-Yeung

Sometimes, we want to display HTML code in text with sweet-alert and JavaScript.

In this article, we’ll look at how to display HTML code in text with sweet-alert and JavaScript.

How to display HTML code in text with sweet-alert and JavaScript?

To display HTML code in text with sweet-alert and JavaScript, we can use the Swal.fire method.

For instance, we write

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

to add the sweet-alert 2 script tag.

Then we write

Swal.fire({
  title: "<i>Title</i>",
  html: "Test: <b>test</b>",
  confirmButtonText: "<u>OK</u>",
});

to call Swal.fire with an object with the title, html content, and the confirmButtonText content of the alert box.

Conclusion

To display HTML code in text with sweet-alert and JavaScript, we can use the Swal.fire method.

Sometimes, we want to fix .flat() is not a function with JavaScript.

In this article, we’ll look at how to fix .flat() is not a function with JavaScript.

How to fix .flat() is not a function with JavaScript?

To fix .flat() is not a function with JavaScript, we can use the array reduce method instead of flat.

For instance, we write

const flatArr = result.reduce((acc, curr) => acc.concat(curr), []);

to call reduce with a callback that calls acc.concat(curr) to return an array with all the arrays in result combined into one flattened array with concat.

The 2nd argument is an empty array so acc‘s initial value is an empty array.

Conclusion

To fix .flat() is not a function with JavaScript, we can use the array reduce method instead of flat.

Sometimes, we want to fix UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block with JavaScript.

In this article, we’ll look at how to fix UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block with JavaScript.

How to fix UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block with JavaScript?

To fix UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block with JavaScript, we add a catch block.

For instance, we write

router.get("/emailfetch", authCheck, async (req, res) => {
  try {
    let emailFetch = await gmaiLHelper.getEmails(
      req.user._doc.profileId,
      "/messages",
      req.user.accessToken
    );
    emailFetch = emailFetch.data;
    res.send(emailFetch);
  } catch (error) {
    res.status(error.response.status);
    return res.send(error.message);
  }
});

to call getEmails which returns a promise.

If the returned promise is rejected, then the code in the catch block is run.

In the catch block, we run code to return a promise with error data.

Conclusion

To fix UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block with JavaScript, we add a catch block.

Sometimes, we want to add CSS to the HTML head element in JavaScript.

In this article, we’ll look at how to add CSS to the HTML head element in JavaScript.

How to add CSS to the HTML head element in JavaScript?

To add CSS to the HTML head element in JavaScript, we use createElement and appendChild.

For instance, we write

const addCssToDocument = (css) => {
  const style = document.createElement("style");
  style.innerText = css;
  document.head.appendChild(style);
};

to define the addCssToDocument function.

In it, we call createElement to create a style element.

Then we set its innerText property to a css string.

Next, we call document.head.appendChild with style to append the style element has the head element’s last child.

Conclusion

To add CSS to the HTML head element in JavaScript, we use createElement and appendChild.

Sometimes, we want to open a popup with JavaScript and then detect when the user closes it.

In this article, we’ll look at how to open a popup with JavaScript and then detect when the user closes it.

How to open a popup with JavaScript and then detect when the user closes it?

To open a popup with JavaScript and then detect when the user closes it, we can use the closed property.

For instance, we write

const winObj = window.open(
  "http://www.eexample.com",
  "google",
  "width=800,height=600,status=0,toolbar=0"
);

const loop = setInterval(() => {
  if (winObj.closed) {
    clearInterval(loop);
    alert("closed");
  }
}, 1000);

to call window.open to open a popup window.

Then we call setInterval with a callback that checks if winObj.closed is true.

If it is, then we call clearInterval to stop running the setInterval callback every second and call alert to show an alert box.

Conclusion

To open a popup with JavaScript and then detect when the user closes it, we can use the closed property.