Category: JavaScript Answers

Sometimes, we want to get the time difference between 2 dates in seconds.

In this article, we’ll look at how to get the time difference between 2 dates in seconds with JavaScript.

Convert the Dates to Timestamps in Milliseconds Then Get the Difference Between Them and Convert the Difference to Seconds

We can convert the dates to timestamps in milliseconds.

Then we can subtract them to get the difference between them.

And then we can convert the difference in milliseconds to seconds.

For instance, we can write:

const startDate = new Date(2020, 1, 1);  
const endDate = new Date(2020, 2, 1);  
const seconds = (endDate.getTime() - startDate.getTime()) / 1000;  
console.log(seconds)

We have the startDate and endDate which we can convert both to timestamps in milliseconds with getTime .

Then we subtract the timestamp of endDate by the timestamp of startDate .

This will return the timestamp difference in milliseconds.

So we divide the difference by 1000 to get the difference in seconds.

Therefore, seconds should be 2505600 .

We can replace getTime with the unary + operator.

For instance, we can write:

const startDate = new Date(2020, 1, 1);  
const endDate = new Date(2020, 2, 1);  
const seconds = (+endDate - +startDate) / 1000;  
console.log(seconds)

to convert startDate and endDate to timestamps with the unary + operator.

And we get the same result as before.

Conclusion

We can get the time difference between 2 dates in seconds by converting them both to timestamps.

Then we can subtract the timestamps and convert the difference to seconds.

Sometimes we want to loop through all DOM elements on a page with JavaScript.

In this article, we’ll look at how to loop through all DOM elements on a page with JavaScript.

Select All Elements with document.getElementsByTagName

We can select all elements on a page with the document.getElementsByTagName method.

For instance, if we have the following HTML:

<div>
  <span>hello world</span>
</div>
<p>
  how are you
</p>

Then we can loop through all of them by writing:

const allEls = document.getElementsByTagName("*");
for (const el of allEls) {
  console.log(el)
}

We select all elements by calling document.getElementsByTagName with '*' .

And then we can loop through all the returned elements with the for-of loop.

Select All Elements with document.querySelectorAll

We can select all elements on a page with the document.querySelectorAll method.

For instance, if we have the following HTML:

<div>
  <span>hello world</span>
</div>
<p>
  how are you
</p>

Then we can loop through all of them by writing:

const allEls = document.querySelectorAll("*");
for (const el of allEls) {
  console.log(el)
}

We select all elements by calling document.querySelectorAll with '*' .

And then we can loop through all the returned elements with the for-of loop.

Conclusion

We can use the document.getElementsByTagName or document.querySelectorAll method to get all elements on a page.

Then we can loop through them all with the for-of loop.

Sometimes, we want to add an ordinal suffix to a JavaScript number.

In this article, we’ll look at how to add an ordinal suffix to a JavaScript number.

Use the Intl.PluralRules Constructor

We can add the correct ordinal suffix to a JavaScript number easily with the Intl.PluralRules constructor.

For instance, we can use it by writing:

const ordinal = (number) => {
  const ordinalRules = new Intl.PluralRules("en", {
    type: "ordinal"
  });
  const suffixes = {
    one: "st",
    two: "nd",
    few: "rd",
    other: "th"
  };
  const suffix = suffixes[ordinalRules.select(number)];
  return (number + suffix);
}
console.log(ordinal(101))

We create the ordinal function with the number parameter.

In the function, we create the ordinalRules object with the Intl.PluralRules constructor.

The first argument is 'en' which gets the rules for the English locale.

The 2nd argument is an object with type set to 'ordinal' which lets us return the ordinal rules.

Next, we create the suffixes object with the rules.

Then we call the select method with the number to return 'one' , 'two' , 'few' or 'other' .

So the suffix would be one of the property values in suffixes .

And finally, we return the number and suffix concatenated together.

Therefore the console log should log '101st' .

Conclusion

We can use the Intl.PluralRules constructor to add an ordinal suffix to a JavaScript number.

Sometimes we want to clone an object in our JavaScript code.

In this article, we’ll look at how to clone an object with JavaScript.

Use the Object.assign Method

One way to clone a JavaScript object is to use the Object.assign method.

For instance, we can write:

const obj = {
  a: 1
};
const copy = Object.assign({}, obj);
console.log(copy);

We call Object.assign with an empty object and obj to copy the properties of obj onto the empty object and return it.

Then copy has the same content as obj .

Use the Spread Operator

Another way to clone an object is to use the spread operator.

It works the same way as Object.assign .

For example, we can use it by writing:

const obj = {
  a: 1
};
const copy = {
  ...obj
};
console.log(copy);

Then we get the same result as the previous example.

Use the Lodash cloneDeep Method

If we need to deep clone an object, then we can use the Lodash cloneDeep method to do the cloning.

It’ll clone properties at all levels instead of just the top level.

For instance, we can use it by writing:

const obj = {
  a: 1
};
const copy = _.cloneDeep(obj);
console.log(copy);

Then copy is a deep copy of obj .

Conclusion

We can copy an object with the Object.assign method or the spread operator.

To deep clone an object, we can use the Lodash cloneDeep method.

Sometimes, we want to replace a DOM element in place with JavaScript.

In this article, we’ll look at how to replace a DOM element in place with JavaScript.

Use the parentNode.replaceChild Method

We can replace a DOM element in place with JavaScript by getting the parent of the element we want to replace.

Then we can call the replaceChild method on it to replace the element in place of the current child element of the parent.

For instance, if we have the following HTML:

<div>  
  hello world  
</div>

Then we can do the replacement by writing:

const div = document.querySelector("div");  
const span = document.createElement("span");  
span.innerHTML = "hello james";  
div.parentNode.replaceChild(span, div);

We get the div with document.querySelector .

Then we create a span that we want to replace the div with with document.createElement .

Next, we set the content of the span by setting the innerHTML property.

And finally, we call div.parentNode.replaceChild with the span and the div to replace the div with the span.

Now we should see ‘hello james’ in place of ‘hello world’

Use the replaceWith Method

An easier way to replace an element with another is to use the replaceWith method.

To use it, we write:

const div = document.querySelector("div");  
const span = document.createElement("span");  
span.innerHTML = "hello james";  
div.replaceWith(span);

In the last line, we call div.replaceWith with span to replace the div with the span .

And we get the same result as the previous example.

Conclusion

We can replace a DOM element in place by getting the parent node of the element we want to replace and call replaceChild on the parent node.

Or we can call the replaceWith on the element we want to replace and pass in the element we want to replace as the argument.