Sorting Visualizer 🛠️

A web-based interactive Sorting Algorithm Visualizer built with JavaScript, HTML, and CSS. This tool allows you to visually understand how various sorting algorithms work in real-time. Perfect for beginners and anyone learning Data Structures & Algorithms.

Features

• Visualizes popular sorting algorithms:
  • Bubble Sort
  • Selection Sort
  • Insertion Sort
  • Merge Sort
  • Quick Sort
  • Heap Sort
• Adjustable array size and speed
• Step-by-step visualization with color-coded comparisons
• Fully interactive and responsive UI

Demo

https://sorting-visualizer-iota-eight.vercel.app/

Learnings 📚

While building this Sorting Visualizer, I gained hands-on experience with:

• Sorting Algorithms: Deepened understanding of Bubble, Selection, Insertion, Merge, Quick, and Heap Sort, including their time and space complexities.
• DOM Manipulation: Learned to dynamically create, update, and animate array bars using JavaScript and CSS.
• Asynchronous JavaScript: Practiced using async/await and setTimeout for smooth, step-by-step visualization.
• UI/UX Design: Built an intuitive interface with interactive controls for speed and array size.
• Problem Solving: Implemented algorithm logic visually, reinforcing algorithmic thinking and debugging skills.
• Responsive Design: Ensured the visualizer works seamlessly on different screen sizes.

This project strengthened both my algorithmic understanding and frontend development skills, bridging theory with practical visualization.