A web-based interactive tool to visualize popular sorting algorithms in action. The Sorting Visualizer allows users to generate random arrays, select sorting algorithms, and watch animated visualizations of the sorting process step-by-step. The tool is built using HTML, CSS, and JavaScript.
-
Dynamic Visualization:
- Visualize sorting algorithms with animated bar movements, height adjustments, and color highlights.
- Comparisons and swaps are color-coded for better understanding
-
Multiple Algorithms:
- Supports the following sorting algorithms:
- Bubble Sort
- Insertion Sort
- Selection Sort
- Supports the following sorting algorithms:
-
Customizable Array Size:
- Choose from 5, 10, or 20 bars to adjust the array size and sorting complexity.
-
User-Friendly Controls:
- Generate a new random array or select an algorithm to sort with the click of a button.
- HTML: Structure of the web interface.
- CSS: Styling with a modern blue palette for a clean and visually appealing design.
- JavaScript: Core logic for sorting algorithms and their animations.
- Open the project in a browser by hosting it locally or on a server.
- Use the "Generate New Array" button to create a random array.
- Select the number of bars using the bar count dropdown (5, 10, or 20).
- Choose a sorting algorithm from the algorithm dropdown (Bubble Sort, Insertion Sort, or Selection Sort).
- Click the "Sort" button to visualize the algorithm in action.
- To improve basic Frontend Skills
- To improve Understandings of Traditional Sorting Alogrithms