Keshav Synopsis Format

CEC Landran
Department of Computer Science &

Engineering
Format for B.Tech Project Synopsis
Title page:
1. Name of Student : KESHAV KUMAR
2. PTU Roll No. : 2002488
3. Present official Address with Email, telephone No. : Guru Kripa PG Landran,
Mohali. keshavkumar9431@gmail.com 8340242359
4. Branch : CSE
5. Batch : 2020 -2024
6. Proposed Topic : Sorting Visualizer
Introduction :
We have learnt sorting algorithms like bubble sort, selection sort, insertion sort, quick sort,
heap sort, etc. But often we fail to understand the core idea of a particular algorithm,
maybe because we are unable to visualize how they work. So the most important thing to
understand about these algorithms is visualization.
That’s why we are making this project to let everyone understand how these algorithms
work and through this project you also will get a deep understanding of such sorting
algorithms.
This project will guide you step by step to complete this project and at the end of this
project you will have an immense grip on some core concepts of Javascript as well. Adding
this project on your resume will showcase your skills and add a great value to your profile.
This project is a good start for beginners and a refresher for professionals who have
dabbled in data structures and algorithms using Javascript before and also web developers.
This project is based on three languages as we design the UI of visualization which is
HTML, CSS(Cascading Style Sheet), and JavaScript. These three languages are
interconnected with each other without any one of them we can’t make an awesome UI.
HTML was created by Tim Berners-Lee. The first version of HTML was written by Tim
Berners-Lee in 1993. Since then, there have been many different versions of HTML. The
most widely used version throughout the 2000's was HTML 4.01, which became an official
standard in December 1999
HTML stands for Hyper Text Markup Language. It is the standard markup language for
creating Web pages, describes the structure of a Web page, consists of a series of elements,
elements tell the browser how to display the content and elements label pieces of content
such as "this is a heading", "this is a paragraph", "this is a link", etc.
CSS was first proposed by Håkon Wium Lie in 1994. At the time, Lie was working with
Tim Berners-Lee at CERN. Several other style sheet languages for the web were proposed
around the same time.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language such as HTML. CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript.
Brendan Eich 1961 is an American computer programmer and technology executive. He

created the JavaScript programming language and co-founded the Mozilla project, the
Mozilla Foundation, and the Mozilla Corporation.
JavaScript is a text-based programming language used both on the client-side and
server-side that allows you to make web pages interactive. Where HTML and CSS are
languages that give structure and style to web pages.
High-Level Approach:
Creating the website's User Interface (UI) using HTML, CSS and enhancing it further
using Bootstrap; without actually implementing any of the app's core features.
Implementation of animations, effects and core functionalities (sorting algorithms) using
JavaScript.
This website is hosted on Netlify. Netlify is a web developer platform that multiplies
productivity. By unifying the elements of the modern decoupled web, from local
development to advanced edge logic, Netlify enables a 10x faster path to much more
performant, secure, and scalable websites and apps.
This project is available on GitHub.
GitHub link- https://github.com/keshavkumar9431/sorting.visualizer
Hosted link- https://javascriptvisualizer.netlify.app/
Literature Survey:
Many coding (technical) platforms have worked on it in JavaScript and Python language,
like Geeksforgeeks, dev community, code projects. The code of this project is also
available on code project, devcommunity and on github in python language.
By knowing researchGate(website) three authors named Christopher Hundhausen, Sarah

A. Douglas and John Staskowho worked for research(analysis) on it. They all are
professors and researched in higher universities.
Even some of the youtube channels like codedrifter and Clément Mihailescu also work on
it. This is a very easy way to learn and understand the working of sorting algorithms by this
visualization project.
Useful websites describing the algorithms used:

● Bubble Sort (GeeksforGeeks)
● Selection Sort (GeeksforGeeks)
● Insertion Sort (GeeksforGeeks)
● Merge Sort (GeeksforGeeks)
● Quick Sort (GeeksforGeeks)
● Heap Sort (GeeksforGeeks)
Methodology/ Planning of work (should not exceed 1 page)

I selected and built a Sorting visualizer to visualize and understand the sorting algorithms.
As of now, I built 6 sorting algorithms as -
1. Bubble Sort
2. Selection Sort
3. Insertion Sort
4. Merge Sort
5. Quick Sort
6. Heap Sort
The main reason I chose this project is to become more familiar with the javascript
concepts, and CSS styling. So, I didn't use any frameworks other than HTML, CSS, and JS.
On successful completion with this project,
Now I'm familiar with the JS concepts, can confidently solve coding problems, and write
stylings in CSS.
This project is built using HTML, CSS, and JS. This project sorting visualizer is a very
simple UI and it allows the users to select the sort algorithm, select the array size, and
speed of the visualization.
There are mainly 10 files used in this project:
1. bubble_sort.js
2. heap_sort.js
3. insertion_sort.js
4. main.js
5. merge_sort.js
6. quick_sort.js
7. selection_sort.js
8. visualizations.js
9. index.html
10. style.css
Facilities required for proposed work
Minimum Software/Hardware Configurations:

● Microsoft Windows Vista SP1/Windows 7 Professional:
● Processor: 800MHz Intel Pentium III or equivalent
● Memory: 512 MB
● Disk space: 750 MB of free disk space
● Ubuntu 9.10:
● Processor: 800MHz Intel Pentium III or equivalent
● Memory: 512 MB
● Macintosh OS X 10.7 Intel:
● Processor: Dual-Core Intel
● Memory: 2 GB
Recommended Software/Hardware Configurations:

● Microsoft Windows 7 Professional/Windows 8/Windows 8.1:
● Processor: Intel Core i5 or equivalent
● Memory: 2 GB (32-bit), 4 GB (64-bit)
● Disk space: 1.5 GB of free disk space
● Ubuntu 15.04:
● Processor: Intel Core i5 or equivalent
● Memory: 2 GB (32-bit), 4 GB (64-bit)
● OS X 10.10 Intel:
● Processor: Dual-Core Intel
● Memory: 4 GB
References
Inspiration taken from Clément Mihailescu
(https://www.youtube.com/watch?v=pFXYym4Wbkc)
Useful links describing the algorithms used:
- Bubble Sort
(https://www.geeksforgeeks.org/sorting-algorithms-visualization-bubble-sort/)
- Selection Sort
(https://www.geeksforgeeks.org/selection-sort-visualizer-in-javascript/)
- Insertion Sort
(https://www.geeksforgeeks.org/insertion-sort-visualization-using-javascript/)
- Merge Sort
(https://www.geeksforgeeks.org/sorting-algorithm-visualization-merge-sort/)
- Quick Sort
(https://www.geeksforgeeks.org/quick-sortlomuto-partition-visualization-using-javascript/)
- Heap Sort
(https://www.geeksforgeeks.org/heap-sort-visualization-using-javascript/)
SORTING VISUALIZER
PROJECT SYNOPSIS
OF MAJOR PROJECT
BACHELOR OF TECHNOLOGY
Branch CSE
SUBMITTED BY GUIDED BY
KESHAV KUMAR Mrs. Jaspreet Kaur
2002488
DEPARTMENT OF COMPUTER SCIENCE AND

ENGINEERING
Chandigarh Engineering College –Landran
Mohali, Punjab - 140307

Keshav Synopsis Format

Uploaded by

Copyright:

Available Formats

Keshav Synopsis Format

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Keshav Synopsis Format

Uploaded by

Copyright:

Available Formats

CEC Landran

Department of Computer Science &

Brendan Eich 1961 is an American computer programmer and technology executive. He

By knowing researchGate(website) three authors named Christopher Hundhausen, Sarah

Useful websites describing the algorithms used:

Methodology/ Planning of work (should not exceed 1 page)

Facilities required for proposed work

Minimum Software/Hardware Configurations:

Recommended Software/Hardware Configurations:

Useful links describing the algorithms used:

DEPARTMENT OF COMPUTER SCIENCE AND

You might also like