DEV Community

Cover image for Sorting Visualizer

Posted on

Sorting Visualizer

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
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.


1. Code editor (which you prefer) I prefer VSCode
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


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

Top comments (6)

grahamthedev profile image
GrahamTheDev • Edited


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! โค

dharshak profile image

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

arpankesh profile image

Hey, I have also created a Sorting Visualizer project for my interview which is quite similar to yours.
Here's the link for the git repo :-

And the website :-

What can I say to the interviewer if he/she asks how can I improve this project?
And do you have any ideas on what kind of questions may be asked if a candidate presents this project in the interview?

karthik2265 profile image
Karhik Suryadevara

Nice, looks awesome

siddhantp99 profile image
Siddhant Pardeshi

Is the project a part of premium on crio ?

dharshak profile image

No, it's not a part of premium on crio. It was a 2 week online program where you'll complete a mini project there.

You can check with code link I provided in blog.

Code link-