Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to get distance between two points in canvas with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get distance between two points in canvas with JavaScript.

In this article, we’ll look at how to get distance between two points in canvas with JavaScript.

How to get distance between two points in canvas with JavaScript?

To get distance between two points in canvas with JavaScript, we can use the Math.hypot method.

For instance, we write

const distance = Math.hypot(endX - startX, endY - startY);

to call Math.hypot with difference of the x and y coordinates between the start and end points.

We get the x-coordinate difference with endX - startX.

And we get the y-coordinate difference with endY - startY.

Conclusion

To get distance between two points in canvas with JavaScript, we can use the Math.hypot method.

Categories
JavaScript Answers

How to detect when the mouse leaves the window with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect when the mouse leaves the window with JavaScript.

In this article, we’ll look at how to detect when the mouse leaves the window with JavaScript.

How to detect when the mouse leaves the window with JavaScript?

To detect when the mouse leaves the window with JavaScript, we listen for the documentElement‘s mouseenter and mouseleave events.

For instance, we write

document.documentElement.addEventListener("mouseleave", () =>
  console.log("out")
);
document.documentElement.addEventListener("mouseenter", () =>
  console.log("in")
);

to call document.documentElement.addEventListener to listen for the mouseleave and mouseenter events.

If mouseleave event is triggered on documentElement then the mouse left the window.

If mouseenterevent is triggered on documentElement then the mouse comes into the window.

Conclusion

To detect when the mouse leaves the window with JavaScript, we listen for the documentElement‘s mouseenter and mouseleave events.

Categories
Vue Answers

How to reset a component’s initial data in Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to reset a component’s initial data in Vue.js.

In this article, we’ll look at how to reset a component’s initial data in Vue.js.

How to reset a component’s initial data in Vue.js?

To reset a component’s initial data in Vue.js, we can create a function that returns the initial state object.

For instance, we write

<script>
const initialState = () => {
  return {
    modalBodyDisplay: "getUserInput",
    submitButtonText: "Lookup",
    addressToConfirm: null,
    bestViewedByTheseBounds: null,
    location: {
      name: null,
      address: null,
      position: null,
    },
  };
};

//...
export default {
  data() {
    return initialState();
  },

  methods: {
    resetWindow() {
      Object.assign(this.$data, initialState());
    },
  },
};
</script>

to call the initialState function in data to return the object returned by initialState as the initial state values.

Then in resetWindow, we call Object.assign(this.$data, initialState()) to overwrite the reactive properties in this.$data with the properties in the object returned by initialState.

Conclusion

To reset a component’s initial data in Vue.js, we can create a function that returns the initial state object.

Categories
JavaScript Answers

How to add the equivalent of Ruby Array.any? in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add the equivalent of Ruby Array.any? in JavaScript.

In this article, we’ll look at how to add the equivalent of Ruby Array.any? in JavaScript.

How to add the equivalent of Ruby Array.any? in JavaScript?

To add the equivalent of Ruby Array.any? in JavaScript, we can use the array some method.

For instance, we write

const isBiggerThan10 = (element, index, array) => {
  return element > 10;
};

const hassBiggerThan10 = [2, 5, 8, 1, 4].some(isBiggerThan10);

to call [2, 5, 8, 1, 4].some with the isBiggerThan10 function to check if there’re any elements in [2, 5, 8, 1, 4] that’s bigger than 10 with isBiggerThan10.

It returns false since there’re no elements in [2, 5, 8, 1, 4] bigger than 10.

If there’re any elements bigger than 10, it’ll return true.

Conclusion

To add the equivalent of Ruby Array.any? in JavaScript, we can use the array some method.

Categories
JavaScript Answers

How to use module.exports as a constructor with Node.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to use module.exports as a constructor with Node.js.

In this article, we’ll look at how to use module.exports as a constructor with Node.js.

How to use module.exports as a constructor with Node.js?

To use module.exports as a constructor with Node.js, we export the constructor as a default export.

For instance, we write

class Square {
  constructor(width) {
    this.width = width;
  }
  area() {
    return this.width ** 2;
  }
}

export default Square;

to export the Square class as a default export with export default.

Then we import it by writing

import Square from "./square";

in another module in the same folder.

Conclusion

To use module.exports as a constructor with Node.js, we export the constructor as a default export.