A web application built using HTML, CSS, and JavaScript to visualize popular sorting algorithms in action. This interactive tool demonstrates how classic sorting techniques operate step-by-step, making it ideal for learners and developers alike.
This project was created to:
- Strengthen my frontend development skills in HTML, CSS, and JavaScript.
- Provide an educational tool for beginners to learn, observe, and understand how sorting algorithms work through real-time visualizations.
- Intuitive and responsive UI.
- Real-time animations for each sorting process.
- Adjustable array size and sorting speed.
- Color-coded bars representing array elements for better visual clarity.
The following sorting algorithms are included:
- 🫧 Bubble Sort
- 🧩 Insertion Sort
- 🧮 Selection Sort
- 🔀 Merge Sort
- ⚡ Quick Sort
Each algorithm displays a step-by-step transformation of the array until it is fully sorted.
-
Clone the repository:
git clone https://github.com/yourusername/sorting-visualizer.git
-
Open the
index.htmlfile in your browser. -
Select an algorithm from the menu.
-
Adjust the speed and array size if needed.
-
Click Sort to start the visualization.