Sorting Algorithm Vizualization

Content

• Introduction
• Wireframes
• User Stories
• Site Owner Goals
• Technologies Used
• Testing
• Deployment
• Running Project Locally
• Credits

Introduction

This site is to help visualize different sorting algorithms.

Wireframes

Balsamiq was used to design the following

User Stories

• User should be able to select the algorithm from which he/she can sort the array
• User can specify the size of the array
• User can instruct when to start the sorting.
• User can specify the speed of sorting
• User can ony change the speed while sorting is in progress

Site Owner Goals

• Easy to use
• Easy to understand

Technologies Used

• HTML

  • HTML was user to give structure to page and content

• CSS

  • CSS was used to style the content

• Javascript

  • Javascript was used to design the backend systems of the algorithm

• Bootstrap 4.5

  • This helped made content responsive

• Git

  • Git was used for version control, which helped in keeping track of changed files

• GitHub

  • Github was used to store and deploy the project

• Gitpod

  • Gitpod was used to write code in. It is a cloud based platform

• Balsamiq

  • Balsmiq was used to design the basic structure of the website

• Stack Overflow

  • Stack overflow was used to debug code

• W3schools

  • This was used to understand concept of flexbox and get overlay code

• Code Institute learning platform

  • With the help of code institute I was able to understand how a static website is made

• Geeks for Geeks

  • This website helped me understand how the different algorithms can be implemented

• Jigsaw

  • Tool for CSS validation

• W3C validator

  • Tool for HTML validation

• Lighthouse

  • Tool for performance, accessiblity analysis

• Am I Responsive

  • Tool used to check how website will look across different screen size

Testing

During the development of website, google chrome developer tools were used to test the website and check the responsiveness of the code implemented. The final testing was done on

• Dell Latitude 7410, 14" screen
• HP 24f Monitor
• Oneplus 6T

General Tests

1. Pages are loaded correctly

   • Testing if the webpage was being loaded correctly
   • Result: Web page is being loaded correctly

2. Clicking on Logo brings back to home screen

   • Result: When the logo is clicked on, it brings back to the home screen

3. Checking if the Size and Speed Slider work

   • Result: Both the sliders work perfectly and change values as required

4. Dropdown list is working

   • Result: Dropdown list is working fine and selecting the desired algorithm

5. Sort array button working

   • Clicking the button results in the array to be sorted

6. W3C Validator Test

7. Jigsaw Validator Test

8. Lighthouse Validator

   • Mobile

   • Desktop

Testing User Stories

All the user stories can be tested by the following pictures

• The pic above shows a different algorithm and size of the array being selected than the default selection
• This confirms the size of the array and algorithm can be selected by the users choice

• This pic shows the initial speed selected while the sorting is in progress.
• This checks the stories that user can specify when to start sorting and the speed of sorting

• As it can be seen the speed of sorting can be easily changed when the sorting is in progess

Deployment

I used github pages to deploy the website. To deploy a project, one should follow the following steps

1. Log into github and locate the repository.
2. Find the settings tab and click on it
3. Locate the GitHub pages section
4. In the source sub-section, select the master branch from dropdown
5. Click on save, and you'll find your live link there

The link to my project is: https://dhruv2102.github.io/MS2-Sorting-Algorithm-Visualizer/

Running Project Locally

To run the project locally, follow these steps

1. Open the repository https://dhruv2102.github.io/MS2-Sorting-Algorithm-Visualizer/
2. Choose HTTPS clone option from the code button.
3. Copy this command
4. Open the directory where you want to clone the project to.
5. Open the Git Bash terminal in the targeted directory.
6. Type the command git clone and then paste the HTTPS url
7. After the execution of the command, this repository would be created in the directory.

Acknowledgement

• I would like to thank my mentor for guiding me through the project

Future Development

• Sorting algorithm comparator: Visualize two sorting algorithms side by side to identify which one is faster

Note

• All the algorithms were coded on my own with reference from Geeks for Geeks.
• To help understand how to make site more visual for sorting algorithms, reference was taken from the repository: https://github.com/AbhishekPrakash5/Sorting-Visualization