var unsorted;

function randomize()
{
    //Gets number of bars, initializes an array of size barAmount, and gets bars div
    //Resets inner htm so multiple arrays are not displayed or created
    let barAmount = document.getElementById("arraySize").value;
    let array = new Array(parseInt(barAmount));
    let bars = document.getElementById("bars");
    bars.innerHTML = "";
    //Runs a for loop and adds random number at erach index in array
    //Displays bar after giving it the height and background color by adding it to bars
    for(let x = 0; x < barAmount; x++)
    {
        array[x] = Math.floor(Math.random() * 400);
        let bar = document.createElement("div");
        bar.classList.add("bar");
        bar.style.height = (array[x] * 1.75 + 100) + "px";
        bar.style.backgroundColor = "rgb(4, 40, 82)";
        bars.appendChild(bar);
    }
    unsorted = array;
}

function sort()
{
    //Gets selected sort and calls appropriate sort using the selectedSort as a switch
    let selectedSort = document.getElementById("selectedSort").value;
    let speed = document.getElementById("speed").value;
    switch(selectedSort)
    {
        case "bubble":
            bubbleSort(speed);
            break;
        case "insertion":
            insertionSort(speed);
            break;
        case "merge":
            mergeSort(unsorted, speed);
            break;
        //case "quick":
            //quickSort(unsorted, 0, unsorted.length - 1, speed);
            //break;
    }
}

function sleep(speed)
{
    //Delays sort by given speed
    return new Promise((resolve) => setTimeout(resolve, speed));
}

async function bubbleSort(speed)
{
    //Gets all bars
    let bars = document.getElementsByClassName("bar");
    //For loop goes through all indexes
    for(let x = 0; x < unsorted.length; x++)
    {   
        let y = 0;
        //y goes up to one less index each time, as after each loop the last index is in its final position
        while(y < unsorted.length - x)
        {
            // Swaps indexes and colors them lightgreen
            if(unsorted[y] > unsorted[y+1])
            {
                // All indexes not being switched are original color
                for(let z = 0; z < bars.length; z++)
                {
                    if(z !== y && z !== y+1)
                    {
                        bars[z].style.backgroundColor = "rgb(4, 40, 82)"
                    }
                }
                temp = unsorted[y];
                unsorted[y] = unsorted[y+1];
                unsorted[y + 1] = temp;
                bars[y].style.height = (unsorted[y] * 1.75 + 100) + "px";
                bars[y].style.backgroundColor = "lightgreen";
                bars[y+1].style.height = (unsorted[y+1] * 1.75 + 100) + "px";
                bars[y+1].style.backgroundColor = "lightgreen";
                await sleep(speed);
            }
            y++;
        }
        await sleep(speed);
    }
    return unsorted;
}

async function insertionSort(speed)
{
    //Gets all bars
    let bars = document.getElementsByClassName("bar");
    // Runs for loop through all values in array, key equals the value at x
    for(let x = 0; x < unsorted.length; x++)
    {
        let key = unsorted[x];
        let y = x - 1;
        // While the value at y is less than the key, switches the indexes and bumps all indexes up by 1
        while(y >= 0 && unsorted[y] > key)
        {
            unsorted[y+1] = unsorted[y];
            bars[y+1].style.height = (unsorted[y+1]*1.75+100)+"px";
            bars[y+1].style.backgroundColor = "lightgreen";
            await sleep(speed);
            for(let z = 0; z < bars.length;z++)
            {
                if(z != y+1)
                {
                    bars[z].style.backgroundColor = "rgb(4, 40, 82)";
                }
            }
            y -= 1;
        }
        unsorted[y+1] = key;
        bars[y+1].style.height = (unsorted[y+1]*1.75+100)+"px";
        await sleep(speed);
    }
    // Sets all bars back to original
    for(let z = 0; z < bars.length;z++)
    {
        bars[z].style.backgroundColor = "rgb(4, 40, 82)";
    }
    return unsorted;           
}

async function mergeSort(unsorted, speed)
{
    //Gets all bars
    let bars = document.getElementsByClassName("bar");
    // Base case
    if(unsorted.length < 2)
    {
        return unsorted;
    }
    // Sets the middle value of the array and splits the array into two halves
    // Recursively calls itself until base case is reached
    const middle = Math.floor(unsorted.length/2);
    const leftHalf = unsorted.slice(0, middle);
    const rightHalf = unsorted.slice(middle);
    let half = await mergeSort(leftHalf, speed);
    await mergeSort(rightHalf, speed);
    let leftIndex = 0;
    let rightIndex = 0;
    let mergedIndex = 0;
    //While the left index is in the left half and the right index is in the right half
    //If the value in the left index is less than the right index, the value at the merged index is the left index value
    //Else the value at the merged is the right index value
    while(leftIndex < leftHalf.length && rightIndex < rightHalf.length)
    {
        if(leftHalf[leftIndex] < rightHalf[rightIndex])
        {
            unsorted[mergedIndex] = leftHalf[leftIndex];
            leftIndex++;
        }
        else
        {
            unsorted[mergedIndex] = rightHalf[rightIndex];
            rightIndex++;
        }
        // Left half is lightgreen
        bars[mergedIndex].style.height = (unsorted[mergedIndex] * 1.75 + 100)+"px";
        bars[mergedIndex].style.backgroundColor = "lightgreen";
        //Right half is yellow
        if(mergedIndex + unsorted.length < bars.length)
        {
            bars[mergedIndex + unsorted.length].style.height = (unsorted[mergedIndex] * 1.75 + 100)+"px";
            bars[mergedIndex + unsorted.length].style.backgroundColor = "yellow";
        }
        await sleep(speed);
        mergedIndex ++;
    }
    //Sets the heights for both halves
    while(leftIndex < leftHalf.length)
    {
        unsorted[mergedIndex] = leftHalf[leftIndex];
        bars[mergedIndex].style.height = (unsorted[mergedIndex] * 1.75 + 100) + "px";
        bars[mergedIndex].style.backgroundColor = "lightgreen";
        await sleep(speed);
        leftIndex ++;
        mergedIndex ++;
    }
    while(rightIndex < rightHalf.length)
    {
        unsorted[mergedIndex] = rightHalf[rightIndex];
        bars[mergedIndex].style.height = (unsorted[mergedIndex] * 1.75 + 100) + "px";
        bars[mergedIndex].style.backgroundColor = "lightgreen";
        await sleep(speed);
        rightIndex ++;
        mergedIndex ++;
    }
    //Resets all bars to original color
    for(let x = 0; x < bars.length; x++)
    {
        bars[x].style.backgroundColor = "rgb(4, 40, 82)";
    }
    return unsorted;
}
                        
                    

Code Structure

randomize()

This function gets the array size, and bars div from the page. It resets the bars everytime the randomize button is clicked and ensures that the bars from previous sorts are erased. It gets a random number between 0 and 400, and adds a bar whose height is 1.75 * the random number + 100 px. It creates these bars until the number of bars = array size and sets the global variable unsorted to the randomized array

sort()

This function gets the selected sort and speed from the page. The selected sort is used as a switch to decide which sorting function to use

sleep()

This function halts the program for the indicated speed value

bubbleSort()

This function runs the bubble sort on the randomized array. The bubble sort compares adjacent indexes and if the first index is greater than the second index, it switches the two indexes. The switched index bars are colored lightgreen. After each loop of comparisons, the value at the last index is at its final position

insertionSort()

This function runs the insertion sort on the randomized array. It iterates over the array from the first to the alst index, and compares the key to the index before it. When the key element is smaller, it moves the greater elements up one index, and inserts the key into the correct location. The compared indexes are colored lightgreen

mergeSort()

This function runs a merge sort on the randomized array. It recursively calls itself until the length of the passed array is 1. It then runs the merge sort on each array passed, splitting them into halfs and sorting each half until the entire array is finally sorted. The left half is colored lightgreen and the right half is colored yellow