Untitled

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        body {
            background-color: darkgrey;
            color: white;
        }

        .bar {
            background-color: lime;
            border: 1px solid #000000;
            margin-left: 5px;
            margin-right: 5px;
            padding: 0px;
            width: 20px;
            text-align: center;
            font-family: courier;
            font-size: 12px;
            color: #000000;
        }

        #canvas {
            border-bottom: 1px solid #000000;
        }
    </style>

    <title>JavaScript Fun</title>

  </head>
  <body>


    <div class="container">
        <h2 class="text-center p-3">Sorter</h2>
        <div id="canvas" class="d-flex justify-content-center mx-auto" style="width: 600px; height: 410px">
            <!-- JS goes here -->
        </div>
        <div class="p-3 mx-auto text-center">
            <button id="toggle_btn" onclick="sort()">Sort</button>
            <button id="shuffle_btn" onclick="shuffle()">Shuffle</button>
        </div>
    </div>

    <!-- Bootstrap stuff -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        var heights = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
        var start = false;
        var matched;
        draw_bars();

        function sort() {
            do {
            setInterval(bubble_sort, 500);
            } while (matched);
        }

        function draw_bars() {
            var html_string = '';

            for (let i = 0; i < heights.length; i++) {
                let height = heights[i] * 20 + 10;
                html_string = html_string + '<div class="bar" style="height: ' + height + 'px; margin-top: '
                            + (410-height) + 'px"><span class="num">' + (heights[i]) + '</span></div>';
            }
            $("#canvas").html(html_string);
        }

        function shuffle() {
            let counter = heights.length;

            while (counter > 0) {
                let index = Math.floor(Math.random() * counter);
                counter--;

                let temp = heights[counter];
                heights[counter] = heights[index];
                heights[index] = temp;
            }
            draw_bars(heights);
        }

        function bubble_sort() {
                matched = false;
                for (var i = 0; i < (heights.length - 1); i++) {
                    if (heights[i] > heights[i+1]) {
                        let temp = heights[i+1];
                        heights[i+1] = heights[i];
                        heights[i] = temp;
                        matched = true;
                    }
                }
                draw_bars();
        }
    </script>
  </body>
</html>