UtilesJS

# animateValue

This function displays a transition between a range of numbers in a DOM element

Code

Example

Number:

# elementTransition

This function make a transition for show or hide a element

Code

Example

const productoList = document.querySelector('#productoList');
var countList = 1;

const addProduct = () => {
    let props = {
        id: `product_${countList}`,
        classList: 'div-transition div-hide',
        hidden: 'hidden'
    }

    let html =
    `<tr>
        <td>Producto ${countList}</td>
        <td>${countList}${countList}${countList}</td>
        <td>
            <button class="btn btn-danger" onclick="deleteRow('${props.id}')">
                <i class="fa-solid fa-trash-can"></i>
            </button>    
        </td>
    </tr>`;

    UtilesJS().addRowToTable('productoList', transformHTML(html), 'last', props);
    elementTransition(document.querySelector(`#${props.id}`), 'show');

    countList++;
}

const addManyProduct = () => {
    let props = {
        id: `product_${countList}`,
        classList: 'div-transition div-hide',
        hidden: 'hidden'
    }

    let html =
    `<tr>
        <td>Producto ${countList}</td>
        <td>${countList}${countList}${countList}</td>
        <td>
            <button class="btn btn-danger" onclick="deleteRow('${props.id}')">
                <i class="fa-solid fa-trash-can"></i>
            </button>    
        </td>
    </tr>`;

    countList++;

    let props2 = {
        id: `product_${countList}`,
        classList: 'div-transition div-hide',
        hidden: 'hidden'
    }

    let html2 =
    `<tr>
        <td>Producto ${countList}</td>
        <td>${countList}${countList}${countList}</td>
        <td>
            <button class="btn btn-danger" onclick="deleteRow('${props2.id}')">
                <i class="fa-solid fa-trash-can"></i>
            </button>    
        </td>
    </tr>`;

    UtilesJS().addRowToTable('productoList', transformHTML(html), 'last', props);
    UtilesJS().addRowToTable('productoList', transformHTML(html2), 'last', props2);

    let el1 = document.querySelector(`#${props.id}`);
    let el2 = document.querySelector(`#${props2.id}`);

    elementTransition([el1, el2], 'show');

    countList++;
}

const clearProducts = () => {
    document.querySelector('#productoList tbody').innerHTML = '';
    countList = 1;
}

const deleteRow = async(id) => {
    console.log(id);
    let el = document.querySelector(`#${id}`);
    elementTransition(el, 'hide');

    setTimeout(() => {
        UtilesJS().deleteRowOfTable(id);
    }, 400);
}

Product Name	Code	Action

# loadingButton

This function disable a button and displays a custom text next to a spinner based on button text

Code

/**
 * This function disable a button and displays a custom text next to a spinner based on button text
 * 
 * @param {element} btn button element DOM
 * @param {string} action action of button
 * @param {string} text text of button
 */ 
const loadingButton = (btn, action, text = null) => {
    switch (action) {
        case 'start':
            btn.setAttribute('data-btn-text', btn.innerHTML);
            btn.innerHTML = `<span class="spinner-loading"></span> ${text}`;
            btn.disabled = true;
            break;
        case 'stop':
            btn.innerHTML = btn.getAttribute('data-btn-text');
            btn.disabled = false;
            break;
    }
}

UtilesJS

AnimationsUtiles.js

Usage

# animateValue

Code

Example

# elementTransition

Code

Example

# loadingButton

Code

Example