Author: John Au-Yeung

Sometimes, we want to check if a div element is empty with JavaScript.

In this article, we’ll look at how to check if a div element is empty with JavaScript.

How to check if a div element is empty with JavaScript?

To check if a div element is empty with JavaScript, we can check if the innerHTML property of the div is empty.

For instance, we write:

<div></div>

to add an empty div.

Then we write:

const isEmpty = document.querySelector('div').innerHTML === "";
console.log(isEmpty)

to select the div with querySelector.

Then we check if its innerHTML property is an empty string.

If it is, then the div is empty.

Since, isEmpty logs true, the div is empty.

Conclusion

To check if a div element is empty with JavaScript, we can check if the innerHTML property of the div is empty.

Sometimes, we want to generate an image of a div and save the image to disk with JavaScript.

In this article, we’ll look at how to generate an image of a div and save the image to disk with JavaScript.

How to generate an image of a div and save the image to disk with JavaScript?

To generate an image of a div and save the image to disk with JavaScript, we can use the html2canvas library.

For instance, we write:

<script src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>

<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
</div>

to add the html2canvas script and a div that we want to capture and download as an image.

Then we write:

(async () => {
  const canvas = await html2canvas(document.querySelector("#capture"))
  const link = document.createElement("a");
  link.download = 'capture.png';
  link.href = canvas.toDataURL("image/png");
  link.click();
  link.remove()
})()

to put the div content into a canvas and return it as a promise with html2canvas.

Then we create a link with createElement.

We set the file name of the downloaded file by setting the download propert.

Next, we set the URL of the file to download to the image with canvas.toDataURL.

And then we call click to start the download.

Finally, we call remove to remove the link.

Conclusion

To generate an image of a div and save the image to disk with JavaScript, we can use the html2canvas library.

Sometimes, we want to detect Shift + Enter press in React onKeyPress event.

In this article, we’ll look at how to detect Shift + Enter press in React onKeyPress event.

How to detect Shift + Enter press in React onKeyPress event?

To detect Shift + Enter press in React onKeyPress event, we can check if shift+enter is pressed from the keypress event object.

For instance, we write:

import React from "react";

export default function App() {
  const handleKeyPress = (e) => {
    if (e.key === "Enter" && e.shiftKey) {
      console.log("pressed shift+enter");
    }
  };

  return (
    <div>
      <input onKeyPress={handleKeyPress} />
    </div>
  );
}

to set the onKeyPress prop of the input to the handleKeyPress function.

We check if e.key is 'Enter' and e.shiftKey is true to check if shift+enter is pressed.

Therefore, if we press both keys together, we see "pressed shift+enter" logged.

Conclusion

To detect Shift + Enter press in React onKeyPress event, we can check if shift+enter is pressed from the keypress event object.