Author: John Au-Yeung

Sometimes, we want to change cursor when loading page in JavaScript

In this article, we’ll look at how to change cursor when loading page in JavaScript.

How to change cursor when loading page in JavaScript?

To change cursor when loading page in JavaScript, we can set the cursor CSS property of the body element.

For instance, we write:

document.body.style.cursor = 'wait';
setTimeout(() => {
  document.body.style.cursor = 'default';
}, 2000)

We set document.body.style.cursor to 'wait' to show the loading cursor.

Then we set document.body.style.cursor to 'default' to show the default arrow cursor after 2 seconds.

Conclusion

To change cursor when loading page in JavaScript, we can set the cursor CSS property of the body element.

Sometimes, we want to create a canvas 2d context without displaying the canvas with JavaScript.

In this article, we’ll look at how to create a canvas 2d context without displaying the canvas with JavaScript.

How to create a canvas 2d context without displaying the canvas with JavaScript?

To create a canvas 2d context without displaying the canvas with JavaScript, we can use the document.createElement method.

For instance, we write:

const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(20, 10, 80, 50);

const imgUrl = canvas.toDataURL();
const img = document.createElement('img');
img.src = imgUrl

document.body.appendChild(img)

to create the canvas with createElement.

Then we get the context with getContext.

Next, we set the fill style and add a rectangle with fillStyle and fillRect.

Then we convert the canvas to an image URL string with toDataURL.

Finally, we create an img element with createElement, set the src attribute to imgUrl and append the img element as a child of the body element with document.body.appendChild.

Now we should see a red rectangle displayed,

Conclusion

To create a canvas 2d context without displaying the canvas with JavaScript, we can use the document.createElement method.

Sometimes, we want to convert enums to array of values with JavaScript.

In this article, we’ll look at how to convert enums to array of values with JavaScript.

How to convert enums to array of values with JavaScript?

To convert enums to array of values with JavaScript, we can use the Object.values method.

For instance, we write:

const types = {
  "WHITE": 0,
  "BLACK": 1
}
const vals = Object.values(types)
console.log(vals)

to call Object.values with types to return an array of the property values.

Therefore, vals is [0, 1].

Conclusion

To convert enums to array of values with JavaScript, we can use the Object.values method.

Sometimes, we want to change the 1-24 hour return from the JavaScript date’s getHours method to a 1-12 hour.

In this article, we’ll look at how to change the 1-24 hour return from the JavaScript date’s getHours method to a 1-12 hour.

How to change the 1-24 hour return from the JavaScript date’s getHours method to a 1-12 hour?

To change the 1-24 hour return from the JavaScript date’s getHours method to a 1-12 hour, we can use the % operator.

For instance, we write:

const hours12 = (date) => {
  return (date.getHours() + 24) % 12 || 12;
}

const d = new Date('December 25, 2022 23:15:30')
console.log(hours12(d))

We define the hours12 to return the hours of the date in 12 hour format instead of 24.

In the function, we call date.getHours to get the hours, which is between 1 and 24.

Then we convert it to 12 hour format by adding 24 and then use the % to get the remainder when the result is divided by 12.

If the remainder is 0, then we return 12.

Therefore, the console log should log 11.

Conclusion

To change the 1-24 hour return from the JavaScript date’s getHours method to a 1-12 hour, we can use the % operator.

Sometimes, we want to format datetime in JavaScript.

In this article, we’ll look at how to format datetime in JavaScript.

How to format datetime in JavaScript?

To format datetime in JavaScript, we can use the moment.js’ format method.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

to add the moment script.

Then we write:

const s = moment("2022-01-17T08:44:29+0100").format('MM/DD/YYYY');
console.log(s)

to call moment with a datetime string to create a moment object.

Then we call format on it with a format string to format it in the format specified.

Therefore, s is '01/16/2022'.

Conclusion

To format datetime in JavaScript, we can use the moment.js’ format method.