Skip to content

Instantly share code, notes, and snippets.

View AitorAlejandro's full-sized avatar

Aitor Alejandro Herrera AitorAlejandro

View GitHub Profile
@AitorAlejandro
AitorAlejandro / getDaysDiffBetweenDates.js
Created November 15, 2020 13:33
How to get the difference (in days) between two dates
const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
(dateFinal - dateInitial) / (1000 * 3600 * 24);
// Example
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
@AitorAlejandro
AitorAlejandro / formatDuration.js
Created November 15, 2020 13:33
How to get readable format of the given number of milliseconds
const formatDuration = ms => {
if (ms < 0) ms = -ms;
const time = {
day: Math.floor(ms / 86400000),
hour: Math.floor(ms / 3600000) % 24,
minute: Math.floor(ms / 60000) % 60,
second: Math.floor(ms / 1000) % 60,
millisecond: Math.floor(ms) % 1000
};
return Object.entries(time)
@AitorAlejandro
AitorAlejandro / triggerEvent.js
Created November 15, 2020 13:32
How to trigger a specific event on a given element, optionally passing custom data
const triggerEvent = (el, eventType, detail) =>
el.dispatchEvent(new CustomEvent(eventType, { detail }));
// Examples
triggerEvent(document.getElementById('myId'), 'click');
triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });
@AitorAlejandro
AitorAlejandro / elementIsVisibleInViewport.js
Created November 15, 2020 13:29
How to check if the element specified is visible in the viewport
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
// Examples
@AitorAlejandro
AitorAlejandro / elementContains.js
Created November 15, 2020 13:28
How to check if the parent element contains the child element
const elementContains = (parent, child) => parent !== child && parent.contains(child);
// Examples
elementContains(document.querySelector('head'), document.querySelector('title'));
// true
elementContains(document.querySelector('body'), document.querySelector('body')); // false
@AitorAlejandro
AitorAlejandro / scrollToTop.js
Created November 15, 2020 13:27
How to smooth-scroll to the top of the page
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
// Example
scrollToTop();
@AitorAlejandro
AitorAlejandro / getScrollPosition.js
Created November 15, 2020 13:26
Get the scroll position of the current page
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
// Example
getScrollPosition(); // {x: 0, y: 200}
@AitorAlejandro
AitorAlejandro / calculator-plugin-architecture.js
Created September 9, 2020 21:42
Plugin architecture example (open-close principle)
// The Calculator
const betaCalc = {
currentValue: 0,
setValue(value) {
this.currentValue = value;
console.log(this.currentValue);
},
core: {
@AitorAlejandro
AitorAlejandro / addProperty.js
Created August 31, 2020 14:01
Add a new property to every object in a list
function addProperty(objList, newProperty) {
return objList.map((obj) => ({
...obj,
...newProperty,
}));
}
// use case
const sectionList = [
{
@AitorAlejandro
AitorAlejandro / Deque.js
Created July 22, 2020 14:42
Deque structure - array based
class Deque {
constructor() {
this.items = [];
}
addFront(item) {
this.items.unshift(item);
}
addBack(item) {
return this.items.push(item);
}