sorting visualizer in HTML,CSS and JS
The idea behind developing a sorting visualizer was to get a good understanding of different algorithms like the bubble sort, selection sort, insertion sort, etc…
A newbie in data structures often pulls their hairs while learning different kinds of sorting algorithms at the same time. So a visualizer would help to compare the difference in the working of the algorithms.
sorting algorithms implemented till now in this website :
bubble sort, insertion sort and selection sort others will be added soon !
So in this article we will be discussing mistakes, techniques, challenges that I faced while making the project and my takeaways from this as it’s my first front-end project as I usually work more on the back-end side.
What you can take away from this article are mistakes that you can avoid while developing similar projects and a few nitty-gritty techniques, concepts that you should know before getting started with it.
Tips from my experience of developing this project:
Firstly, having an overview of what it will look like after completion and structuring the project beforehand would help you to develop project fast and easy. So it is recommended to spend a good amount of time on planning and structuring the project.
Few JavaScript concepts that would come in handy are event listeners, changing HTML DOM with JavaScript, functions and arrays in JavaScript.
My mistakes that you can avoid are :
I didn’t paid much attention on CSS which resulted to unresponsive of site :/
Which then screw up my mind and I went back to the basics and learned the CSS to make my site beautiful(It may still not look that good :)as I’m just a beginner in front-end development). So if you’re someone like me please go to the basics and have a good grasp on it.
One of the challenge was to convert algorithms that I learned in c++ to JavaScript well this won’t that though if you’re already familiar with JavaScript.
here’s the link to live website : https://sortingvisualiserbyvanita.netlify.app/
At last I would like to thank #crio.do for coming up with such an amazing community challenge! I developed and deployed my first front-end project from scratch by myself ! Also I have written my first blog in this challenge!
I had an amazing learning expereince #IBelieveInDoing community challenge.
Thanks for reading. I feel happy to connect & reach out to me for any discussions. Have a great day!!
