Sorting Visualizer is a React web application that generates a new array and allows the user to see the sortings of these arrays via Merge, Quick, Heap, and Bubble Sort. The purpose of this project is to familiarize myself with JavaScript array managment, along with incorporating previous Python and C coding experiences by challenging myself to figure out how to write a Merge Sort, Quick Sort, Heap Sort, and Bubble Sort functions. This project was completed by using HTML, CSS, and JavaScript with a React framework.
Although I already have prior experience with HTML and CSS, the use of a .jsx extension was new to me. It's just like using <script> in an HTML file, but vice versa in this case. This project has mostly helped me better understand array manipulation in JavaScript, just like Python, C, and C++. I have taken insightful information from YouTube videos that helped me visualize the sorting methods. The links are provided below:
https://www.youtube.com/watch?v=4VqmGXwpLqc&list=PL9xmBV_5YoZOZSbGAXAPIq1BeUf4j20pl -- Merge Sort
https://www.youtube.com/watch?v=Hoixgm4-P4M&list=PL9xmBV_5YoZOZSbGAXAPIq1BeUf4j20pl&index=2 -- Quick Sort
https://www.youtube.com/watch?v=2DmK_H7IdTo&list=PL9xmBV_5YoZOZSbGAXAPIq1BeUf4j20pl&index=6 -- Heap Sort
https://www.youtube.com/watch?v=xli_FI7CuzA&list=PL9xmBV_5YoZOZSbGAXAPIq1BeUf4j20pl&index=3 -- Bubble Sort
I have published this site to GitHub Pages, the link is provided here: https://fawazm30.github.io/SortingVisualizer/
If you want to run this project locally then just git clone it:
git clone https://github.com/fawazm30/SortingVisualizer.git
cd SortingVisualizer