Category: JavaScript

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

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 do something when a user right-clicks on an element in our web app.

In this article, we’ll look at how to handle right-clicks with JavaScript.

Set the window.oncontextmenu Property to a Function

We can set the window.contextmenu property to an event handler function to listen for right clicks on the page.

To do this, we write:

window.oncontextmenu = (e) => {  
  e.preventDefault()  
  console.log('right clicked')  
}

We have the e parameter that has the right-click event object.

We call e.preventDefault to stop the default behavior for right clicks, which is to show the context menu on the page.

Once we called that, we can do anything we want in the rest of the function when the user right-clicks on the page.

Call the window.addEventListener Method to Add an Event Listener Function

Another way to do something when we right-click on the page is to call the window.addEventListener method to add an event listener function for listening to right clicks.

For instance, we can write:

window.addEventListener('contextmenu', (ev) => {  
  ev.preventDefault();  
  console.log('right clicked')  
});

We pass in the 'contextmenu' string to listen for context menu click events.

Then in the event listener, we call preventDefault the same way to stop the default right-click menu from displaying.

And then we can do what we want when the user right-clicks on the page.

Conclusion

We can listen for the contextmenu event and call preventDefault in the event handler function to run our own JavaScript when we right-click on the page.