Sorting Visualizer is a sorting algorithm visualizer in which various sorting algorithms are implemented with the help of bars(strips).
You can have clear understanding about the working of different sorting algorithms and you can even feel the working of these algorithms in these sorting visualizer.
As a part of Crio ##IBelieveinDoing I tried to build these sorting visualizer project.
Algorithms implemented
Selection Sort
Bubble Sort
Insertion Sort
Quick Sort
Prerequisites:
*HTML/CSS
*Javascript
*Asynchronous Javascript
*Github
*VsCode
HTML/CSS
HTML stands for hypertext markup language for creating Web pages.
HTML describes the structure of a Web page.
CSS stands for Cascading Style Sheets. CSS is used to design a web page. It can control the layout of multiple web pages all at once.
Javascript
JavaScript is the Programming Language for the Web.
JavaScript can update and change both HTML and CSS.
JavaScript can calculate, manipulate and validate data.
Some main concepts of javascript used in projects:
Asynchronous Javascript
many Web API features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it, accessing a video stream from a web cam, or broadcasting the display to a VR headset.
Mainly used loop delay part.
Github
GitHub is a code hosting platform for collaboration and version control. A GitHub repository can be used to store a development project. It can contain folders and any type of files (HTML, CSS, JavaScript, Documents, Data, Images).
VsCode
VS Code is source code editor which comes with built-in support for JavaScript, TypeScript and Node.js.
Challenge
To add delays before swapping and changing the color of bars so one can clearly see the comparison and swappings was fun,challenging and learning part for me. For these understanding of asynchronous part of javascript like promises,callbacks and the execution of asynchronous code was needed after doing a lot of research on these topics I have successfully implemented delays in loop for clear visualization.
Conclusion
These was my first self made project. It was insightful and had great learning journey through entire project creation I learnt about many new CSS styles and core concepts of Javascript and after successfully creating these project I landed up writing my first blog.
I am sharing my code repo and web-app link below:
Github
Live Link
Welcome for any suggestion and review.
A huge thanks to @Crio Team, @Som, @ajay for bringing up such project ideas for beginners and these was a really a nice initiative of learning by doing.
Top comments (0)