SORTING VISUALIZER - My First Javascript Project

Hello World! In this blog I am sharing my journey to Sorting Visualizer project using Javascript with Crio.do.

Just few weeks before, I had completed learning JavaScript and was planning to build a project. I went through a lot of project tutorials and ideas, but was confused which one to chose. I thought a JavaScript game would be awesome but also was skeptical whether it will be a good addition to my projects.

The next day, from somewhere, maybe telegram, I came to know about crio.do and learned that they are conducting an event or program where we will be guided to make a project and will provide a great learning experience. So, I registered for the same and after two or three days they posted the project's list. Among all the projects, 80% was not for me because my skills were up to JavaScript only in web development, there were also some projects in Python which I could have easily gone with but I found this one, Sorting Visualizer Project very interesting and promising. As I was already planning to build a JavaScript project so I think this would be the best possible option and really it was.

I learned a lot from this project, I thought I am good at JavaScript but I was wrong (as always). This project was very tough for me but I made it to the end finally. Everyday I used to got stuck but I used to immediately searched the solution after several trials and learned new things in the process, again stuck, again searched, again learned, again implemented, again new problems arose, again stuck, fixing one bug was resulting in 100 more bugs... and to be honest this is the best and fun way to learn anything. Also my semester exams were going, so it was very difficult to manage both project and the exam but somehow I managed to complete it before the deadline. I had learned several new topics and also learned the implementation and uses of the old topics which I read but failed to grasp the insights of those concepts: Best Practices for writing HTML and CSS, changing HTML and CSS using JavaScript, JavaScript Promises, async, await, setTimeout and much more. I was constantly learning by doing and it helped me a lot to gain confidence in those topics. I also got to know about how to deploy a website in netlify and it was a wonderful micro experience.

Thanks to crio.do for providing such a wonderful opportunity, guidance and learning experience.

Key Features :-

1. You can visualize four sorting algorithms - Selection Sort, Bubble Sort, Insertion Sort and Merge Sort (I am planning to add more in near future).
2. You can create new array of different elements.
3. You can change the size of the array.
4. You can change the speed of the animation.
5. The animations makes it easier for one to visualize what operations are going on and ultimately in better understanding of the algorithm.

Here's the link to my sorting visualizer website
https://sorting-visualizer-sk75.netlify.app/

and the Github repository
https://github.com/x-walker-x/sorting-visualizer

Thanks for reading and have a nice day.