🔍 Algorithm Visualizer

An interactive Algorithm Visualizer built using HTML, CSS, and JavaScript to help understand how sorting algorithms work step by step through visual animations.

This project is designed for learning purposes and demonstrates the internal working of popular sorting algorithms in a simple and intuitive way.

---

🚀 Live Demo

🔗 https://shankie-algo-visualizer.netlify.app/

---

🧠 Algorithms Implemented

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

---

🛠️ Technologies Used

• HTML5 – Structure of the application
• CSS3 – Styling and animations
• JavaScript (ES6) – Algorithm logic and visualization

---

📂 Project Structure

algo-visualizer

• index.html
• sorting.css
• sorting.js
• README.md

---

⚙️ How It Works

1. Random bars are generated with different heights.
2. Each bar represents a numeric value.
3. Sorting algorithms operate on these values.
4. Comparisons and swaps are visualized using animations and color changes.
5. The final sorted array is displayed visually.

---

▶️ How to Run Locally

1. Clone the repository: git clone https://github.com/shashank2k5/algo-visualizer.git

2. Navigate to the project folder: cd algo-visualizer

3. Open index.html in any web browser.

---

🎯 Learning Outcomes

• Clear understanding of sorting algorithms
• Practical JavaScript implementation
• DOM manipulation skills
• Visualization of algorithm behavior

---

🔮 Future Improvements

• Add advanced sorting algorithms (Heap Sort)
• Light mode support
• Pathfinding visualizations

---

👤 Author

Shashank Sharma
GitHub: https://github.com/shashank2k5

Anant Sharma
Github: https://github.com/infinityanant