https://github.com/yashpandey1405/sorting-visualizer
Built a Sorting Visualizer using HTML, CSS, and JavaScript to demonstrate and compare sorting algorithms like Bubble Sort, Merge Sort, and Quick Sort
https://github.com/yashpandey1405/sorting-visualizer
html-css-javascript sorting-algorithms sorting-visualization
Last synced: 10 months ago
JSON representation
Built a Sorting Visualizer using HTML, CSS, and JavaScript to demonstrate and compare sorting algorithms like Bubble Sort, Merge Sort, and Quick Sort
- Host: GitHub
- URL: https://github.com/yashpandey1405/sorting-visualizer
- Owner: YashPandey1405
- Created: 2024-09-21T15:30:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-27T13:20:17.000Z (about 1 year ago)
- Last Synced: 2025-02-18T05:00:31.672Z (12 months ago)
- Topics: html-css-javascript, sorting-algorithms, sorting-visualization
- Language: JavaScript
- Homepage: https://yashpandey1405.github.io/Sorting-Visualizer/
- Size: 91.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sorting Visualizer
🔗 **Live Demo:** [Sorting Visualizer](https://yashpandey1405.github.io/Sorting-Visualizer/)
📂 **Repository:** [GitHub - Sorting Visualizer](https://github.com/yashpandey1405/Sorting-Visualizer)
---
## 📜 Project Overview
The *Sorting Visualizer* is an interactive web application designed to visually demonstrate various sorting algorithms. It helps users understand how different algorithms work by dynamically displaying the sorting process in real-time. This tool is educational, user-friendly, and ideal for anyone learning or teaching sorting concepts.
---
## 🚀 Features
- **Dynamic Visualization**: Watch sorting algorithms in action.
- **Multiple Algorithms**: Supports popular algorithms like:
- Bubble Sort
- Selection Sort
- Insertion Sort
- Merge Sort
- Quick Sort
- **User Interactivity**: Control the speed of sorting, array size, and generate new arrays.
- **Responsive Design**: Optimized for various screen sizes.
---
## 🛠 Technologies Used
- **Frontend:**
- **HTML5**: Structuring the web content.
- **CSS3**: Styling and layout.
- **JavaScript (ES6)**: Implementing sorting algorithms and interactivity.
- **Bootstrap 4**: Responsive design and UI components.
---
## 📈 Future Improvements
1. **Backend Integration**:
- Use **Node.js** and **Express.js** to enable user authentication and data storage.
- Implement a backend leaderboard system to track sorting times.
2. **Enhanced UI/UX**:
- Upgrade the design using the latest **Bootstrap** version for a modern and sleek look.
- Add customizable themes and accessibility features.
3. **Additional Features**:
- Support for more sorting algorithms.
- Include a step-by-step explanation for each algorithm.
- Allow users to input their own data sets for sorting.
---
## 🚀 Getting Started
Follow these steps to run the project locally:
### 1. Clone the Repository
```bash
git clone https://github.com/yashpandey1405/Sorting-Visualizer.git
```
### 2. Navigate to the Project Directory
```bash
cd Sorting-Visualizer
```
### 3. Open the Project in a Browser
- Open the `index.html` file directly in your browser.
---
## 🤝 Contributing
Contributions are welcome! Feel free to fork the repository, create a new branch, and submit a pull request with your improvements.
---
## 📝 License
This project is open-source and available under the **MIT License**.
---
## 🙌 Acknowledgments
Special thanks to my friends who has supported this project, providing feedback and suggestions for future improvements!