We have learnt many sorting algorithms. 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.
So decided to Create a web application using HTML, CSS, JavaScript to visualize how various sorting algorithms work and how elements are swapped in the array to get to the sorted array in the end.
- Colored representation of step being executed.
- Blue: Default
- Yellow : Being compared
- Red : Identified as in incorrect position and to be moved
- Green : In correct position
- Three Controls for visualizations :
- Generation of new data array (Randomly generate new array).
- Set size of data array in range certain range.
- Speed of visualization (5 speed levels)
- HTML
- CSS
- JavaScript
-
Writing sort algorithms in JS : I faced writing sort algorithms in JS as I was new to it. Usually to write some code or learn algorithms for solving coding problems, I prefer C++/Java. Initially, I took more time to implement the first sort algorithm i.e., Bubble sort to perfectly work. After that, for the remaining algorithms, I took no time and implemented them so quickly one after the other.
-
Site responsiveness : As a beginner the first challenge was to bring site responsiveness as I have to learn CSS from scratch (Still have some bugs).
This was my first project which I was deploying the website live. This was a great learning experience for me creating a full application from scratch. Thanks to the Crio community for providing the amazing learning experience with #learnbydoing projects.