🎨 Sorting Visualizer 📊

A Sorting Algorithm Visualizer built using HTML, CSS, and JavaScript.
This project demonstrates how various sorting algorithms work by visualizing the sorting process in real-time with animated bars.
It includes dark mode, customizable bar colors, speed control, and swap count tracking.

---

🌟 Features

• 🎨 Beautiful UI with Light/Dark Mode toggle.
• 🔄 Sorting Algorithms Supported:
  • 🟢 Bubble Sort
  • 🟡 Selection Sort
  • 🔵 Insertion Sort
  • 🟣 Merge Sort
  • 🔴 Quick Sort
• 🎚️ Adjustable animation speed.
• 🎨 Customizable bar colors.
• 🔢 Swap counter to track operations.
• 🔀 Generate a new random array instantly.
• 📱 Fully responsive design.

---

📸 Screenshots

🌞 Light Mode

🌚 Dark Mode

---

🛠️ Tech Stack

• HTML5 → Structure
• CSS3 → Styling & Dark Mode
• JavaScript (ES6) → Sorting algorithms, animations, and interactivity

---

📦 Installation & Usage

1️⃣ Clone the repository

git clone https://github.com/<your-username>/sorting-visualizer.git

2️⃣ Navigate to the project folder

cd sorting-visualizer

3️⃣ Run the project

Just open the index.html file in any modern browser.

📚 How It Works

Sorting Algorithms Visualized

Algorithm	Time Complexity	Space Complexity	Stability	Visualization
Bubble Sort	O(n²)	O(1)	✅ Stable	✅
Selection Sort	O(n²)	O(1)	❌ Unstable	✅
Insertion Sort	O(n²)	O(1)	✅ Stable	✅
Merge Sort	O(n log n)	O(n)	✅ Stable	✅
Quick Sort	O(n log n)	O(log n)	❌ Unstable	✅

• Each bar represents an array element.

• Bar height corresponds to the value.

• Swaps are animated to visualize the sorting process.

⚡ Controls

Control Description

• 🎨 Bar Color Picker Change the color of bars dynamically
• ⏱ Speed Slider Adjust animation speed
• 🔄 Generate Array Create a new random dataset
• 🔀 Sorting Buttons Choose between 5 sorting algorithms
• 🌙 Dark Mode Toggle between light & dark themes
• 🔢 Swap Counter Shows the number of swaps performed

📂 Project Structure

sorting-visualizer/

├── index.html # Main HTML file

├── README.md # Project documentation (Since CSS & JS are embedded in the HTML file.)

🧠 Future Enhancements

✅ Add Heap Sort & Counting Sort

✅ Add Sound effects for swaps 🎵

✅ Deploy live demo on GitHub Pages

✅ Improve mobile responsiveness

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to fork the repository and submit a pull request.

📜 License

This project is licensed under the MIT License — you are free to use, modify, and distribute it.

👩‍💻 Author

Kinza Afzal 📧 kinzaafzal07122004@gmail.com

🌐 GitHub Profile: kinza7124

⭐ Support

If you like this project, don’t forget to star the repository ⭐ on GitHub!