Hello DEV people!
Today, I'm going to write my first dev blog explaining my project working experience of creating a sorting visualizer of different sort algorithms.

As part of the Crio IBelieveinDoing program, I selected and built a Sorting visualizer to visualize and understand the sorting algorithms. As of now, I built only 5 sorting algorithms as -

Bubble sort
Selection sort
Insertion sort
Merge sort
Quicksort

The main reason I choose this project to become more familiar with the javascript concepts, and CSS styling. So, I didn't use any frameworks other than HTML, CSS, and JS.

On successful completion with this project,
Now I'm familiar with the JS concepts, can confidently solve coding problems, write stylings in CSS.

About this Project

This project is built using HTML, CSS, and JS. This project sorting visualizer is a very simple UI and it allows the users to select the sort algorithm, select the array size, and speed of the visualization.

Pre-requisites

1. Code editor (which you prefer) I prefer VSCode
2. HTML
3. CSS
4. JS

Challenges I faced

1. Site responsiveness
   To bring responsiveness to the site, I have gone back to learn CSS styling. It is like going back to the time when I was learning the CS fundamentals and web technologies as a beginner.
   See the below image on how it looks like-
   

2. Writing sort algorithms in JS
   And coming to the second challenge I faced writing sort algorithms in JS. When I want to write some code or learn algorithms for solving coding problems, I usually prefer Python/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.

What's inside the website

1. Currently available sorting algorithms- Bubble sort, Selection sort, Insertion sort, Merge sort, Quicksort (I will plan to bring more algorithms in action to visualize & more changes).
2. You can change the size of the array
3. You can change the speed of the visualization

Conclusion

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.
Also, through this project, I was writing my first dev blog.

Thanks to the Crio community for providing the amazing learning experience with #learnbydoing projects and a big dev community.

Code and deployment

Here's the link to my sorting visualizer website-
sorting visualizer
Here's the link for the code-
sort visualizer code

Thanks for reading. I feel happy to connect & reach out to me for any discussions. Have a great day!!

LinkedIn Twitter