Author: John Au-Yeung

Sometimes, we want to return reference to array item when searching an array of objects with JavaScript.

In this article, we’ll look at how to return reference to array item when searching an array of objects with JavaScript.

How to return reference to array item when searching an array of objects with JavaScript?

To return reference to array item when searching an array of objects with JavaScript, we can use the JavaScript array find method.

For instance, we write:

const users = [{
  id: 1,
  name: 'name1'
}, {
  id: 2,
  name: 'name2'
}]
const user = users.find(u => {
  const {
    id,
    name
  } = u
  return id === 1 && name === 'name1'
})

We have the users array with some objects.

And we want to get the 1 with id w and name 'name1'.

To do this, we call find with a callback that returns id === 1 && name === 'name1'.

And then user will be the reference to the first entry of users.

Conclusion

To return reference to array item when searching an array of objects with JavaScript, we can use the JavaScript array find method.

Sometimes, we want to detect if we’re in the home page with JavaScript.

In this article, we’ll look at how to detect if we’re in the home page with JavaScript.

How to detect if we’re in the home page with JavaScript?

To detect if we’re in the home page with JavaScript, we can check if window.location.origin is the same as window.location.href.

For instance, we write:

console.log(window.location.origin === window.location.href.slice(0, -1))

to check if window.location.origin is the same as window.location.href without the trailing slash.

Conclusion

To detect if we’re in the home page with JavaScript, we can check if window.location.origin is the same as window.location.href.

Sometimes, we want to expand a text area when clicked on with JavaScript.

In this article, we’ll look at how to expand a text area when clicked on with JavaScript.

How to expand a text area when clicked on with JavaScript?

To expand a text area when clicked on with JavaScript, we can call the animate method.

For instance, we write:

<textarea rows="1" cols="10"></textarea>

to add a text area.

Then we write:

const textarea = document.querySelector('textarea')
textarea.onfocus = () => {
  textarea.animate({
    height: "4em"
  }, 500);
};

to select the text area with document.querySelector.

Then we set the onfocus property of it to a function that calls textarea.animate to set the height of it to 4em for 500 milliseconds.

Conclusion

To expand a text area when clicked on with JavaScript, we can call the animate method.

Sometimes, we want to force the download of a link with JavaScript.

In this article, we’ll look at how to force the download of a link with JavaScript.

How to force the download of a link with JavaScript?

To force the download of a link with JavaScript, we can create a hidden link and click it programmatically.

For instance, we write:

<button>
  download
</button>

to add a button.

Then we write:

const download = document.querySelector("button");
download.onclick = () => {
  const anchor = document.createElement("a");
  anchor.href =
    "https://file-examples-com.github.io/uploads/2018/04/file_example_AVI_480_750kB.avi";
  anchor.target = "_blank";
  anchor.download = "example.pdf";
  anchor.click();
};

to select the button with document.querySelector.

Then we set its onclick property to a function that creates the link with document.createElement.

And we set the href to the file we want to download.

And we set the download property to the file name of the file.

Finally, we call click to click it to start the download.

Conclusion

To force the download of a link with JavaScript, we can create a hidden link and click it programmatically.

Sometimes, we want to use the hover and class selector with jQuery.

In this article, we’ll look at how to use the hover and class selector with jQuery.

How to use the hover and class selector with jQuery?

To use the hover and class selector with jQuery, we can call the hover method.

For instance, we write:

<div id="menu">
  <div class="menuItem"><a href=#>Bla</a></div>
  <div class="menuItem"><a href=#>Bla</a></div>
  <div class="menuItem"><a href=#>Bla</a></div>
</div>

to add some elements.

Then we write:

  $('.menuItem').hover(function() {
      $(this).css('background-color', 'yellow');
    },
    function() {
      $(this).css('background-color', 'white');
    });

to select the elements with class menuItem and call hover on them to do something on hover in and out respectively.

When we hover into the element, we set the background color to yellow with css.

When we hover out of the element, we set the background color to white with css.

Conclusion

To use the hover and class selector with jQuery, we can call the hover method.