Sep 9, 2021 JavaScript
How to check if user scrolls to the bottom of the page in JavaScript

In this Article we will go through how to check if user scrolls to the bottom of the page only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

const isAtBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

Sep 9, 2021 JavaScript
How to scroll to top of the page in JavaScript

In this Article we will go through how to scroll to top of the page only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

const goToTop = () => window.scrollTo(0, 0);

Sep 9, 2021 JavaScript
How to toggle an element in JavaScript

In this Article we will go through how to toggle an element only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

const toggle = ele => (ele.style.display = (ele.style.display === 'none') ? 'block' : 'none');

Sep 9, 2021 JavaScript
How to calculate the angle of a line defined by two points in JavaScript

In this Article we will go through how to calculate the angle of a line defined by two points only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

// In radians
const radiansAngle = (p1, p2) => Math.atan2(p2.y - p1.y, p2.x - p1.x);

// In degrees
const degreesAngle = (p1, p2) => Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

Sep 9, 2021 JavaScript
How to calculate the distance between two points in JavaScript

In this Article we will go through how to calculate the distance between two points only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

const distance = (p1, p2) => Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));

Sep 9, 2021 JavaScript
How to check if a point is inside a rectangle in JavaScript

In this Article we will go through how to check if a point is inside a rectangle only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

const isInside = (point, rect) => point.x > rect.left && point.x < rect.right && point.y > rect.top && point.y < rect.bottom;

Sep 9, 2021 JavaScript
How to check if a rectangle contains other one in JavaScript

In this Article we will go through how to check if a rectangle contains other one only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

// Returns true if `a` contains `b`
// (x1, y1) and (x2, y2) are top-left and bottom-right corners
const contains = (a, b) => (a.x1 <= b.x1 && a.y1 <= b.y1 && a.x2 >= b.x2 && a.y2 >= b.y2);

Sep 9, 2021 JavaScript
How to check if a rectangle overlaps other one in JavaScript

In this Article we will go through how to check if a rectangle overlaps other one only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

// Returns true if `a` overlaps `b`
// (x1, y1) and (x2, y2) are top-left and bottom-right corners
const overlaps = (a, b) => (a.x1 < b.x2 && b.x1 < a.x2) || (a.y1 < b.y2 && b.y1 < a.y2);

Sep 9, 2021 JavaScript
How to normalize the ratio of a number in a range in JavaScript

In this Article we will go through how to normalize the ratio of a number in a range only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

const normalizeRatio = (value, min, max) => (value - min) / (max - min);

Sep 9, 2021 JavaScript
How to convert radians to degrees in JavaScript

In this Article we will go through how to convert radians to degrees only using single line of code in JavaScript. This is a one-line JavaScript code snippet that uses one of the most popular ES6 features => Arrow Function.

Let's define this short function:

const radsToDegs = rad => rad * 180 / Math.PI;