Hi there!
This repo contains my algorithm sorting visualizer. After going through some coding challenges I became infatuated with sorting algorithms and how they work, that's what inspired me to build this project. The following project is a visual representation of selection sort, bubble sort, insertion sort, and merge sort. Try it out!
Link, deployed to netlify: https://sorting-visualizer2.netlify.app/
Tech used: HTML, CSS, JavaScript
I learned a lot building this project mostly because I encountered a lot of challenges. It would have been much easier to use chart.js or react or some other tool to create graphs in the DOM, but I wanted to do it with vanilla JS. Ultimately, I was able to represent my random array of numbers as bar elements in the DOM using some JS styling. It took a lot of googling, but I made it work. Another very challenging part of this project was working with the transitions of the bar elements. I ended up using promises and setTimeout to handle the transitions which probably isn't the best way to do it, but I honeslty couldn't figure out a better way. Overall, a very challenging project that really improved my Javascript skills.
Optimizations:
I wanted to add some numbers at the top of the bars to make it clear what values we are comparing, but ran out of time for the project. I might go back later and update that feature. I will also add a little pop up menu that gives some quick instructions of how to use the app and what is actually going on.
Lessons Learned:
- How to manipulate transitions in the DOM using Javascript with setTimeout and promises.
- How to create html elements with Javascript.
- Improved my understanding of several sorting algorithms.
Check out some other projects I've built:
Yelp Clone: https://github.com/MrGmo/Yelp-Clone
Loan calculator: https://github.com/MrGmo/LoanCalculator
Storybook: https://github.com/MrGmo/storyBook