index.html

<!DOCTYPE html>
<html>
    <head>
        <title> Sort Visualizer </title>
        <link href="style.css" rel="stylesheet">
        
    </head>
    <body>
        <div class="container">
            <h1>Chris' Sorting Visualizer</h1>
            <p>To highlight the efficiency (and inefficiency) of different sorting algorithms</p>
            <div class="interact-container">
                <div class="misc-area">
                    <button onclick="resetArray()">Reset</button>
                    <button onclick="randomizeArray()">Randomize</button>
                    <button onclick="reverseArray()">Reverse</button>
                    <div class="slider-container">
                        <h4>Array Size</h4>
                        <input type="range" min="8" max="512" value="128" class="slider" id="slider">
                        <div id="slider-value">   </div>
                    </div>
                    <div class="rainbow-container">
                        <h5>Rainbow</h5>
                        <label class="switch">
                            <input id="rainbow-switch" type="checkbox">
                          </label>
                    </div>
                    <div class="pipe-container">
                        <h5>Pipe</h5>
                        <label class="switch">
                            <input id="pipe-switch" type="checkbox">
                          </label>
                    </div>
                </div>
                <div class="button-container">
                    <h3>Sorting Algorithms</h3>
                    <button onclick="bubbleSort()">Bubble</button>
                    <button onclick="insertionSort()">Insertion</button>
                    <button onclick="selectionSort()">Selection</button>
                    <button onclick="cocktailSort()">Cocktail</button>
                    <button onclick="pancakeSort()">Pancake</button>
                    <button onclick="shellSort()">Shell</button>
                    <button onclick="quickSort()">Quick</button>
                    <button onclick="mergeSort()">Merge</button>
                    <button onclick="heapSort()">Heap</button>
                    <button onclick="bucketSort()">Bucket</button>
                    <button onclick="radixSort()">Radix</button>
                </div>
            </div>

            <div class="screen-container">
                <canvas id="screen"></canvas>
            </div>
        </div>
        <script src="visualizer.js"></script>
    </body>
</html>