Bubble-Sort-Demo/canvas.js

// Strict Mode
"use strict";

// Bars
const bars = document.querySelectorAll("div");

// Generate Random Number Data
function GenerateRandomNumberData () {
    const randomNumberData = [];
    for (let dataNumber = 0; dataNumber < 100; dataNumber++) {
        randomNumberData.push(Math.floor(Math.random() * 100));
    };
    return randomNumberData;
};

// Set Bar Heights
function SetBarHeights ( randomNumberData, activeBar ) {
    for (let barNumber = 0; barNumber < 100; barNumber++) {
        if (barNumber == activeBar) {
            bars[barNumber].setAttribute("style", "height: @vh; background-color: blue;".replace("@", randomNumberData[barNumber]));
        } else {
            bars[barNumber].setAttribute("style", "height: @vh; background-color: red;".replace("@", randomNumberData[barNumber]));
        }
        
    };
};

// Set Bar Heights Red
function SetBarHeightsr ( randomNumberData, activeBar ) {
    for (let barNumber = 0; barNumber < 100; barNumber++) {
        bars[barNumber].setAttribute("style", "height: @vh; background-color: red;".replace("@", randomNumberData[barNumber]));
    };
};

// Variables
let it = 0;
let li = 99;
let hs = 0;
let ls = 0;

// Bubble Sort Step
function BubbleSortStep ( randomNumberData, currentIndex ) {
    if (randomNumberData[currentIndex + 1 ] == undefined) {
        it++;
        hs = 0;
        return [0, false]
    }
    try {
        let swapped = false;
        if (randomNumberData[currentIndex] > randomNumberData[currentIndex + 1 ]) {
            const nextValue = randomNumberData[currentIndex + 1];
            randomNumberData[currentIndex + 1] = randomNumberData[currentIndex];
            randomNumberData[currentIndex] = nextValue;
            swapped = true;
            SetBarHeights(randomNumberData, currentIndex + 1);
            it++;
            hs = currentIndex
            return [currentIndex + 1, swapped];
        } else {
            it++;
            SetBarHeights(randomNumberData, currentIndex + 1);
            return [currentIndex + 1, swapped];
        }
    } catch {
        it++;
        hs = 0;
        return [0, false]
    }
};

// Data
const data = GenerateRandomNumberData()
SetBarHeights(data)

// Tet
function tet (index) {
    if (it == li) {
        it = 0;
        li--;
        return [0, true]
    }
    let [index2, swapped] = BubbleSortStep(data, index)
    return [index2, swapped];
}

// Swap Variables
let index = 0;
let swapped;
let swappedCount = 0;

// Sort
let time = setInterval(() => {
    [index, swapped] = tet(index);
    if (swapped) {
        swappedCount = 0;
    } else {
        swappedCount += 1;
    }
    if (swappedCount == 100) {
        clearInterval(time)
        SetBarHeightsr(data)
    }
}, 1)