Insert Process into Queue to work Asynchronously

Question

I am trying to make a simple web page in which when we enter the text value in the textbox, and as soon as a user inserts a comma between the two texts, a new button gets generated. When the user presses the enter key, the buttons class should toggle between warning and danger.

I am able to achieve it so I also tried to add a delay, but the problem is all buttons class toggling takes place together and not one by one in a random manner. To create a random toggling sequence I created a random permutation of numbers for it, but since all buttons classes are toggling simultaneously I am not getting the required result.

The required result is that first for one buttons toggling should be completed and then for another button - how can I achieve this?

let element = document.querySelector('.textarea');
let cont = document.querySelector('.groupofbtns');
let lastlen = 0;
const pause = (timeoutMsec) => new Promise(resolve => setTimeout(resolve, timeoutMsec))
async function main(grp) {
// here is the delay I am trying to create between toggling but it is executing for all buttons simultaneously.
    grp.classList.remove("btn-warning");
    grp.classList.add("btn-danger");
    await pause(3 * 1000)
    grp.classList.remove("btn-danger");
    grp.classList.add("btn-warning");
}
element.addEventListener("keyup", function (event) {
    if (event.keyCode === 13) {
        let grp = document.querySelectorAll('.btn')
        let l = grp.length - 1, arr = [];
        console.log(grp.length)
        do {
            let num = Math.floor(Math.random() * l + 1);
            arr.push(num);
            arr = arr.filter((item, index) => {
                return arr.indexOf(item) === index
            });
        } while (arr.length < l);
       // console.log(arr);
        arr.push(0)
        for (let i = 0; i <= l; i++) {

            main(grp[arr[i]])

        }
    }
    else if (event.keyCode === 8) {
        let val = element.value;
        //console.log(val)
        let strArr = val.split(',')
        let b, f;
        let grp = document.querySelectorAll('.btn');
        if (strArr.length > 1) {
            b = strArr;
            while (b[b.length - 1] == "")
                b.pop()
            if (b.length < strArr.length) {
                cont.removeChild(grp[grp.length - 1]);
                lastlen--;
            }
            f = b[b.length - 1];
        }

        if (grp.length == b.length)
            grp[grp.length - 1].innerText = `${f}`;
        else {
            let diff = grp.length - b.length
            let i = 0;
            while (diff > 0) {
                cont.removeChild(grp[grp.length - 1 - i]);
                i++;
                diff--;
                lastlen--;
            }
        }
    }
});
element.addEventListener('input', function (event) {
    let val = element.value;
    //console.log(val)
    let strArr = val.split(',')
    let b, f;
    if (strArr.length > 1) {
        b = strArr;
        while (b[b.length - 1] == "")
            b.pop()
        f = b[b.length - 1];

        if (event.keyCode !== 8) {
            if (strArr.length > lastlen) {
                let butt = document.createElement('button');
                butt.classList.add('btn')
                butt.classList.add('btn-warning')
                //butt.classList.add('container')
                butt.classList.add('active')
                butt.innerText = `${f}`
                cont.appendChild(butt)
                lastlen = strArr.length
                //cont.innerHTML += ``;
            }//element.value = val;
            else {

                let b = document.querySelectorAll('.btn')
                b[b.length - 1].innerText = `${f}`
            }
        }
    }
})

.h
{
    display:flex;
    flex-direction: column;
    width: 50%;
    margin-top:30%;
    align-items: center;
    text-align: center;
}
.lab
{
    color:white;
   
}
.btn
{
    margin: 0.8% 0.8%;
}
.groupofbtns
{
    width:50%;
    margin-top: 2%;
    align-items: center;
}





    
    
    
    Random color picker
    



    
        
            Enter your choices here separate them with
                commas, Press
                Enter when you are
                done

Insert Process into Queue to work Asynchronously

0 Answers