sandeep-shaw10 / Algorithm_App

Basic Sorting Visualization using Vanilla Javascript

Home Page:https://sandeep-shaw10.github.io/Algorithm_App/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ALGORITHM APP App Icon

BASIC SORTING VISUALISATION

Understand the Sorting concept by visualizing it. Vizualization - Definition - Complexity - Codes

WEBSITE LINKS : Click Here

Website Preview

App Preview 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

Sandeep Shaw (Student, C.S.E)

Follow me on : LinkedIn | Instagram | Youtube | Github

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

About

Basic Sorting Visualization using Vanilla Javascript

https://sandeep-shaw10.github.io/Algorithm_App/

License:MIT License


Languages

Language:JavaScript 60.2%Language:HTML 27.3%Language:CSS 12.5%