An open API service indexing awesome lists of open source software.

https://github.com/sandeep-shaw10/algorithm_app

Basic Sorting Visualization using Vanilla Javascript
https://github.com/sandeep-shaw10/algorithm_app

css3 html5 sorting-algorithms sorting-visualization vanilla-js

Last synced: 5 months ago
JSON representation

Basic Sorting Visualization using Vanilla Javascript

Awesome Lists containing this project

README

          

# *_ALGORITHM APP_* ![App Icon](images/icon-small.png)

## BASIC SORTING VISUALISATION
> Understand the Sorting concept by visualizing it.
> *Vizualization* _-_ *Definition* _-_ *Complexity* _-_ *Codes*

` WEBSITE LINKS ` : [Click Here](https://sandeep-shaw10.github.io/Algorithm_App/ "Algorithm App")

### Website Preview
![App Preview Gif](images/Algorithm_App.gif)

### Available Sorting Techniques :
* Bubble Sort
* Selection Sort
* Insertion Sort
* Quick Sort

### Available Coding Language Snippet:
| C | C++ | Java | Python |
|---|-----|------|--------|

> Hope you like this simple website
> Thank You !
>
>Have a nice day 😀

---

# PRODUCTION
|Sl.| _Release Date_ | _Version_ | _Author_ |
|---|----------------|--------------|----------|
|1 |23th Dec, 2020 |v0.123.122.020|*`Sandeep Shaw`*|

### WEBSITE TYPE : _*`Static`*_

### CATEGORY : _`Educational`_

### LANGUAGE : `HTML5` `CSS3` `JavaScript`

### LIBRARY / FRAMEWORK : `JQuery` `Bootstrap`

### DATABASE TYPE : ~~`NoSQL`~~ ~~`Relational SQL`~~

### DATABASE USED : `nil`

### DEPLOYMENT : `GitBash`

### CODE EDITOR : `Visual Studio`

# FEATURES
* Mutiple Sorting Visualization at once
* Dynamically the element get changed
* Responsive across a wider range of device
* Smooth Scrolling
* Attractive UI
* Single Page Application
* Visualization with attractive colors and effects
* Can understand the basics of Sorting through Definition
* Know the time and space complexity through pictorial representation
* Access the code snippet for various sorting in 4 different programming language (*_SOURCE_* : GeeksforGeek and Tutorialspoint)
* Provide source to learn better and master this sorting Techniques (*_SOURCE_* : GeeksforGeek)

# ISSUE
* Speed Slider not working in Bubble, Insertion and Selection Sort
* Visualization don't stop once started
* Requires _AUTOMATIC REFRESH_ after Quick Sort

# LICENSE
This project is licensed under [MIT](LICENSE.txt "View License")

> __Sandeep Shaw__
>(Student, C.S.E)
>
>Follow me on :
>[LinkedIn](https://www.linkedin.com/in/sandeep-shaw-b47b47158/) |
>[Instagram](https://www.instagram.com/san_deep_10/) |
>[Youtube](https://www.youtube.com/channel/UCnzoz-Snqs689f1YLqi--zg) |
>[Github](https://github.com/sandeep-shaw10)
>
>If you like this repository dont forget to give a star 👍

---

# PROJECT INFERENCE
1. Learned the important functions of `JQuery` and it's implementation to make the Website more functional and dynamic
2. Learned how to use the classes of `Bootstrap` to make the code responsive. The concept and the use of grid system became more crystal clear
3. The most important part is that, the use of delay function e.g setTimeout() helped me a lot to render the vizualization
4. I rely on HTML Structure `div` and Jquery for the animations and it worked well without `CANVAS`
5. Learned how to scrape the content inside the HTML Structure using Jquery inorder to get copied in the clipboard

# FUTURE IMPLEMENTATION
1. Merge the entire `.js` script into a single file
2. Addding Merge and Heap Sort
3. Keeping one screen for vizualization with multiple sorting options