• This is a typical JavaScript Project , so you need a code editor like VScode (recommended), Atom, Sublime text, etc. with necessary plugins.
• Then create an appropriate project folder with essential files. It’s a good practice to follow the suggested file structure (shown below).

• The most important thing to do in every sorting algorithm is to swap elements. To make swap two elements in HTML using JS you can do it this way.

function swap(el1,el2)
    {
 
      const style1 = window.getComputedStyle(el1);
      const style2 = window.getComputedStyle(el2);
 
 
      const transform1 = style1.getPropertyValue("height");
      const transform2 = style2.getPropertyValue("height");
 
      el1.style.height = transform2;
      el2.style.height = transform1;
 
    }

• Now apply the simple bubble sort algorithm. During the comparison of two elements make the background color red of both the bars and after the comparison convert the background color again to the default one for both the bars. You may use the following logic -

  special[j].style.background="red";
  special[j+1].style.background="red";

• At the end of every iteration when the highest bar will be taken to the right corner then to show that this bar is placed at it’s perfect position make the background color Green in the above way.
• Now when you run this you will notice that there is no delay in swapping and the other iterations. So you have to add delay before the swaps in order to watch how changes are happening. For delay may use the following logic -

await new Promise(resolve => setTimeout(() => {resolve(), delay(2)}));

• Wrap this whole thing in a function and pass this into the event listener of the bubble sort button.

• For this we can use the input element in the navbar. In the HTML file input should be like this.

    <span>
             //no of bars
            <input id="arr_sz" type="range"  min=20 max=120 step=1 value=60>
    </span> 

• And then in the javascript code part, using DOM we will select the input tag and take the value from that and pass it onto the create bar function. Instead of 100 we will use the number of bars as the inputted (to be taken) value from the input tag and in the delay function pass the delay time as the taken input from the speed input like the below code.

   var arr_size=document.querySelector("#arr_sz"); 

  var no_of_bar=arr_size.value;

• Also add event listeners with no bar and pass create bar function this way.

  arr_size.addEventListener("input",create_bars);