Sorting Visualizer Overview: Sorting Visualizer is an interactive web application designed to help users understand and visualize popular sorting algorithms. Developed by Lokesh Kumar, the project showcases algorithms like Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort through animated bar representations. Features
Interactive Visualization: Watch sorting algorithms in action with animated bars representing array elements. Customizable Input: Enter a custom array or generate a random array to visualize sorting. Adjustable Parameters: Control sorting speed and array size for a tailored experience. Algorithm Details: View descriptions and pseudocode for each sorting algorithm. Responsive Design: Optimized for both desktop and mobile devices using Tailwind CSS. Audio Feedback: Sound effects accompany sorting actions for an engaging experience.
Technologies Used
HTML/CSS/JavaScript: Core web technologies for structure, styling, and interactivity. Tailwind CSS: Utility-first CSS framework for responsive and modern styling. Web Audio API: For generating sound effects during sorting visualizations.
Getting Started
Clone the Repository:git clone
Open the Project: Navigate to the project directory. Open index.html in a web browser to start the application.
Usage: Enter a comma-separated list of numbers or click "Random Array" to generate one. Select a sorting algorithm from the dropdown menu. Adjust speed and array size using sliders. Click "View Sorting" to navigate to the visualization page. Use controls like "Resume," "Stop," "Restart," or "Back" to manage the visualization.
Project Structure
index.html: Main page for inputting arrays and selecting algorithms. visualizer.html: Visualization page displaying sorting animations and algorithm details. about.html: Information about the project and its purpose. contact.html: Contact details for feedback or inquiries. style.css: Tailwind CSS and custom styles for the application. script.js: JavaScript for handling user input and initializing the main page. visualizer-script.js: JavaScript for managing sorting visualizations and animations.