Author: John Au-Yeung

Sometimes, we want to make enter key press behaves like a tab key in JavaScript.

In this article, we’ll look at how to make enter key press behaves like a tab key in JavaScript.

How to make enter key press behaves like a tab key in JavaScript?

To make enter key press behaves like a tab key in JavaScript, we can listen for the keydown event.

For instance, we write

document.addEventListener("keydown", (event) => {
  if (event.keyCode === 13 && event.target.nodeName === "INPUT") {
    const form = event.target.form;
    const index = [...form].indexOf(event.target);
    form.elements[index + 1].focus();
    event.preventDefault();
  }
});

to listen for the keydown event on document with addEventListener.

In the event listener, we check if the enter key is pressed by checking if event.keyCode is 13.

And we check if the key is pressed in an input with

event.target.nodeName === "INPUT"

If both are true, then we get the form the input is in with event.target.form.

Then we get the index of the input with [...form].indexOf(event.target).

Next, we focus on the next input with form.elements[index + 1].focus().

And we call preventDefault to stop the default behavior.

Conclusion

To make enter key press behaves like a tab key in JavaScript, we can listen for the keydown event.

Sometimes, we want to compare two string dates in JavaScript.

In this article, we’ll look at how to compare two string dates in JavaScript.

How to compare two string dates in JavaScript?

To compare two string dates in JavaScript, we can compare them after we convert the date strings to timestamps.

For instance, we write

const isLater = (str1, str2) => {
  return new Date(str1) > new Date(str2);
};

to define the isLater function.

In it, we convert str1 and str2 to Date objects.

Then we compare them directly with >.

The Date objects are converted to timestamps automatically before they’re compared.

Conclusion

To compare two string dates in JavaScript, we can compare them after we convert the date strings to timestamps.

Sometimes, we want to add 1 month from now to current date in moment.js and JavaScript.

In this article, we’ll look at how to add 1 month from now to current date in moment.js and JavaScript.

How to add 1 month from now to current date in moment.js and JavaScript?

To add 1 month from now to current date in moment.js and JavaScript, we can use the add method.

For instance, we write

const startDate = "20-03-2022";
const newDate = moment(startDate, "DD-MM-YYYY").add(5, "days");

to call moment to parse startDate into a moment object.

Then we call add with 5 and 'days' to return a new moment object with date 5 days after startDate.

Conclusion

To add 1 month from now to current date in moment.js and JavaScript, we can use the add method.

Sometimes, we want to use JavaScript array map to filter results with if conditional.

In this article, we’ll look at how to use JavaScript array map to filter results with if conditional.

How to use JavaScript array map to filter results with if conditional?

To use JavaScript array map to filter results with if conditional, we can use the array filter before map.

For instance, we write

const appIds = applicationsHere
  .filter((obj) => {
    return obj.selected;
  })
  .map((obj) => {
    return obj.id;
  });

to call filter to return an array with all the items with selected set to true.

Then we call map with a callback to return the id property of each object and put them in a new array and return the array.

Conclusion

To use JavaScript array map to filter results with if conditional, we can use the array filter before map.

Sometimes, we want to count the number of elements with same class with JavaScript.

In this article, we’ll look at how to count the number of elements with same class with JavaScript.

How to count the number of elements with same class with JavaScript?

To count the number of elements with same class with JavaScript, we can use the querySelectorAll method.

For instance, we write

const count = document.querySelectorAll("#main-div .specific-class").length;

to call querySelectorAll with the selector for the elements with the specific-class class to get all the elements with that class in a node list.

Then we use the length property to get the count of the number of elements selected.

Conclusion

To count the number of elements with same class with JavaScript, we can use the querySelectorAll method.