Category: JavaScript Answers

Sometimes, we want to display a loading bar before the entire page is loaded with JavaScript.

In this article, we’ll look at how to display a loading bar before the entire page is loaded with JavaScript.

Display a Loading Bar Before the Entire Page is Loaded with JavaScript

To display a loading bar before the entire page is loaded with JavaScript, we can watch for the load event with jQuery.

When the load event is emitted, we remove the loading indicator from the screen.

To do this, we write:

<div id="overlay">  
  <img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" alt="Loading" />  
  Loading...  
</div>

to add the loading indicator.

Then we write:

$(window).on('load', () => {  
  $('#overlay').fadeOut();  
});

to watch the load event with the on method.

Then we call fadeOut on the div to remove it from the screen with a fade-out effect.

Conclusion

To display a loading bar before the entire page is loaded with JavaScript, we can watch for the load event with jQuery.

When the load event is emitted, we remove the loading indicator from the screen.

Sometimes, we want to use the JavaScript spread operator to concatenate multiple arrays.

In this article, we’ll look at how to use the JavaScript spread operator to concatenate multiple arrays.

Use the JavaScript Spread Operator to Concatenate Multiple Arrays

To use the JavaScript spread operator to concatenate multiple arrays, we just spread all the entries from the existing arrays to a new array.

For instance, we write:

const fruits = ["apples", "bananas", "pears"];
const vegetables = ["corn", "potatoes", "carrots"];
const produce = [...fruits, ...vegetables];
console.log(produce);

to spread all the fruits and vegetables array entries to the produce array.

Therefore, produce is:

["apples", "bananas", "pears", "corn", "potatoes", "carrots"]

Conclusion

To use the JavaScript spread operator to concatenate multiple arrays, we just spread all the entries from the existing arrays to a new array.

Sometimes, we want to test if a date is today, yesterday, within a week or two weeks ago with moment.js

In this article, we’ll look at how to test if a date is today, yesterday, within a week or two weeks ago with moment.js.

Test if a Date is Today, Yesterday, within a Week or Two Weeks Ago with Moment.js

To test if a date is today, yesterday, within a week or two weeks ago with moment.js, we can use the isSame and isAfter methods to compare dates.

For instance, we can write:

const REFERENCE = moment("2021-06-05");
const TODAY = REFERENCE.clone().startOf('day');
const YESTERDAY = REFERENCE.clone().subtract(1, 'days').startOf('day');
const A_WEEK_OLD = REFERENCE.clone().subtract(7, 'days').startOf('day');

const isToday = (momentDate) => {
  return momentDate.isSame(TODAY, 'd');
}

const isYesterday = (momentDate) => {
  return momentDate.isSame(YESTERDAY, 'd');
}

const isWithinAWeek = (momentDate) => {
  return momentDate.isAfter(A_WEEK_OLD);
}

const isTwoWeeksOrMore = (momentDate) => {
  return !isWithinAWeek(momentDate);
}

console.log(isToday(moment("2021-06-05")));
console.log(isYesterday(moment("2021-06-04")));
console.log(isWithinAWeek(moment("2021-06-03")));
console.log(isWithinAWeek(moment("2021-05-29")));
console.log(isTwoWeeksOrMore(moment("2021-05-30")));
console.log(isTwoWeeksOrMore(moment("2021-05-29")));

We have the REFERENCE date that we want to do various checks with.

TODAY is a copy of RERFERENCE , which is created by clone and then we set it to the start of the date with the startOf method.

YESTERDAY is a clone of REFERENCE subtract one day with subtract .

A_WEEK_OLD is a clone of REFERENCE subtract 7 days with subtract .

They’re also set to the start of the date with startOf .

Then we create the isToday function to call the isSame method on momentDate to check if the date is the same as TODAY .

We compare by date since we passed in 'd' as the 2nd argument.

Similarly, we use similar code to create isYesterday but with YESTERDAY instead of TODAY .

To create the isWithinWeek function, we use the isAfter function to check if the momentDate is after the start of a given week, which we stored in A_WEEK_OLD ,

And we check is 2 weeks or more before a given momentDate with the isWithinAWeek function.

Therefore, from the console log, we should get:

true
true
true
false
false
true

as a result.

Conclusion

To test if a date is today, yesterday, within a week or two weeks ago with moment.js, we can use the isSame and isAfter methods to compare dates.

Sometimes, we want to convert a date to GMT with JavaScript.

In this article, we’ll look at how to convert a date to GMT with JavaScript.

Convert a Date to GMT with JavaScript

To convert a date to GMT with JavaScript, we can use the JavaScript date’s toUTCString method to do so.

For instance, we can write:

const gmt = new Date("Fri Jan 20 2022 11:51:36 GMT-0500").toUTCString()  
console.log(gmt)

to convert the JavaScript Date instance to a GMT date string.

Therefore, gmt is 'Thu, 20 Jan 2022 16:51:36 GMT’ .

Since the original date-time is 5 hours behind GMT, the GMT date-time is 5 hours ahead of it.

Conclusion

To convert a date to GMT with JavaScript, we can use the JavaScript date’s toUTCString method to do so.

Sometimes, we may run into the ‘duplicate declaration‘ warning for loop variables with JavaScript.

In this article, we’ll look at how to fix the ‘duplicate declaration‘ warning for loop variables with JavaScript.

Fix the ‘Duplicate Declaration‘ Warning for Loop Variables with JavaScript

To fix the ‘duplicate declaration‘ warning for loop variables with JavaScript, we should make sure we use let instead of var to declare our loop variables.

For instance, instead of writing:

for (var i = 0; i < 100; i++) {
  // ...
}

for (var i = 0; i < 500; i++) {
  // ...
}

where the i variable from both loops are hoisted to the top and so they’re counted as duplicate declarations, we write:

for (let i = 0; i < 100; i++) {
  // ...
}

for (let i = 0; i < 500; i++) {
  // ...
}

Then we declare i for both loop blocks.

Since let is block-scoped, they’re considered separate variable declarations.

Conclusion

To fix the ‘duplicate declaration‘ warning for loop variables with JavaScript, we should make sure we use let instead of var to declare our loop variables.