Author: John Au-Yeung

Sometimes, we want to save a PNG in a JavaScript string to disk.

In this article, we’ll look at how to save a PNG in a JavaScript string to disk.

How to save a PNG in a JavaScript string to disk?

To save a PNG in a JavaScript string to disk, we can create an anchor element, set the href property to the base64 PNG image string, then call click to download the image.

For instance, we write:

const download = document.createElement('a');
download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
download.download = 'reddot.png';
download.click();

to call document.createElement to create an anchor element.

Then we set download.href to the base64 PNG image string.

Next, we set download.download to the file name we want to save the file as.

Finally, we call click to download the file.

Conclusion

To save a PNG in a JavaScript string to disk, we can create an anchor element, set the href property to the base64 PNG image string, then call click to download the image.

Sometimes, we want to access nested child elements with jQuery.

In this article, we’ll look at how to access nested child elements with jQuery.

How to access nested child elements with jQuery?

To access nested child elements with jQuery, we can use the child element selector.

For instance, we write:

<div id="ParentDiv">
  <div id="SubDiv1"></div>
  <div id="SubDiv2">
    <input>
  </div>
</div>

to add some divs with an input inside.

Then we write:

const el = $('#ParentDiv input');
console.log(el)

to select the input which is in the div with ID ParentDiv.

As a result, el should be the input which is in the div with ID ParentDiv.

Conclusion

To access nested child elements with jQuery, we can use the child element selector.

Sometimes, we want to select 5 random elements with JavaScript.

In this article, we’ll look at how to select 5 random elements with JavaScript.

How to select 5 random elements with JavaScript?

To select 5 random elements with JavaScript, we can spread the elements into an array.

Then we can use the array sort method to shuffle the array.

And we use slice to pick the first 5 items.

For instance, we write:

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>4th</li>
  <li>6th</li>
  <li>7th</li>
  <li>8th</li>
  <li>9th</li>
  <li>10th</li> 
</ul>

to add some li elements.

Then we write:

const els = document.querySelectorAll('li')
const randomElements = [...els]
  .sort(() => {
    return Math.random() - 0.5
  })
  .slice(0, 5)
console.log(randomElements)

to select all the li’s with querySelectorAll.

Then we spread the els into an array.

Next, we call sort on the elements array with a callback that picks a random number that can be positive or negative to shuffle the array.

Then we call slice with 0 and 5 to return the first 5 elements from the shuffled array.

Conclusion

To select 5 random elements with JavaScript, we can spread the elements into an array.

Then we can use the array sort method to shuffle the array.

And we use slice to pick the first 5 items.

Sometimes, we want to check whether the date entered by the user is current date or the future date with JavaScript.

In this article, we’ll look at how to check whether the date entered by the user is current date or the future date with JavaScript.

How to check whether the date entered by the user is current date or the future date with JavaScript?

To check whether the date entered by the user is current date or the future date with JavaScript, we can set the time to midnight on each date and compare them.

For instance, we write:

const inFuture = (date) => {
  return date.setHours(0, 0, 0, 0) > new Date().setHours(0, 0, 0, 0)
};

console.log(inFuture(new Date(2029, 1, 1)))
console.log(inFuture(new Date(2019, 1, 1)))

to define the inFuture function that takes a date.

In the function, we call setHours with all 0’s to set the dates to midnight of the same date.

Then we check if date is bigger than new Date() to check if date is in the future.

Therefore, if today is January 21, 2022, then the first console log is true and the 2nd log is false.

Conclusion

To check whether the date entered by the user is current date or the future date with JavaScript, we can set the time to midnight on each date and compare them.

Sometimes, we want to use setAttribute to set multiple classes on an element with JavaScript.

In this article, we’ll look at how to use setAttribute to set multiple classes on an element with JavaScript.

How to use setAttribute to set multiple classes on an element with JavaScript?

To use setAttribute to set multiple classes on an element with JavaScript, we can call setAttribute with all the class names separated by a space each.

For instance, we write:

<div>

</div>

to add a div.

Then we write:

const element = document.querySelector('div')
element.setAttribute("class", "class1 class2");

to select the div with querySelector.

Then we call setAttribute with 'class' and 'class1 class2' to set the class attribute of the div to class1 class2.

Conclusion

To use setAttribute to set multiple classes on an element with JavaScript, we can call setAttribute with all the class names separated by a space each.