Author: John Au-Yeung

Sometimes, we want to get the week of the month with JavaScript.

In this article, we’ll look at how to get the week of the month with JavaScript.

How to get the week of the month with JavaScript?

To get the week of the month with JavaScript, we can use some date methods.

For instance, we write:

const d = new Date();
const date = d.getDate();
const day = d.getDay();
const weekOfMonth = Math.ceil((date - 1 - day) / 7);
console.log(weekOfMonth)

We use the getDate and getDay methods to get the day of the month and the day of the week respectively.

Then we use Math.ceil((date - 1 - day) / 7) to get the week of the month by subtracting the date from 1 + day divided by 7.

Conclusion

To get the week of the month with JavaScript, we can use some date methods.

Sometimes, we want to detect paste in input box with JavaScript.

In this article, we’ll look at how to detect paste in input box with JavaScript.

How to detect paste in input box with JavaScript?

To detect paste in input box with JavaScript, we can listen to the paste event of the input.

For instance, we write:

<input type="text" />

to add an input.

Then we write:

const input = document.querySelector('input')
input.onpaste = (e) => {
  setTimeout(() => {
    console.log(e.target.value)
  }, 0)
}

to select the input with document.querySelector.

Then we set the input.onpaste property to a function that gets the pasted value from e.target.value.

We put the log inside the setTimeout callback since the input is only updated one tick after pasting the content.

Conclusion

To detect paste in input box with JavaScript, we can listen to the paste event of the input.

Sometimes, we want to get an element position relative to the top of the viewport with JavaScript.

In this article, we’ll look at how to get an element position relative to the top of the viewport with JavaScript.

How to get an element position relative to the top of the viewport with JavaScript?

To get an element position relative to the top of the viewport with JavaScript, we can add the top CSS value to the pageYOffset value.

For instance, we write:

<p>
  hello
</p>

to add a p element.

Then we write:

const el = document.querySelector('p')
const t = el.getBoundingClientRect().top +
  el.ownerDocument.defaultView.pageYOffset
console.log(t)

to select the p element with querySelector.

Then we get the p element’s position relative to the top of the viewport by writing:

const t = el.getBoundingClientRect().top +
  el.ownerDocument.defaultView.pageYOffset

Conclusion

To get an element position relative to the top of the viewport with JavaScript, we can add the top CSS value to the pageYOffset value.

Sometimes, we want to pixelate an image with canvas and JavaScript.

In this article, we’ll look at how to pixelate an image with canvas and JavaScript.

How to pixelate an image with canvas and JavaScript?

To pixelate an image with canvas and JavaScript, we can call drawImage with a size smaller than the canvas size.

For instance, we write:

<canvas style='width: 200px; height: 200px'></canvas>

to add a canvas.

Then we write:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.onload = () => {
  const size = 0.1,
    w = canvas.width * size,
    h = canvas.height * size;

  ctx.drawImage(img, 0, 0, w, h);

  ctx.msImageSmoothingEnabled = false;
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;

  ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);
}
img.src = 'https://picsum.photos/200/300'

We select the canvas with document.querySelector.

Then we get the context with getContext.

Next, we create a new Image instance and set the onload property to a function that calls drawImage with width w and height h that is smaller than the canvas size.

We then set image smoothing settings all to false.

Finally, we call drawImage with width w and height h again to draw the image.

Now we should see a pixelated image drawn.

Conclusion

To pixelate an image with canvas and JavaScript, we can call drawImage with a size smaller than the canvas size.

Sometimes, we want to create an array of empty strings with JavaScript.

In this article, we’ll look at how to create an array of empty strings with JavaScript.

How to create an array of empty strings with JavaScript?

To create an array of empty strings with JavaScript, we can use the Array function and the fill method.

For instance, we write:

const arr = Array(20).fill("");
console.log(arr)

to create an array with 20 empty slots with Array(20).

Then we call fill with an empty string to fill the empty slots with empty strings.

Therefore, arr is an array with 20 empty strings.

Conclusion

To create an array of empty strings with JavaScript, we can use the Array function and the fill method.