Author: John Au-Yeung

Sometimes, we want to mute an HTML video player using JavaScript.

In this article, we’ll look at how to mute an HTML video player using JavaScript.

How to mute an HTML video player using JavaScript?

To mute an HTML video player using JavaScript, we set the muted property.

For instance, we write

const video = document.getElementById("your-video-id");
video.muted = true;

to select the video element with getElementById.

We then set muted to true to mute the video.

We write

video.muted = false;

to unmute the video.

Conclusion

To mute an HTML video player using JavaScript, we set the muted property.

Sometimes, we want to copy an array of objects to another array without object reference in JavaScript.

In this article, we’ll look at how to copy an array of objects to another array without object reference in JavaScript.

How to copy an array of objects to another array without object reference in JavaScript?

To copy an array of objects to another array without object reference in JavaScript, we use some JSON methods.

For instance, we write

const tempArray = JSON.parse(JSON.stringify(mainArray));

to call JSON.stringify with mainArray to convert the array to a JSON string.

Then we call JSON.parse with the string to convert it back to an array to make a copy.

This works if mainArray is an array with plain JavaScript objects or primitive values.

Conclusion

To copy an array of objects to another array without object reference in JavaScript, we use some JSON methods.

Sometimes, we want to get the previous month’s first date from current date in JavaScript.

In this article, we’ll look at how to get the previous month’s first date from current date in JavaScript.

How to get the previous month’s first date from current date in JavaScript?

To get the previous month’s first date from current date in JavaScript, we call getMonth and setMonth.

For instance, we write

const x = new Date();
x.setDate(1);
x.setMonth(x.getMonth() - 1);

to create date x.

Then we call setDate with 1 to set the day of the date to 1.

Next, we call getMonth to get the month of x.

We then subtract that by 1 and call setMonth to set the month to the previous month.

Conclusion

To get the previous month’s first date from current date in JavaScript, we call getMonth and setMonth.

Sometimes, we want to hide div element when screen size is smaller than a specific size with CSS.

In this article, we’ll look at how to hide div element when screen size is smaller than a specific size with CSS.

How to hide div element when screen size is smaller than a specific size with CSS?

To hide div element when screen size is smaller than a specific size with CSS, we use media queries.

For instance, we write

@media only screen and (max-width: 1026px) {
  #fadeshow1 {
    display: none;
  }
}

to check if the screen size has width less than or equal to 1026px.

If it is, then we hide the element with ID fadeshow1 with display: none;.

Conclusion

To hide div element when screen size is smaller than a specific size with CSS, we use media queries.

To flatten a nested object with JavaScript, we use the Object.keys and array reduce method.

For instance, we write

const flattenObj = (obj = {}) => {
  return Object.keys(obj).reduce((acc, cur) => {
    if (typeof obj[cur] === "object") {
      acc = { ...acc, ...flattenObj(obj[cur]) };
    } else {
      acc[cur] = obj[cur];
    }
    return acc;
  }, {});
};

to call Object.keys with obj to get an array of keys.

Then we call reduce with a callback to recursively call crushObj when obj[cur] is an object.

And we put the properties in the acc object.

Otherwise, we put obj[cur] in acc.

We then return acc which is the flattened object.