Project Introduction

Objective

Create a web application using HTML, CSS, Javascript to visualize how various sorting algorithms work. This project’s functionality will be similar to this application.

Project Context :

We have learnt sorting algorithms like bubble sort, selection sort, insertion sort, quick sort. But often we fail to understand the core idea of a particular algorithm maybe because we are unable to visualize how they work. So the most important thing to understand about these algorithms is visualization.


That’s why we are making this project to let everyone understand how these algorithms work and through this project you also will get a deep understanding of such sorting algorithms.


This project will guide you step by step to complete this project and at the end of this project you will have an immense grip on some core concepts of Javascript as well. Adding this project on your resume will showcase your skills and add a great value to your profile.


This project is a good start for beginners and a refresher for professionals who have dabbled in data structures and algorithms using Javascript before and also web developers. The methodology can be applied to showcase any algorithm of one's choosing, so feel free to innovate!

High-Level Approach

  • Creating the website's User Interface (UI) using HTML, CSS and enhancing it further using Bootstrap; without actually implementing any of the app's core features.
  • Implementation of animations, effects and core functionalities (sorting algorithms) using JavaScript.
  • Publish to GitHub and host your project live using Netlify.

Project_stages

At the end of this project you will have built an app which would function like this -


Objective

Create a web application using HTML, CSS, Javascript to visualize how various sorting algorithms work. This project’s functionality will be similar to this application.

Project Context :

We have learnt sorting algorithms like bubble sort, selection sort, insertion sort, quick sort. But often we fail to understand the core idea of a particular algorithm maybe because we are unable to visualize how they work. So the most important thing to understand about these algorithms is visualization.


That’s why we are making this project to let everyone understand how these algorithms work and through this project you also will get a deep understanding of such sorting algorithms.


This project will guide you step by step to complete this project and at the end of this project you will have an immense grip on some core concepts of Javascript as well. Adding this project on your resume will showcase your skills and add a great value to your profile.


This project is a good start for beginners and a refresher for professionals who have dabbled in data structures and algorithms using Javascript before and also web developers. The methodology can be applied to showcase any algorithm of one's choosing, so feel free to innovate!

High-Level Approach

  • Creating the website's User Interface (UI) using HTML, CSS and enhancing it further using Bootstrap; without actually implementing any of the app's core features.
  • Implementation of animations, effects and core functionalities (sorting algorithms) using JavaScript.
  • Publish to GitHub and host your project live using Netlify.

Project_stages

At the end of this project you will have built an app which would function like this -


Getting Started

First validate the idea by doing a low level implementation (Proof of concept) of the components involved in the project.


  • Get more clarity around the unknowns. Eg: XML vs HTML and why to use HTML5/CSS3 not the other versions, advantages of using Bootstrap.
  • Get a better understanding of the stages involved in the project. Eg: By doing a proof of concept you will understand that there are multiple stages such as creating the basic layout, styling it and implementing the functionalities.

Requirements

  • 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).

Expected_file_structure

Create the website's UI

In this milestone the basic structure of this website will be made. In this milestone you will mainly use HTML. Then in the next milestone we will add Bootstrap and CSS for styling purposes.

Requirement

  • First component of the website is to give a heading using the HTML heading tag.
  • Then the main components are to create 5 buttons for running the sorting algorithms (bubble sort, selection sort, insertion sort, quick sort, merge sort) and another button to generate new arrays. Create all these buttons using the HTML button tag.
  • And wrap them with the appropriate id’s and classes which will then be used for reference in styling in CSS and to select them and also to add event listeners in Javascript code (to be done in the upcoming milestones).

Reference

Expected Outcome -

Since only HTML has been used the site should look something like this.

Expected HTML outcome

Improving UI using CSS and Bootstrap

The web app's basic skeleton UI was created in the previous task. To make the app more attractive and interactive we will employ CSS and Bootstrap for styling purposes.

Requirement

  • Give a background color to the website using CSS
  • Use Bootstrap to add navbar for the top part of the web app and inside this navbar class provide all the buttons.
  • Give all the appropriate class names and id to all the relevant sub structures like this (to be done in HTML code).
<button type="button" class="btn btn-dark bubble sort" >Bubble sort</button>
  • For styling purposes you can refer to the image in the Expected Outcome section as your starter template. Do not think about the bars and other components except the buttons. Bars and other components will be addressed in the upcoming milestones. Feel free to innovate and come up with your own styles.

Tip

  • To check your site’s styling you should use chrome developer tool as it provides minute specific details of your site's components.
  • To understand how to use Bootstrap just go through Bootstrap Docs given in the references. You can simply copy the code for your favourite outcome from the website and paste it to your code editor. Then you can customize elements in your own way.

Expected Outcome

After styling using CSS and Bootstrap the site should look something like this.

Expected_CSS_outcome

Creating Bars Using JavaScript

From this milestone onwards we will start implementing the animations and other core functionalities of the application. In this milestone we will create bars of different heights; which basically indicates the array that we will sort. Through these bars we will visualize how sorting algorithms work.

Requirement

  • In the JS file just create an array and push 100 numbers (Don’t worry we will implement the number of bars changing functionality in the upcoming modules).
  • Create 100 numbers using random function , convert those numbers to an integer number in the range 0-100 (you may take any range).
  • The array integers should be the height of bars.
  • Now inside the HTML file under the navbar create a division (div) and also give an id in this division where we will be placing all the bars' components.
  • Now coming to the JS file we will create 100 div elements (creating elements using JS).
  • Using JS add a particular class to all divs (so that we can add styles to all the div in CSS) and all div will have different heights equal to array elements (choose an appropriate scale) (Changing the CSS property using JS).
  • Push every bar in that particular div , defined in the HTML file under navbar using JS.
  • Wrap all this in a function and make a call to that function.
  • Also add event listeners to the new array button and inside that call the function . So that you can use that button to create a new bar every time without refreshing the page.
  • In the CSS file you can add styles to the bars inside the class for bars.

Expected Outcome -

After adding the bars the site looks something like this.

Expected_bars_outcome

Implementing Bubble Sort Algorithm

Before starting this task, understand the Bubble Sort algorithm thoroughly.

Requirements

  • 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.

References-

Implementation of remaining Sorting function

Again before starting this task understand the Selection Sort, Insertion Sort, quick Sort, Merge sort algorithms thoroughly.

Tips

  • These sorting algorithms' implementations are the same as for the Bubble sort algorithm. In every algorithm's implementation to distinguish every comparison, swaps and iterations just change the colors and animations effects in your own way.

Changing the number of bars and speed

Now as you must have observed from the earlier app's demo we need to change the number and speed of the bars. This can be done mainly by attributing each bar with a relative value, so that it becomes a pictorial representation of the array's elements that are being sorted.

Requirements

  • 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);

Tips :

  • Add an event listener to the number of bars because when we will use that the no of bars should change instantly.

Expected Outcome

After implementing all the functionalities the end result of your app should be like this -


Host your website live

After completing all the milestones we have our application ready to be deployed and hosted live onto the web.


Start off by pushing your code to your GitHub account with a good README.md to publish your project.


Host your app live using Netlify and share its link among your peers and finally do add this project to your resume.