[HTML/CSS/JAVASCRIPT] Bubble Sort Algorithm Visualization

So today we're going to cover up how we can visualize the each steps of the algorithms we use .

Today I'm going to cover bubble sort algorithm visualizations via html boxes or you can say cards

each card is going to change it's values from the one as per the algorithm condition, so before doing anything let's understand about the bubble sort algorithm and the required things we need for this task.

Definition of Bubble Sort?

Bubble sort is one of the fundamental forms of sorting in programming. Bubble sort algorithms move through a sequence of data (typically integers) and rearrange them into ascending or descending order one number at a time. To do this, the algorithm compares number X to the adjacent number Y. If X is higher than Y, the two are swapped and the algorithm starts over.

 

What Does Bubble Sort Mean?

The name bubble sort comes from the fact that smaller or larger elements "bubble" to the top of a dataset. In the previous example of [3, 1, 4, 2], the 3 and 4 are bubbling up the dataset to find their proper positions.

This algorithm is alternatively called the sinking sort for the opposite reason; some of the elements are sinking to the bottom of the dataset. In our example, the 1 and the 2 are sinking elements.  

So now we knows about bubble sort algorithm then let's checkout code one by one. 

First we needed html structure as we have in video.

So let's start creating it, well I'm not so much good at frontend so the structure code can be messy,

but you guys can create your own structure and the only thing you need is just javascript code and you'll gonna get it at the end of the article.

HTML

    <center>

        <h2 style="text-align: center;">Algorithm Visualizer</h2>

        <div class="row" id="bubble">

        </div>

        </br>

        </br>

        </br>

        </br>

        </br>

        </br>

        </br>

        </br>

        <button onclick="update(7)">Sort</button>

        <button onclick="generate()">Random Generate</button>

    </center>

I know we have used lot's of breaks. 

CSS

        * {

            box-sizing: border-box;

        }

       

        body {

            font-family: Arial, Helvetica, sans-serif;

        }

        /* Float four columns side by side */

       

        .column {

            float: right;

            width: 100px;

            height: 20px;

            padding: 0 5px;

        }

        /* Remove extra left and right margins, due to padding */

       

        .row {

            margin: 0 -5px;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        /* Clear floats after the columns */

       

        .row:after {

            content: "";

            display: table;

            clear: both;

        }

       

        .card {

            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

            padding: 16px;

            text-align: center;

            background-color: #f1f1f1;

            animation-duration: .3s;

            animation-name: fadeAndScale;

            animation-timing-function: cubic-bezier(.71, .55, .62, 1.57);

        }

       

        @keyframes fadeAndScale {

            from {

                opacity: 0;

                transform: scale(.9, .9);

            }

            to {

                opacity: 1;

                transform: scale(1, 1);

            }

        }

JAVASCRIPT

 

     var arr = [];

        var len = 8;

        window.onload = generate()

        function generate() {

            arr.length = 0

            for (let i = 0; i < len; i++) {

                arr.push(Math.floor(Math.random() * (1000 - 1 + 1)) + 1);

            }

            on()

        }

        function on() {

            let row = document.querySelector("#bubble");

            removeAllChildNodes(row)

            for (let i = 0; i < arr.length; i++) {

                let div = document.createElement("div");

                div.className = "column"

                let childDiv = document.createElement("div");

                childDiv.className = "card";

                let h3 = document.createElement("h3");

                h3.innerHTML = `${i} <br/>` + arr[i];

                childDiv.appendChild(h3)

                div.appendChild(childDiv);

                row.appendChild(div);

            }

        }

        function removeAllChildNodes(parent) {

            while (parent.firstChild) {

                parent.removeChild(parent.firstChild);

            }

        }

        function EachNodeUpdate() {

            for (let i = 0; i < arr.length; i++) {

                on()

            }

        }

        function update(l) {

            var r = document.querySelector("#bubble");

            removeAllChildNodes(r)

            EachNodeUpdate()

            if (l == 0) return;

            for (let j = 0; j < l; j++) {

                if (arr[j] > arr[j + 1]) {

                    let temp = arr[j]

                    arr[j] = arr[j + 1]

                    arr[j + 1] = temp

                }

            }

            setTimeout(function() {

                update(l - 1);

            }, 1000);

        }

Live : https://mavensingh.github.io/bubble-sort-algorithm.html

Checkout More Algorithms Solutions

Don't Forget To Subscribe My Youtube Channel as well: