Sorting Algorithms Visualizer

Page Deployment Link: https://barathkumarbk-15.github.io/SortingAlgorithms

---

An interactive webpage that lets you visualize some of the most popular sorting algorithms like Merge Sort, Quick Sort, Heap Sort, Bubble Sort, Insertion Sort and Selection Sort.

Tools and Languages Used :

Download and Usage :

The code can be downloaded as a compressed zip file from the github web interface.

The repository can also be cloned using:

git clone https://github.com/BarathKumarBK-15/SortingAlgorithms.git

The game can be deployed locally after extraction by opening the folder in the terminal and running the code,

npm start

The above code opens the webpage on your defaulf browser. The page can also be opened on other browsers by opening the link,

http://localhost:3000

Components of Project :

• JavaScript XML files - 1
• JavaScript files - 1
• CSS files - 1
• Note: The above mentioned files are the important additional files added to the default React-App

About the Webpage :

The web page is made of a single screen, that displays the elements of the array, whose height represents the magnitude. The page provides the user with a variety of options to choose between, each of which invokes a function in the background to perform the task. The various components and phases of the project are explained below:

• Visualizer Screen :

  • It serves as the home page for the visualizer.
  • The page has a user friendly layout, that enable the user to choose between the algorithms.
  • The user can choose any one of the sorting algorithms and observe how the elements get swapped during the process of sorting.
  • The page also offers options to speed up and speed down the animation speed and to generate a new array.

• Graphical Features :

  • The project contains multiple graphical content ranging from bending of borders to styled fonts, contrasting colour switches and eye-soothing layout.
  • The CSS file checks in all the requisites for empowerment of the graphical interface.

• JavaScript XML :

  • The JavaScript XML plays the most significal role, driving the entire visualizer.
  • The precise algorithm of the visualizer manages the flow, controlling everything from function calls to page switches.
  • The algorithm is built using simple conditional statements, arrays,functions and classes.

• JavaScript :

  • The JavaScript plays a vital role controlling all the sorting algorithms.
  • It recieves all the function calls and returns the animations for requested algorithms.
  • All the sorting algoritms in the script is in its most time and space efficient form.

Suggested Browsers for Deployment :

• Microsoft Edge
• Google Chrome
• Safari

Screenshots of the WebPage :

Home