This project is a simple sorting visualizer for Quick Sort and Merge Sort algorithms. It is developed using JavaScript, HTML, and CSS. The visualizer provides an interactive and visual representation of how these sorting algorithms work, helping users to understand the process step-by-step.
- Quick Sort Visualization: Watch the Quick Sort algorithm sort an array of numbers in real time.
- Merge Sort Visualization: Observe the Merge Sort algorithm in action, merging and sorting elements visually.
The project consists of three main files:
index.html: The HTML file containing the structure of the visualizer.styles.css: The CSS file for styling the visualizer.script.js: The JavaScript file implementing the sorting algorithms and the visualization logic.
This file sets up the basic structure of the web page. It includes:
- A container to hold the array elements to be sorted.
- Buttons to control the visualization (e.g., start, pause, reset).
- Links to the CSS and JavaScript files.
This file contains the styles for the visualizer, including:
- Layout and positioning of the array elements.
- Colors and animations for the sorting process.
- Styling for the control buttons.
This file implements the functionality of the visualizer, including:
- Initialization of the array to be sorted.
- Functions for Quick Sort and Merge Sort algorithms.
- Functions to update the visual representation of the array.
- Event listeners for user interaction with the control buttons.
- Open
index.htmlin a web browser. - Use the control buttons to start, pause, or reset the sorting visualization.
- Watch as the selected sorting algorithm sorts the array and visualize the process.
Contributions to improve this project are welcome. Feel free to fork the repository and submit pull requests.
For any questions or feedback, please contact Nikit at nikitpotdar@gmail.com.
Thank you for using the Sorting Visualizer! We hope it helps you understand Quick Sort and Merge Sort better.