This project helps visualize different sorting algorithms. HTML and CSS along with Bootstrap have been used for styling. 50 bars are created through JavaScript and are of random heights ranging 5px to 400px. These bars rearrange according to the sorting algorithm in an ascending order. The sorting algorithm is implemented in javascript. Vanilla JavaScript has been used so no need to learn any external JS library. Sorting Algorithms which can be visualized using this web app are - Selection Sort, Bubble Sort, Insertion Sort, Merge Sort, Quick Sort. The webapp focuses on visualizing how the algorithm works, i.e selects and positions the elements and how the different elements of the array are moved and compared before finally being sorted. Different colors are shown to represent different iterators. The colors might not be the same for every algorithm because of the difference in the algorithms. But it is easy to identify what color represents what iterator in the algorithm. Will add a tag which describes what each color represents in that particular algorithm in the next update. The visualization should not be used to compare of the performance of different algorithms because the speed for each algorithm is set such that it is easier to visualize every step of the algorithm. It is not indicative of the time complexity of the algorithm.

HOW TO USE:

1. Clone the repository and open index.html
2. Click on Generate New Array Button to generate a random array.
3. Click on any of the algorithm Buttons above to start sorting the array using that algorithm. (Fun Fact: Try clicking on a different algorithm while on of the algorithm is still running>>>> can be fixed but was interesting so left it as is)
4. Click on Generate New Array Button to stop the current algorithm and generate a new random array.