🧠 Sorting Visualizer

A sleek and minimal web-based sorting algorithm visualizer built with HTML, CSS, and JavaScript. This project helps users understand how sorting algorithms work step-by-step through intuitive animations.

✨ Features

• 🔄 Visualize popular sorting algorithms in real time
• 📊 Bar chart representation of the array
• 🟠 Orange: Comparison highlight
• 💗 Pink: Swap highlight
• 🎛 Choose from multiple sorting algorithms
• 🕹 Easy-to-use controls for reset and sorting
• 💡 Clean and responsive UI (dark theme)

---

📦 Built With

• HTML5 – Structure of the page
• CSS3 – Styling and animations
• JavaScript (ES6) – Logic and dynamic interactions

---

🚀 Live Demo

🌐 Add your live demo URL here (e.g., GitHub Pages)

---

📁 Folder Structure

📦 sorting-visualizer/ ┣ 📜 index.html ┣ 📜 style.css ┣ 📜 script.js ┣ 📜 README.md ┗ 📸 screenshot.png (optional)

---

🧮 Supported Algorithms

• ✅ Bubble Sort
• ✅ Insertion Sort
• ✅ Selection Sort
• ✅ Merge Sort
• ✅ Quick Sort

---

🕹 How to Use

1. Clone the repository:

    ```bash
    git clone https://github.com/your-username/sorting-visualizer.git
    cd sorting-visualizer
    ```

2. Open index.html in your browser.

3. Choose an algorithm from the dropdown.

4. Click Sort to see the animation.

5. Use Reset to generate a new unsorted array.

🧠 Learning Goals

• Visualize how classic sorting algorithms operate

• Learn DOM manipulation using JavaScript

• Understand animation timing and UI feedback

• Practice clean code separation between logic and UI

💡 Future Enhancements

• 🕒 Display runtime and comparison counters

• 🛠 Adjustable array size and speed

• 📱 Mobile responsiveness

• 📚 Add more algorithms (e.g., Heap Sort, Radix Sort)

• 🎨 Theme switcher (light/dark)