Bubble Sort Visualization using JavaScript - GeeksforGeeks

08 Feb, 2021
GUI(Graphical User Interface) helps in better in understanding than programs. In this article, we will visualize Bubble Sort using JavaScript. We will see how the elements are swapped in Bubble Sort and how we get the final sorted array. We will also visualize the time complexity of Bubble Sort. 
Refer:
BubbleSort
Asynchronous Function in JavaScript
 Approach:
First, we will generate a random array using Math.random() function.
Different colors are used to indicate which elements are being compared, sorted, and unsorted.
Since the algorithm performs the operation very fast, the setTimeout() function has been used to slow down the process.
New array can be generated by pressing the “Ctrl+R” key.
The sorting is performed using BubbleSort() function using swap() function
Example:
Below is the program to visualize the Bubble Sort algorithm.
index.html
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="style.css" /></head>  <body>    <br />    <p class="header">Bubble Sort</p>      <div id="array"></div>    <script src="script.js"></script></body>  </html>
style.css: The following is the content for “style.css” used in the above file.
* {    margin: 0px;    padding: 0px;    box-sizing: border-box;}  .header {    font-size: 20px;    text-align: center;}  #array {    background-color: white;    height: 413px;    width: 598px;    margin: auto;    position: relative;    margin-top: 64px;}  .block {    width: 28px;    background-color: #6b5b95;    position: absolute;    bottom: 0px;    transition: 0.2s all ease;}  .block_id {    position: absolute;    color: black;    margin-top: -20px;    width: 100%;    text-align: center;}
script.js: The following is the content for “script.js” file used in the above HTML code.
var container = document.getElementById("array");  // Function to generate the array of blocksfunction generatearray() {    for (var i = 0; i < 20; i++) {          // Return a value from 1 to 100 (both inclusive)        var value = Math.ceil(Math.random() * 100);          // Creating element div        var array_ele = document.createElement("div");          // Adding class 'block' to div        array_ele.classList.add("block");          // Adding style to div        array_ele.style.height = `${value * 3}px`;        array_ele.style.transform = `translate(${i * 30}px)`;          // Creating label element for displaying         // size of particular block        var array_ele_label = document.createElement("label");        array_ele_label.classList.add("block_id");        array_ele_label.innerText = value;          // Appending created elements to index.html         array_ele.appendChild(array_ele_label);        container.appendChild(array_ele);    }}  // Promise to swap two blocksfunction swap(el1, el2) {    return new Promise((resolve) => {          // For exchanging styles of two blocks        var temp = el1.style.transform;        el1.style.transform = el2.style.transform;        el2.style.transform = temp;          window.requestAnimationFrame(function() {              // For waiting for .25 sec            setTimeout(() => {                container.insertBefore(el2, el1);                resolve();            }, 250);        });    });}  // Asynchronous BubbleSort functionasync function BubbleSort(delay = 100) {    var blocks = document.querySelectorAll(".block");      // BubbleSort Algorithm    for (var i = 0; i < blocks.length; i += 1) {        for (var j = 0; j < blocks.length - i - 1; j += 1) {              // To change background-color of the            // blocks to be compared            blocks[j].style.backgroundColor = "#FF4949";            blocks[j + 1].style.backgroundColor = "#FF4949";              // To wait for .1 sec            await new Promise((resolve) =>                setTimeout(() => {                    resolve();                }, delay)            );              console.log("run");            var value1 = Number(blocks[j].childNodes[0].innerHTML);            var value2 = Number(blocks[j + 1]                        .childNodes[0].innerHTML);              // To compare value of two blocks            if (value1 > value2) {                await swap(blocks[j], blocks[j + 1]);                blocks = document.querySelectorAll(".block");            }              // Changing the color to the previous one            blocks[j].style.backgroundColor = "#6b5b95";            blocks[j + 1].style.backgroundColor = "#6b5b95";        }          //changing the color of greatest element         //found in the above traversal        blocks[blocks.length - i - 1]                .style.backgroundColor = "#13CE66";    }}  // Calling generatearray functiongeneratearray();  // Calling BubbleSort functionBubbleSort();
Output:
CSS-Questions
HTML-Questions
JavaScript-Questions
Technical Scripter 2020
CSS
HTML
JavaScript
Sorting
Technical Scripter
Web Technologies
Sorting
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)