Category: JavaScript

Sometimes, we want to trigger an event when the user clear a textbox with JavaScript.

In this article, we’ll look at how to trigger an event when the user clear a textbox with JavaScript.

How to trigger an event when the user clear a textbox with JavaScript?

To trigger an event when the user clear a textbox with JavaScript, we can listen to the input’s keyup event.

For instance, we write:

<input>

to add an input.

Then we write:

const input = document.querySelector('input')
input.onkeyup = () => {
  if (!input.value) {
    console.log('cleared');
  }
}

to select the input with querySelector.

Then we set the input.onkeyup property to a function that check if input.value is an empty string.

If it is, then 'cleared' is logged.

Therefore, when the input is cleared with backspace, we see 'cleared' logged.

Conclusion

To trigger an event when the user clear a textbox with JavaScript, we can listen to the input’s keyup event.

Sometimes, we want to remove element from array using slice with JavaScript.

In this article, we’ll look at how to remove element from array using slice with JavaScript.

How to remove element from array using slice with JavaScript?

To remove element from array using slice with JavaScript, we can get the index of the element we want to remove, then we can call slice and use the spread operator to create a new array without the element we remove.

For instance, we write:

const items = ['foo', 'bar', 'baz', 'qux']
const index = 1
const arr = [...items.slice(0, index), ...items.slice(index + 1)]
console.log(arr)

We have items.slice(0, index) to return an items array items from index 0 to index - 1.

And we have items.slice(index + 1) to return the items array from index index + 1 to the end of the array.

Next, we spread both arrays into a new array and assign it to arr.

Therefore, arr is ['foo', 'baz', 'qux'].

Conclusion

To remove element from array using slice with JavaScript, we can get the index of the element we want to remove, then we can call slice and use the spread operator to create a new array without the element we remove.

Sometimes, we want to check if a cookie exists or else set cookie to expire in 10 days with JavaScript.

In this article, we’ll look at how to check if cookie a exists or else set cookie to expire in 10 days with JavaScript.

How to check if cookie a exists or else set cookie to expire in 10 days with JavaScript?

To check if a cookie exists or else set cookie to expire in 10 days with JavaScript, we can read and write the to the document.cookie property.

For instance, we write:

if (/(^|;)\s*visited=/.test(document.cookie)) {
  console.log("Hello again!");
} else {
  document.cookie = "visited=true; max-age=" + 60 * 60 * 24 * 10;
  console.log("first visit");
}

We check if the cookie string has the visit key with /(^|;)\s*visited=/.test(document.cookie).

If it’s true, we log 'Hello again'.

Otherwise, we assign document.cookie to "visited=true; max-age=" + 60 * 60 * 24 * 10 to add a cookie with key visited that expires in 10 days.

Conclusion

To check if a cookie exists or else set cookie to expire in 10 days with JavaScript, we can read and write the to the document.cookie property.

Sometimes, we want to convert HH:MM:SS times to seconds with moment.js.

In this article, we’ll look at how to convert HH:MM:SS times to seconds with moment.js.

How to convert HH:MM:SS times to seconds with moment.js?

To convert HH:MM:SS times to seconds with moment.js, we can use the diff and startOf methods.

For instance, we write:

const s = moment('12:10:12: PM', 'HH:mm:ss: A').diff(moment().startOf('day'), 'seconds');
console.log(s)

We create a moment object with moment by parsing the time string.

Then we call diff to find the difference between the start of the day and the given time and return the result in seconds.

Therefore s is 43812.

Conclusion

To convert HH:MM:SS times to seconds with moment.js, we can use the diff and startOf methods.

Sometimes, we want to capture all the anchor element click events with JavaScript.

In this article, we’ll look at how to capture all the anchor element click events with JavaScript.

How to capture all the anchor element click events with JavaScript?

To capture all the anchor element click events with JavaScript, we can use event delegation.

For instance, we write:

<a href='https://example.com/foo'>foo</a>
<a href='https://example.com/bar'>bar</a>

to add 2 anchor elements.

Then we write:

document.addEventListener(`click`, e => {
  if (e.target.tagName.toLowerCase() === 'a') {
    e.preventDefault()
    console.log(`You clicked ${e.target.href}`);
  }
});

to call document.addEventListener to add an event listener to the whole page.

Then we check the tag name of the element is clicked on with e.target.tagName.

If it’s 'a', then we log the href property of it, which has the value of the href attribute of the anchor element.

Conclusion

To capture all the anchor element click events with JavaScript, we can use event delegation.