JSFiddle - React, Tailwind, and code Playground

by ashfame

HTML

<dl>
<dt>
Login or Register
</dt>

<dt class="complete b">
Billing Address
</dt>

<dt class="complete">
Shipping Address
</dt>

<dt class="x">
Shipping Method
</dt>

<dt>
Payment Method
</dt>
</dl>

JavaScript

function HasClassName(objElement, strClass) {
    // if there is a class
    if (objElement.className) {
        var arrList = objElement.className.split(' ');
        // get uppercase class for comparison purposes
        var strClassUpper = strClass.toUpperCase();
        for (var i = 0; i < arrList.length; i++) {
            if (arrList[i].toUpperCase() == strClassUpper) {
                return true;
            }
        }
    }
    // if we got here then the class name is not there
    return false;
}

function AddClassName(objElement, strClass) {
    // if we already have it, move on, we are done here
    if (HasClassName(objElement, strClass)) return;
    // we need to add it since its not there
    // so, if there is a class, add a name to the class list else just specify it
    if (objElement.className) {
        var arrList = objElement.className.split(' ');
        arrList[arrList.length] = 'current';
        objElement.className = arrList.join(' ');
    } else {
        objElement.className = strClass;
    }
}

function progressCheckerTracker() {
    var dts = document.getElementsByTagName('dt');
    var classes = '';

    for (var i = dts.length - 1; i >= 0; i--) {
        if (HasClassName(dts[i], 'complete')) {
            console.log('complete class found at ' + i + ' position');
            if (i < dts.length - 1) {
                console.log('adding current class at ' + (i + 1) + ' position');
                // nt the first run, then only we can look for the last element else this will be the last element
                AddClassName(dts[i + 1], 'current');

            }
            // make sure all previous siblings have complete class
            for (var j = i - 1; j >= 0; j--) {
                console.log( 'Adding complete class to '+j+' position' );
                AddClassName(dts[j], 'complete');
            }
            break;
        }

    }

    //setTimeout(progressCheckerTracker, 1000);
    console.log('run...