# Sorting Algorithms Visualizer

A modern, responsive, single-page web app for visualizing and comparing popular sorting algorithms. Built with HTML, Bootstrap, and vanilla JavaScript. Easily extensible and designed for clarity, education, and experimentation.

## Features

- **Multiple Algorithms**: Visualize and compare a wide range of sorting algorithms:
  - 🫧 Bubble Sort
  - 🍸 Shaker Sort (Cocktail Sort)
  - ⚡ Quick Sort
  - 🪢 Merge Sort
  - 📝 Insertion Sort
  - 🔎 Selection Sort
  - 🏔️ Heap Sort
  - 🐚 Shell Sort
  - 🔢 Counting Sort (for non-negative integers)
  - 💰 Greedy Sort (sorts by most frequent value; for demonstration)
- **Animated Visualization**: Step-by-step, color-coded bar animations for comparisons, swaps, and sorted elements.
- **Live Stats**: Real-time updates for comparisons, swaps, elapsed time, and theoretical min/max for each algorithm.
- **Responsive UI**: Clean, mobile-friendly layout using Bootstrap grid, cards, and utility classes. No custom CSS except for bar height.
- **Custom & Random Arrays**: Enter your own array or generate a random one (5–10 elements, values 1–40).
- **Abort/Reset**: Instantly stop and reset any running sort.
- **Algorithm Info**: Sidebar with algorithm selection and detailed info (how it works, pros, cons).
- **Extensible**: Add new algorithms easily by editing the `algorithms` object in `main.js`.

## How to Use

1. **Open `index.html` in your browser.**
2. **Choose an algorithm** from the sidebar.
3. **Set an array**:
   - Enter comma-separated numbers (1–20 elements, each 1–40) and click "Set Array".
   - Or click "Random" for a random array.
4. **Adjust speed** with the slider (50–1000ms per step).
5. **Click "Start"** to animate the sort. Click "Reset" to abort and reset.
6. **Switch algorithms** at any time—this will reset the array and stats.

## Color Coding

- **Blue (`bg-primary`)**: Default bars
- **Red (`bg-danger`)**: Comparing
- **Yellow (`bg-warning`)**: Swapping
- **Green (`bg-success`)**: Sorted/correct position

## Algorithms Implemented

| Name           | Emoji | Type        | Stable | Time Complexity (Best/Average/Worst) |
| -------------- | ----- | ----------- | ------ | ------------------------------------ |
| Bubble Sort    | 🫧     | Comparison  | Yes    | O(n) / O(n²) / O(n²)                 |
| Shaker Sort    | 🍸    | Comparison  | Yes    | O(n) / O(n²) / O(n²)                 |
| Quick Sort     | ⚡    | Comparison  | No     | O(n log n) / O(n log n) / O(n²)      |
| Merge Sort     | 🪢    | Comparison  | Yes    | O(n log n) / O(n log n) / O(n log n) |
| Insertion Sort | 📝    | Comparison  | Yes    | O(n) / O(n²) / O(n²)                 |
| Selection Sort | 🔎    | Comparison  | No     | O(n²) / O(n²) / O(n²)                |
| Heap Sort      | 🏔️    | Comparison  | No     | O(n log n) / O(n log n) / O(n log n) |
| Shell Sort     | 🐚    | Comparison  | No     | O(n log n) / O(n log² n) / O(n¹·⁵)   |
| Counting Sort  | 🔢    | Non-compare | Yes    | O(n+k) / O(n+k) / O(n+k)             |
| Greedy Sort    | 💰    | Greedy/demo | No     | —                                    |

## File Structure

- `index.html` — Main HTML file, includes Bootstrap and links to CSS/JS
- `main.js` — All algorithm logic, UI rendering, and event handling
- `style.css` — Minimal custom CSS (only for bar height)

## How to Add a New Algorithm

1. Open `main.js`.
2. Add a new entry to the `algorithms` object with:
   - `name`: Display name (with emoji if you like)
   - `info`: `{ how, pros, cons }` strings
   - `*sort(arr)`: Generator function yielding visualization steps
   - `minMax(n)`: Function returning min/max stats for given array size
3. The sidebar and UI will update automatically.

## Requirements

- Modern browser (Chrome, Firefox, Edge, Safari)
- No build step or server required

## Credits

- Built by Alex with help from GitHub Copilot
- Uses [Bootstrap 5](https://getbootstrap.com/) for layout and styling

---

Enjoy learning and experimenting with sorting algorithms!