Utility functions you can copy paste in your JS project

DOM.js

/*  -- DOM utility functions --  */

// Create a DOM element with contents, class names and id
/*
  * @params
  * elem {string} @required [name of tag]
  * content {any} [can be anything usually string content or another DOM element - optional]
  * classes {string[]} [list of classname to give to the element - optional]
  * id {string} [id to give to the elemnt - optional]
  
  * @return DOM element
*/
const createElem = (ele, content = '', classes = [], id = '') => {
    const elem = document.createElement(ele)
    
    if(classes.length > 0){
        classes.forEach(c => elem.classList.add(c))
    }
    
    if(id!=='')
        elem.id = id
    
    if(typeof content === 'string')
        elem.innerHTML = content
    else
        elem.innerHTML = content.outerHTML
    
    return elem;
}

// Toggle class in certain DOM element
/*
  * @params
  * elem {DOM element} @required [DOM element you want to toggle classname]
  * className {string} @required [class name you want to toggle]
*/
const toggleClass = (elem, className) => {
    if(elem.classList.contains(className)){
        elem.classList.remove(className)
    }else{
        elem.classList.add(className)
    }
}

// Add styles to given DOM element
/*
  * @params
  * elem {DOM element} @required [DOM element which style property you want to set]
  * property {string} @required [css property you want to set]
  * value {string} @required [value for the css property]
*/
const setStyle = (elem, property, value) => {
    elem.style[property] = value
}

// Get the specfic children out of the children list of an element
/*
  * @params
  * elem {DOM element} @required [DOM element with list of children elements]
  * index {number} @required [Index of the child element]
  
  * @return {DOM element || string}
*/
const getChild = (elem, index) => {
    const childrens = elem.children

    if(index >= childrens.length)
        return 'Index is Greater than childrens length!!!'

    return childrens[index]
}

// Add a scroll event
/*
  * @params 
  * fn {function} @requried [function to run on scroll]
  * breakpoint {number} [scrollY position to set condition for the function to run only when scrollY is greater than this]
*/
const addScrollEvent = (fn, breakpoint = undefined) => {
    window.addEventListener('scroll', () => {
        if(!breakpoint){
            fn()
        }else{
            if(window.scrollY > breakpoint){
                fn()
            }
        }
    })
}

// Deep clone an element
/*
  * @params
  * elem {DOM element} @required [DOM element you want to clone]
  * parent {DOM element || undefined} @required [DOM element where you want to append the clone to or undefined if you want clone element only]
  * classname {string[]} [List of class names to give to the new clone -  optional]
  * id {string} [Id to give to the new clone - optional]
  
  * @return {true || DOM element}
*/
const cloneElem = (elem, parent, classname = [], id = '') => {
    const newElem = elem.cloneNode(true)

    if(classname.length > 0){
        classname.forEach(c => newElem.classList.add(c))
    }
    if(id!==''){
        newElem.id = id
    }
  
    if(parent){
      parent.appendChild(newElem)
      return true;
    }
  
    return newElem;
}

maths.js

/*  -- Math and array utitliy function, classes --  */

// Round a floating digit to given precision
/*
  * @params 
  * num {number} @required [floating digit you want to fix]
  * precision {number} [precision you want to achieve - optional]
*/
const roundDigit = (num, precision = 2) => Math.fround(num).toFixed(precision)

// A utility array class
class Aray {
    constructor(a){
        this.a = a
    }

    // Sort the array in ascending order
    sortAsc = () => this.a.sort((a,b) => a-b)
  
    // Sort the array in descending order
    sortDesc = () => this.a.sort((a,b) => b-a)
  
    // Find a element's index inside the array
    /*
      * @params
      * elem {typeof this.a[0]} [element you want to search inside the array]
      
      * @return {object} [index of the element & boolean refering if found or not]
    */
    findElement = (elem) => {
        const index = this.a.indexOf(elem)
        const found = index!==-1
        
        return { index, found }
    }
}