Author: John Au-Yeung

To determine image dimensions in JavaScript, we can use the Image constructor to create the image object and get the dimensions from there.

For instance, we write:

const img = new Image();
img.src = "https://i.picsum.photos/id/686/200/300.jpg?hmac=KpugvfnM7VFRRbf_yihA6yObvfaWEJEEXeeFEqmVegQ";
img.onload = () => {
  const actualwidth = img.width;
  const actualheight = img.height;
  console.log(actualwidth, actualheight)
}

to create the Image instance and assign it to img .

Next, we set the src property of the image.

Then we set the img.onload property to a function.

In the function, we get the width and height properties of img , which are the width and height of the image respectively.

To convert the day of the year to a date object in JavaScript, we can pass the year into the Date constructor.

For instance, we can write:

const dateFromDay = (year, day) => {
  const date = new Date(year, 0);
  return new Date(date.setDate(day));
}

console.log(dateFromDay(2020, 301))

to create the dateFromDay function that takes the year and day parameters.

We pass the year into the Date constructor when we create the date object.

Then we call setDate with day to set the day of the year.

Therefore, the console log should log:

Tue Oct 27 2020 00:00:00 GMT-0700 (Pacific Daylight Time)

To create a countdown timer using Moment.js, we can use the setInterval function to display the time remaining as time elapses.

For instance, we can write the following HTML:

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

<div>

</div>

to add the script tag and div.

Then we write:

const eventTime = 1366549200;
const currentTime = 1366547400;
const diffTime = eventTime - currentTime;
let duration = moment.duration(diffTime * 1000, 'milliseconds');
const interval = 1000;
const countdown = document.querySelector('div')

setInterval(() => {
  duration = moment.duration(duration - interval, 'milliseconds');
  countdown.innerText = duration.hours() + ":" + duration.minutes() + ":" + duration.seconds()
}, interval);

to add the countdown logic.

We have the eventTime and currentTime timestamps in milliseconds.

Then we compute their difference and assigned it to diffTime .

We then call moment.duration to get the duration in milliseconds.

Next, we add:

duration = moment.duration(duration - interval, 'milliseconds');

into the setInterval callback to get the duration remaining.

Then we display the time remaining in the div with:

countdown.innerText = duration.hours() + ":" + duration.minutes() + ":" + duration.seconds()

Sometimes, we want to check if a JavaScript function is a constructor

In this article, we’ll look at how to check if a JavaScript function is a constructor.

Check if a JavaScript Function is a Constructor

To check if a JavaScript function is a constructor, we can check if we can use the new operator with it.

To do this, we write:

const handler = {
  construct() {
    return handler
  }
}

const isConstructor = x => {
  try {
    return !!(new(new Proxy(x, handler))())
  } catch (e) {
    return false
  }
}

console.log(isConstructor(() => {}))
console.log(isConstructor(class {}))

We create a proxy in the isConstructor function that takes any variable x .

Then we use the new operator on the proxy version of x , which we create with:

(new Proxy(x, handler))()

If that works, then we know the x is a constructor since we create a new instance of x .

Otherwise, an error is throw and false is returned.

Therefore, the first console log logs false and the 2nd one logs true .