[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:

[Recursive] How to Reverse Array or String In Golang | Javascript | Python

In this article we are going to cover up how we can reverse an array or string using recursive function .

Before Writing any code let's explore about what recursion is:

Read more »

Right Triangle Characters Pattern in Two Different Programming Languages Golang And Javascript

Patterns are most common question in interview, Because most of the Developer asks candidates to write code which prints specific pattern, to check if candidate have the logical mind or not , Is he understands the flow of the loop. It defines your understanding the flow of code mostly Loops So in this article we're about to cover up a right triangle Character pattern in which we're not going to print any star we're about to print Alphabates from A-Z. So we're going to cover up this in Golang and Javascript, So let's start Writing Code.

1. Flow of the Pattern

Let's Discuss first how we're going to write logic for this and how many loops we need and how we're going to print Alphabates.
A. First we needed temp variable which holds the incremented number so we can use that to print
B. Then We have to declare another variable which is int and we will using this for rows, Means how many rows or we can say our main loops dead end.
C. At step three we have to create two loops which is connect, Inner loop going to iterate over from i+i means if our main loops start from 65 so next loop will going to start from 66 till variable i
D. Important part, we have to convert our number to character(Alphabate) so we can use it to print Alphabate triangle.

2. Golang

We are starting writing pattern code for golang first. For Converting Int to character in golang we're going to use the fmt package's Printf function and the specifier will be using %c, It can convert number into character. Bonus: There is another function as well you can use to convert number into character which is Sprintf and also use the %c specifier to convert it.

OUTPUT:

3. Javascript

Working on patterns with javascript can be easy for everyone but when it comes to print charatcers it can't be easy. So How do we are going to convert int to character in javasript? Well there is a simple answer by using the String Module. String Module have fromCharCode function which takes only one argument which is the int and returns back the character of that number. Below is the code for pattern.

OUTPUT: