DEV Community

loading...
Cover image for Sorting Visualizer

Sorting Visualizer

Dharshak
Cool & Stay positive! Passion towards software development Curious learner My Techstack- Reactjs, Nodejs, HTML, CSS, Java, Python, C++
・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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-
    Alt Text

  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

Discussion (3)

Collapse
inhuofficial profile image
InHuOfficial • Edited

Nice!

Quick one, it doesn't work on my iPhone, either in Safari or Chrome.

I will give you a hint - you shouldn't use anchors <a> for <button>s.

Also you should never have an anchor <a> without a valid href.

See if you can track down and fix that one, other than that it looks great! ❤

Collapse
dharshak profile image
Dharshak Author

Thankyou for your review.
Yes, I will look into it and update that

Collapse
karthik2265 profile image
Karthik suryadevara

Nice, looks awesome