Sorting Algorithm Visualizer

This project is an interactive web application built with HTML, CSS, and JavaScript that visualizes various sorting algorithms.

Features

• Multiple Algorithms: Visualize Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort.
• Interactive Visualization: Watch algorithms sort an array represented by numbered boxes in real-time.
• Color Coding:
  • Blue: Default state
  • Yellow (Comparing): Elements being compared.
  • Red (Swapping/Moving): Elements being swapped or moved to their sorted position.
  • Green (Sorted): Elements confirmed to be in their final sorted position.
• Controls:
  • Select the sorting algorithm.
  • Adjust the animation speed.
  • Adjust the array size (10-200 elements).
  • Generate a new random array.
  • Start the sorting animation.
  • Stop the currently running animation.
• Smooth Animations: Uses CSS transforms for smoother visual swapping of elements (where applicable).
• Responsive Design: Adapts to different screen sizes.
• Dark Theme: Features a dark, modern UI theme.

How to Use

1. Clone or download this repository.
2. Open the index.html file in your web browser.
3. Use the controls in the top navigation bar to select an algorithm, adjust speed/size, generate a new array, and start/stop the visualization.

Technologies Used

• HTML5
• CSS3 (including Flexbox, CSS Variables, Transitions)
• JavaScript (ES6+ including async/await)