Restaurant Portfolio Website

A Project Report

Submitted by:
ASHA
(20010041009)

In partial fulfillment for the award of the degree

Of

Bachelor of Computer Application

In

COMPUTER SCIENCE AND ENGINEERING

GATEWAY INSTITUTE OF ENGINEERING & TECHNOLOGY,

SECTOR-11, SONEPAT (Affiliated to DCRUST, MURTHAL)

June, 2023
 DECLARATION

I hereby declare that the work presented in this project report entitled “Restaurant

Portfolio Website”, submitted in partial fulfilment of the requirement for the

award of the degree of Bachelor of Computer Application in Computer Science and
Engineering, submitted to Gateway Institute of Engineering and Technology,
DCRUST.

The work reported in this project report has not been submitted by us for the award of
any other degree or diploma.

Signature of the Student

Place:
Date:

Page 2 of 56
 CERTIFICATE

This is to certify that the Project entitled “Restaurant Portfolio Website” is the
bonafide work carried out by “ASHA”, 6th semester student of Bachelor of Computer
Application of Gateway Institute of Engineering & Technology (GIET), Sonepat
affiliated to DCRUST, Murthal during the academic year 2022-23, in partial
fulfillment of the requirements for the award of the degree. This Project has not
formed the basis for the award of any other degree, diploma, fellowship or any other
similar titles.

Signature of the Guide

Place:
Date:

Page 3 of 56
 ACKNOWLEDGEMENT

I express my sincere gratitude to my industry guide Mr. Anil Arora, for his/her able
guidance, continuous support and cooperation throughout my project, without which
the present work would not have been possible.

I would also like to give special thanks to my college project guide Mr. Anil Arora,
for the guidance he/she provided throughout the project. I shall be failing in my
works if I didn’t convey my thanks to my parents, who provided me all the thoughts
and insights.

A special word of thanks to all the respondents for sharing their valuable time with
me.

Page 4 of 56
 ABSTRACT

This project presents an overview of what a Restaurant Portfolio Website and how it
works. This Project is made in HTML, CSS and Javascript language with the help of
React.
In this project we have created a Restaurant Portfolio Website with implementing
HTML, CSS and Javascript.The Project “Restaurant Portfolio Website” is a web
application that lets us to know the information related to the dishes. This app will be
helpful to find our famous dishes and customers can directly contact with us by given
address and also we providing location on map. People can also give their feedback,
which item they like the most.

In this project, we have used the “Mr. Tandoor” API to show the list of the dishes. On
the home page, we have a menu section in which all the dishes came from the
backend i.e. Mr. Tandoor website through Mr. Tandoor API. It also contains top rated
dishes, unique and popular dishes for the customers.

This is the overall structure of project.

Page 5 of 56
 CONTENTS

Contents Page
No.

Chapter 1: Introduction…………………………………………………………09-
10

Chapter 2: About Algorithms…………………………………………………...11-

14
2.1 What is an algorithm…………………………………...…………………
11
2.2 Algorithm description………………………………...…………………..11
2.3 Types of algorithms………………………………………………………12
2.4 Complexity……………………………………………………………….13
2.4.1 Time complexity………………………………………………..13
2.4.2 Space
complexity……………………………………………….13
2.5 Sorting……………………………………………..……………………..13

Chapter 3: Sorting Algorithms ………..………………………………………..15-

26
3.1 Insertion Sort………………………………….
…………………………..15
3.2 Selection Sort………………………………….
………………………….17
3.3 Bubble Sort………………………………………...……………………..18
3.4 Quick Sort……………………………………………..
………………….19
3.5 Merge Sort……………………………………………….……………….21
3.6 Heap Sort…………………………………………………………………23

Chapter 4: Project Selection………………………………………………………..27

Page 6 of 56
Chapter 5: Feasibility Study……………………………………………………28-29
5.1 Technical
Feasibility……………………………………………………...28
5.2 Operational Feasibility……………………………………………………
28
5.3 Economical Feasibility…………………………………………………...29

Chapter 6: Project Monitoring System…………………………………………30-

31

Chapter 7: Software Requirement Specification………………………………32-

37
7.1 Software and Hardware
Requirement…………………………………….32
7.2 About HTML……………………………………………………………..33
7.3 About CSS………………………………………………………………..35
7.4 About
JavaScript………………………………………………………….36

Chapter 8: Design………………………………………………………………..38-
42

Chapter 9: Coding……………………………………………………………….43-45

Chapter 10: Testing……………………………………………………………...46-

48
10.1 Test case design…………………………………………………………47
10.2 Types of Testing…………………………………………………………
47

Chapter 11: System

Implementation……………………………………………….49
Page 7 of 56
Chapter 12: Documentation…………………………………………………….50-51
12.1 Operational
Document…………………………………………………..50
12.2 User
Manual……………………………………………………………..50

Chapter 13: Conclusion & Future

Scope…………………………………………..52

Chapter 14: Bibliography &

References…………………………………………...53

Page 8 of 56
 LIST OF FIGURES

6.1 Gantt Chart……………………………………………………………………….31

8.1 Algorithms visualizer when loaded………………………………………………39
8.2 New array generated……………………………………………………………...39
8.3 Updated complexities…………………………………………………………….40
8.4 Buttons unselected………………………………………………………………..40
8.5 Button selected…………………………………………………………………...40
8.6 Unsorted array……………………………………………………………………41
8.7 Arrays being compared…………………………………………………………..41
8.8 Sorted arrays……………………………………………………………………...41
11 MVC Diagram…………………………………………………………………….49
12 Sorting algorithm visualizer………………………………………………………51

Page 9 of 56
 CHAPTER - 1
INTRODUCTION

How do you work out a problem? The problem itself doesn’t need to be anything
overly complex, such as trying to replace a broken headlight in your car (although
nowadays, manufacturers are trying the patience of the community with their
increasingly abstract, space-age designs). The point is how to attack the problem. Do
you perform research, such as looking through your car’s manual for step-by-step
instructions, or is your first instinct to find someone who knows how to do it (whether
they are right next to you or in an online video)? My instinct is the latter, as I am a
visual learner and am adept to picking up concepts by seeing it done, rather than
reading about it. For example, when I was learning about sorting algorithms while
pursuing my Computer Science degree, I found that seeing the data move to its
correct position under the constraints of an algorithm was much easier to follow than
tracing the code by hand.

That led to the inspiration of this project, which describes a web-based tool I created
that animates how sorting algorithms modify and organize a set of data. If you need to
organize a list of people by their age in ascending order, for example, there are
multiple algorithms that can perform the task. I visualized four of the well-known
ones by representing numerical data as a histogram. Each number is illustrated as a
bar and has a different height based on its value. This would make it distinct from the
rest of the data as it is being shifted by the algorithm from its original, unordered
position to its final ordered position. The four algorithms are: Selection Sort, Bubble
Sort, Insertion Sort, and Merge Sort.

Keeping in line with the example of sorting people by age, let’s pretend that you have
printed the age of each person on a separate index card. One way to go about
organizing the cards is to first find the smallest age in the pile and bring it to the front.
Then, find the next smallest and place it behind the already ordered first age.
Eventually, you will end up with a pile of index cards that list the ages in ascending
order. This method is exactly how Selection Sort works, where to sort a set of data,
you select the smallest first, and then the next smallest and the next smallest. This

Page 10 of 56
algorithm is not very difficult to understand by word of mouth, but more abstract
sorting algorithms, such as how Quick Sort requires moving data around a pivot point,
may not be intuitive to read through.

We wanted the animation to be web-based to appeal to a wide spectrum of people

using different technology media. This way, the user would not need to worry about
installing special software or trying to organize configurations to use the tool. The
webpage is coded with HTML5 (Hypertext Markup Language, Version 5), JavaScript,
and CSS (Cascading Style Sheets). The physical elements of the webpage (buttons
and layout) are coded with very minimal HTML5 code. The next biggest contributor
would be the CSS code, which is responsible for the appearance and behaviour of the
buttons and text. Finally, the rest is devoted to JavaScript, responsible for the
histogram generation, movement, algorithm design, and sound. All the buttons refer
to designated parts of the JavaScript code to perform the task.

Page 11 of 56
 CHAPTER - 2
ABOUT ALGORITHMS

2.1 What is an algorithm?

We must ensure that the fundamentals are understood before continuing on to the
project's main section, which explains algorithms and the software. The definition of
the algorithm will be our first step.

What is an algorithm? What can we say about it? Simply put, an algorithm is a series
of steps or instructions that address a certain problem. Despite the fact that we have
not clarified what a problem or an instruction are, it may be a little vague.

Problem-solving is a type of task that we must do. Daily challenges include

determining the quickest route to and from work or home. However, not all of these
are algorithmic problems that might be solved. A good definition of an issue has
specific restrictions: the problem must be defined in terms of its inputs, and all inputs
must map to some outputs. An activity that is clear to its performer is referred to be a
step or instruction. It might be a PC in our situation. To solve a problem is to identify
a response to each input.

Thomas Cormen provides the following, more exact definition: "Informally, an

algorithm is any well-defined computational procedure that takes some value, or set
of values, as input and produces some value, or set of values, as output. An algorithm
is thus a sequence of computational steps that transform the input into the output”

2.2 Algorithm description

We might need to describe an algorithm in some way before we can use it or
comprehend it. The depiction of algorithms can be done in various ways.
 Natural language - Everyone can understand an algorithm when it is explained in
everyday words. It might be less accurate and take longer than other approaches,
though.

Page 12 of 56
 Programming language - This kind of description is unambiguous. Direct usage
of it is possible while developing computer programmes. It's possible for a
programming language to have numerous implementation specifics.
 Pseudocode looks similar to a programming language, but it is more general,
without deep details. Without regard to the precise language, it can be simply
rebuilt in most computer languages and is understandable to all programmers.
 Visual representation - There are numerous different ways to describe an
algorithm, such as through graphical representations like flowcharts.

2.3 Types of algorithms

Many alternative algorithms are available today. Various criteria are used to
categorise them into various groups. One algorithm frequently fits into multiple
groups. Here are a few of them:
• Recursive algorithms - algorithms that keep calling themselves up till the limiting
condition is met.
• Probabilistic algorithms - algorithms that make some random decisions.
• Parallel algorithms - algorithms that divide a task, for example, into threads or
between processors, etc.
• Sequential algorithms - unlike the parallel algorithms, every step of the task is
done in sequence.
• Divide and conquer - algorithms that divide a problem into smaller parts until
they become indivisible. Then merge solutions in some way.
• Greedy algorithms - these algorithms make the best choice in a given situation.
They never change their previous choice.
• Dynamic programming - algorithms that start solving a problem from the
simplest to more complicated parts. They use outcomes from previous solutions.
• Heuristic algorithms – algorithms which are used for finding solution among all
possible. However, there is no guarantee that a found one will be the best.

Page 13 of 56
2.4 Complexity
The quantity of data that an algorithm must process to be effective is measured by its
complexity. This function's domain and range are often represented in terms of natural
units.

2.4.1 Time complexity

Time complexity is defined in terms of how many times it takes to run a given
algorithm, based on the length of the input. Time complexity is not a measurement of
how much time it takes to execute a particular algorithm because such factors as
programming language, operating system, and processing power are also considered.

Time complexity is a type of computational complexity that describes the time

required to execute an algorithm. The time complexity of an algorithm is the amount
of time it takes for each statement to complete. As a result, it is highly dependent on
the size of the processed data. It also aids in defining an algorithm's effectiveness and
evaluating its performance.

Types Of Time Complexity:

 Best Time Complexity: Define the input for which algorithm takes less time or
minimum time. In the best case calculate the lower bound of an algorithm.
Example: In the linear search when search data is present at the first location of
large data then the best case occurs.
 Average Time Complexity: In the average case take all random inputs and
calculate the computation time for all inputs. And then we divide it by the total
number of inputs.
 Worst Time Complexity: Define the input for which algorithm takes a long time
or maximum time. In the worst calculate the upper bound of an algorithm.
Example: In the linear search when search data is present at the last location of
large data then the worst case occurs.

2.4.2 Space complexity

When an algorithm is run on a computer, it necessitates a certain amount of memory
space. The amount of memory used by a program to execute it is represented by its

Page 14 of 56
space complexity. Because a program requires memory to store input data and
temporal values while running, the space complexity is auxiliary and input space.

2.5 Sorting
As was already said that sorting is used for solving a wide range of problems. It
might be applied, for instance, as a component of several complex jobs, or for
additional searching. Sorting came up in our conversation. But what is sorting in
reality?
Simply put, sorting is the process of placing items in ascending or descending order
that can be compared. In this project we are only considering ascending order.
Ascending order means that items in a sequence are arranged from the smallest to the
largest item. On the contrary, descending order means positioning from the largest to
the smallest item.

Sorting algorithms are divided into two main types:

1. Algorithms of internal sorting - all the data to sort is stored in the internal
memory during the sorting process. It is used when the amount of data to sort
is known.
2. Algorithms of external sorting - all the data to sort is stored outside the
internal memory (e.g. on a hard disk). These algorithms usually combine
sorting in the internal memory, merging of sorted parts and saving them to the
external memory.

In the project we are talking only about the algorithms of internal sorting. Here are
main techniques which are usually used with the algorithms which use these
techniques and are included in the software:
1. Sorting by Insertion - single items from the sequence are put into the right
place of the sorted part. Here belongs Insertion Sort.
2. Sorting by Exchanging - swap elements of each pair that are out of order till
no more such pairs exist. Here we have Bubble Sort, Quick Sort.
3. Sorting by Selection - method that uses repeated selection. Selection Sort and
Heap Sort use this technique.

Page 15 of 56
4. Sorting by Merging - merging smaller parts with the right order. And Merge
Sort uses it.

Page 16 of 56
 CHAPTER - 3
SORTING ALGORITHMS

Algorithms that are part of the web application are described in this section.

3.1 Insertion Sort

Insertion Sort algorithm has a simple idea. Consider an array of items that must be
sorted. We separate the array into a sorted and an unsorted portion. The first element
is part of the sorted component at the beginning. Then, we take each item from the
unsorted half and arrange it in the appropriate spot among the sorted ones.

We compare the selected item from the unsorted part with each item in the sorted part
in the direction of right to left in order to insert the element into the proper location in
the sorted part. When there are no more elements to compare or when a smaller or
equal element is identified, the comparison process continues. When comparing
items, we move the item that is currently in the sorted part one position to the right if
it is greater. In the sorted part, we insert an item once the ideal position has been
discovered. Complexity of Insertion Sort is Θ(n2).

Consider an example: arr[]: {12, 11, 13, 5, 6}

   12       11       13       5       6   

First Pass:
 Initially, the first two elements of the array are compared in insertion sort.
   12       11       13       5       6   
 Here, 12 is greater than 11 hence they are not in the ascending order and 12 is not
at its correct position. Thus, swap 11 and 12.
 So, for now 11 is stored in a sorted sub-array.
   11       12       13       5       6   

Page 17 of 56
Second Pass:
 Now, move to the next two elements and compare them
   11       12       13       5       6   
 Here, 13 is greater than 12, thus both elements seems to be in ascending order,
hence, no swapping will occur. 12 also stored in a sorted sub-array along with 11

Third Pass:
 Now, two elements are present in the sorted sub-array which are 11 and 12
 Moving forward to the next two elements which are 13 and 5
   11       12       13       5       6   
 Both 5 and 13 are not present at their correct place so swap them
   11       12       5       13       6   
 After swapping, elements 12 and 5 are not sorted, thus swap again
   11       5       12       13       6   
 Here, again 11 and 5 are not sorted, hence swap again
   5       11       12       13       6   
 here, it is at its correct position

Fourth Pass:
 Now, the elements which are present in the sorted sub-array are 5, 11 and 12
 Moving to the next two elements 13 and 6
   5       11       12       13       6   
 Clearly, they are not sorted, thus perform swap between both
   5       11       12       6       13   
 Now, 6 is smaller than 12, hence, swap again
   5       11       6       12       13   
 Here, also swapping makes 11 and 6 unsorted hence, swap again
   5       6       11       12       13   
 Finally, the array is completely sorted.

Page 18 of 56
3.2 Selection Sort
Selection Sort algorithm is based on the repeated selection. Here we consider finding
minimal key from the unsorted part and swapping it with the first unsorted key. The
sorted component grows from the beginning of the sequence, just like in the Insertion
Sort.

Consider sorting an array of items. The entire array represents the unsorted portion at
the start of the sorting process. The initial element in the unsorted segment is thus
designated as the smallest element and is contrasted with the succeeding items. A
smaller object is set as the new smallest key when one is discovered. The smallest
item in the array is swapped with the first element of the unsorted part when it reaches
the end, making it the sorted part of the array. The array is sorted after repeating this
step. Complexity of this sorting algorithm is Θ(n2).

Lets consider the following array as an example: arr[] = {64, 25, 12, 22, 11}

First pass:
 For the first position in the sorted array, the whole array is traversed from index 0
to 4 sequentially. The first position where 64 is stored presently, after traversing
whole array it is clear that 11 is the lowest value.
   64       25       12       22       11   
 Thus, replace 64 with 11. After one iteration 11, which happens to be the least
value in the array, tends to appear in the first position of the sorted list.
   11       25       12       22       64   

Second Pass:
 For the second position, where 25 is present, again traverse the rest of the array in
a sequential manner.
   11       25       12       22       64   
 After traversing, we found that 12 is the second lowest value in the array and it
should appear at the second place in the array, thus swap these values.
   11       12       25       22       64   

Page 19 of 56
Third Pass:
 Now, for third place, where 25 is present again traverse the rest of the array and
find the third least value present in the array.
   11       12       25       22       64   
 While traversing, 22 came out to be the third least value and it should appear at
the third place in the array, thus swap 22 with element present at third position.
   11       12       22       25       64   

Fourth pass:
 Similarly, for fourth position traverse the rest of the array and find the fourth least
element in the array 
 As 25 is the 4th lowest value hence, it will place at the fourth position.
   11       12       22       25       64   

Fifth Pass:
 At last the largest value present in the array automatically get placed at the last
position in the array
 The resulted array is the sorted array.
   11       12       22       25    64  

3.3 Bubble Sort

The principle behind Bubble Sort is the idea of exchanging two nearby elements if
their order is incorrect. The larger elements tend to shift or "bubble" to the right since
the algorithm steps through every element from left to right. The algorithm is known
as Bubble Sort for this reason.

We will now go into the specifics. Let's start with an unsorted array. The procedure
goes through the entire array's initial unsorted portion iteratively. The range of
inspected objects also gets smaller with each iteration over the array, until there are
just two elements remaining. The array is regarded as sorted after these two members
are compared and maybe switched. Bubble Sort complexity is Θ(n2).

Lets take an example: arr[] = {5, 1, 4, 2, 8}

Page 20 of 56
First Pass:
 Bubble sort starts with very first two elements, comparing them to check which
one is greater.
o ( 5 1 4 2 8 ) –> ( 1 5 4 2 8 ), Here, algorithm compares the first two
elements, and swaps since 5 > 1.
o ( 1 5 4 2 8 ) –> ( 1 4 5 2 8 ), Swap since 5 > 4
o ( 1 4 5 2 8 ) –> ( 1 4 2 5 8 ), Swap since 5 > 2
o ( 1 4 2 5 8 ) –> ( 1 4 2 5 8 ), Now, since these elements are already in order
(8 > 5), algorithm does not swap them.

Second Pass:
 Now, during second iteration it should look like this:
o ( 1 4 2 5 8 ) –> ( 1 4 2 5 8 )
o ( 1 4 2 5 8 ) –> ( 1 2 4 5 8 ), Swap since 4 > 2
o ( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )
o ( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )

Third Pass:
 Now, the array is already sorted, but our algorithm does not know if it is
completed.
 The algorithm needs one whole pass without any swap to know it is sorted.
o ( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )
o ( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )
o ( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )
o ( 1 2 4 5 8 ) –> ( 1 2 4 5 8 )

3.4 Quick Sort

Quick Sort operates under the "divide and conquer" strategy. Up till it is not sorted, it
applies itself recursively to smaller portions of the array.

The algorithm selects one element from an unsorted array or a portion of it, often the
one on the left or the right of the array. The pivot item is then moved to the location it

Page 21 of 56
will eventually occupy in the array. In order to determine the pivot's location, the
array's other members are reorganised so that neither larger nor smaller elements are
on the right or left.

Until the array is not sorted, it is sufficient to apply Quick Sort to each portion of the
array that does not include the pivot.

Quick Sort is counted as an effective algorithm because its average complexity is Θ(n
log n). However, when array is maximally unbalanced it may show worst
performance. Worst case complexity is Θ(n2).

3.5 Merge Sort

Both Merge Sort and Quick Sort are examples of "divide and conquer" algorithms. Its
idea is straightforward: separate the data into two parts, sort the left portion first, then
sort the right part, and then "merge" the parts back together.

The recursive application of the method itself to the unsorted parts is how it operates.
It starts by choosing the middle item, which then becomes the last piece on the right
side of the left half. Then, both sections are sorted recursively. The algorithm
"merges" the last two sorted parts. The actual merging mechanism picks items
randomly from each of the two sorted sections, compares them, and sends the one
with the smallest value to the output before repeating the previous phase. Merge Sort
complexity is Θ(n log n).

To understand merge sort, consider an example where the array is

{12,31,25,8,32,17,40,42}.

According to the merge sort, first divide the given array into two equal halves. Merge
sort keeps dividing the list into equal parts until it cannot be further divided.

As there are eight elements in the given array, so it is divided into two arrays of size
4.
   12    31       25    8   

Page 22 of 56
    32       17       40       42   

Now, again divide these two arrays into halves. As they are of size 4, so divide them
into new arrays of size 2.

   12       31   

   25       8   

   32       17   

   40       42   

Now, again divide these arrays to get the atomic value that cannot be further divided.
   12   

   31   

   25   

   8   

   32   

   17   

   40   

   42   

Now, combine them in the same manner they were broken.

Page 23 of 56
In combining, first compare the element of each array and then combine them into
another array in sorted order.

So, first compare 12 and 31, both are in sorted positions. Then compare 25 and 8, and
in the list of two values, put 8 first followed by 25. Then compare 32 and 17, sort
them and put 17 first followed by 32. After that, compare 40 and 42, and place them
sequentially
   12       31   

   8    25   

   17       32   

   40       42   

In the next iteration of combining, now compare the arrays with two data values and
merge them into an array of found values in sorted order.
   8         25       31   
12   

  17        40       42   

32   

Now, there is a final merging of the arrays. After the final merging of above arrays,
the array will look like –
   8       12       17       25  31      32       40       42   

Now, the array is completely sorted

3.6 Heap Sort

Another intriguing sorting method is the selection-based algorithm known as Heap
Sort. By adopting a binary heap data structure, it has improved selection when
compared to the Selection Sort. A complete binary tree is a binary heap, which means

Page 24 of 56
that all tree levels—aside from the last one—must be fully filled with nodes.
Additionally, each node key in this data structure is greater than or equal to its child
keys, satisfying the heap criterion (this heap type is called max-heap).

Simple arrays can be used to implement a binary heap. Item at position zero is a root
node, items at position one and two are respectively left and right children of the
root. Finding the offspring of each node is simple using that representation (if they
exist).

Heap Sort itself works as follows:

1. Build max-heap
2. Swap root and the last node, reduce size of heap by one
3. Build max-heap without the nodes on reduced positions
4. Repeat steps 2 and 3 until the range of array is one

We must make sure that right and left children are included in max-heaps in order to
construct max-heap from the current node. In this manner, each node that has at least
one child is applied recursively in the first step of the max-heap construction process
from bottom to top. The last node assumes its ultimate location after each swap
between the root node and the node in last-considered position. This way it joins the
sorted part of an array.

To understand heap sort more clearly, let’s take an unsorted array and try to sort it
using heap sort.

Consider the array: arr[] = {4, 10, 3, 5, 1}.

Build Complete Binary Tree: Build a complete binary tree from the array.

4
/ \
10 3
/ \
5 1
Page 25 of 56
Transform into max heap: After that, the task is to construct a tree from that unsorted
array and try to convert it into max heap.

To transform a heap into a max-heap, the parent node should always be greater than
or equal to the child nodes
Here, in this example, as the parent node 4 is smaller than the child node 10, thus,
swap them to build a max-heap.

Transform it into a max heap image widget

Now, as seen, 4 as a parent is smaller than the child 5, thus swap both of these again
and the resulted heap and array should be like this:

10
/ \
5. 3
/ \
4. 1

Perform heap sort: Remove the maximum element in each step (i.e., move it to the
end position and remove that) and then consider the remaining elements and
transform it into a max heap.

Delete the root element (10) from the max heap. In order to delete this node, try to
swap it with the last node, i.e. (1). After removing the root element, again heapify it to
convert it into max heap.

Resulted heap and array should look like this:

(Remove the max and heapify)

1
/ \
Page 26 of 56
 5 3
/
4

(Heapify)

5
/ \
3 4
/
1

Repeat the above steps and it will look like the following:

(Remove current max(5) and heapify)

1
/ \
4 3

(Heapify)

4
/ \
1 3

Now remove the root (i.e. 3) again and perform heapify.

3
/
1

It is already in max heap form.

Page 27 of 56
Now when the root is removed once again it is sorted. and the sorted array will be like
arr[] = {1, 3, 4, 5, 10}.

Page 28 of 56
 CHAPTER - 4
PROJECT SELECTION

Introduction
The project is a GUI application-based project. It is a Visualizer for Sorting
Algorithms. The project aids in sorting algorithms like bubble sort and merge sort,
among others. It is a window-based programme or software having a graphical user
interface that operates independently of the internet. An array is created by the
application, and it is then sorted using the chosen sorting algorithms.

Objective
The project's primary goal is to build a web application that may be used as a
visualization tool. A single-page web application that illustrates the logic and flow of
various sorting algorithms using contemporary JavaScript technology. The user
interface (UI) will offer options to choose from among the sorting algorithms that
were built, a control button to create a new array, and sliders to adjust the array's
length and animation speed. Randomly generated unique values will be used to
populate the data array of the chosen size. The collection of data is shown as a vertical
bar with the height of each number. The UI will display the data arranged step-by-step
in ascending order according to their value or height after sorting has begun.

The application UI was able to visualize the sorting process using various colours or
denote the status of the elements in the array.

Page 29 of 56
 CHAPTER - 5
FEASIBILITY STUDY

Feasibility Study is the complete study of project in a technical, operational and

economical manner so that we can come up to a conclusion whether the software is
feasible in all ways or not. In case the project is not feasible, we try to make changes
or recommend changes that are to be undertaken so that the project is made feasible
and is useful for each customer in all ways.

Feasibility study mainly includes testing the technical, operational and economical
feasibility of a project or software.

5.1 Technical Feasibility

A software or project is said to be technically feasible if –
 The technology/tool used is easily available.
 The technology can be easily upgraded to a newer version.
 The tools used in the project and hence, the project can perform the required
actions.
 The technology and software assure security in all ways

Our project 'Sorting algorithm visualizer' has been made using HTML, CSS and
JavaScript all three of which are easily available and are upgradable. Also, the project
provides immediate answers and all the necessary actions that a user may require.

5.2 Operational Feasibility

A software/project is operationally feasible if –
 It supports any number of users.
 Any action performed by the user do not undermine the advantages of system.

“Sorting Algorithm Visualizer" is a kind of web application wherein user can

visualize the working of sorting algorithms and it does not alter the functioning or
benefit of the application in any way. Hence, the software is operationally feasible.

Page 30 of 56
5.3 Economical Feasibility
A software is said to be economically feasible if –
 The software does not involve any extra expenditures.
 It can be viewed as a good investment for the user/company.

“Sorting Algorithm Visualizer” is made in VS code which is easily available, and

optimized for building and debugging modern web and cloud applications, which
saves both time and money. Also, Visual Studio Code is free. Hence, it is
economically feasible.

Since software is technically, operationally and economically feasible, the software is

feasible, as a whole.

Page 31 of 56
 CHAPTER - 6
PROJECT MONITORING SYSTEM

We can monitor the progress of software project using Gantt chart:

Gantt charts are a project management tool that may be used for resource planning,
scheduling, and budgeting, among other things. A Gantt chart is a bar graph in which
each bar represents an activity. A timeline is used to draw the bars. Each bar's length
corresponds to the amount of time allotted for the task.

During the scheduling activity and also during implementation of the project, new
activities APR be identified that were not envisioned during the initial planning. The
developer must then go back and revise the breakdown structure and the schedules to
deal with these new activities.

We estimated the number of weeks required for each of the seven tasks as follows:

Analysis 1 Weeks
Design 3 Weeks
Coding 4 Weeks
Testing 3 Days
Implementation 1 Days
Documentation 1 Week
Maintenance 2 Days

Page 32 of 56
Detail schedule of activities are listed in the Gantt chart shown in figure below.

05- 13- 05- 03- 07- 09- 17-

SEPT SEPT OCT NOV NOV NOV NOV
Activities TO TO TO TO TO TO TO
12- 04- 02- 06- 08- 16- 19-
SEPT OCT NOV NOV NOV NOV NOV
PROBLEM
ANALYSIS

DESINING

CODING

TESTING
IMPLEMENTATION

DOCUMENTATION

MAINTAINANCE

Figure 6.1 Gantt Chart

Page 33 of 56
 CHAPTER - 7
SOFTWARE REQUIREMENT SPECIFICATION

Software Requirements Specifications (SRS) are created during the requirements

stage of the software development process (also called a requirements document).
When all requirements are elicited and analysed, this report is constructed, laying
the groundwork for software engineering efforts. SRS is a formal report that
serves as a software representation, allowing clients to assess if the report (SRS)
satisfies their needs. It also includes specific descriptions of the system
requirements as well as user needs for the system.

A software product, program, or collection of applications that carry out particular

tasks in a particular setting are specified by the SRS. Depending on who is writing
it, it can achieve a number of objectives. The client of a system could, in the
beginning, write the SRS. Additionally, a system developer might write the SRS.
The two approaches produce very distinct circumstances and establish completely
different goals for the paper. The needs and expectations of the consumers are
defined using the first case, SRS. The second example, SRS, is created with
several objectives in mind and acts as a contract between the client and the
developer.

7.1 Software and Hardware Requirement

 Software used:
o VS code
 Hardware used:
o Processor: Intel Pentium III or higher
o HDD: 80GB or more
o RAM: 1GB or more
o Keyboard, Mouse, Monitor
 Technology used:
o Html
o CSS

Page 34 of 56
o JavaScript

Page 35 of 56
7.2 About HTML
Hyper Text Markup Language, or HTML, is a programming language used for
creating web pages and web applications. Let's take a closer look at each word that
makes up the abbreviation "HTML" to comprehend it from top to bottom:

Hyper Text: "Text within Text" is the definition of hypertext. A text that contains
links is a hypertext. A hypertext link is one that when you click on it opens a new
webpage for you. Two or more web pages (HTML documents) can be linked together
via hypertext.

Markup language: A text document can be formatted and laid out using a markup
language, which is a computer language. Text is made more interactive and dynamic
using markup language. It can convert text into graphics, tables, links, and other
formats.

Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A
Web page can be of the static or dynamic type. With the help of HTML only, we can
create static web pages.

In the late 1980's, a physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing an
internet based hypertext system. Tim Berners-Lee is known as the father of HTML.
The first available description of HTML was a document called "HTML Tags"
proposed by Tim in late 1991. 

Since the time HTML was invented there are lots of HTML versions in market, the
brief introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.
HTML 2.0: This was the next version which was released in 1995, and it was
standard language version for website design. HTML 2.0 was able to support extra

Page 36 of 56
features such as form-based file upload, form elements such as text box, option
button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version
was capable of creating tables and providing support for extra options for form
elements. It can also support a web page with complex mathematical equations. It
became an official standard for any browser till January 1997. Today it is practically
supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very
stable version of HTML language. This version is the current official standard, and it
provides added support for stylesheets (CSS) and scripting ability for various
multimedia elements.

HTML5: HTML5 is the newest version of Hyper Text Markup language. The first
draft of this version was announced in January 2008. There are two major
organizations one is W3C (World Wide Web Consortium), and another one is
WHATWG (Web Hypertext Application Technology Working Group) which are
involved in the development of HTML 5 version, and still, it is under development.

Features of HTML:
1. It is a very easy and simple language. It can be easily understood and
modified.
2. It is very easy to make an effective presentation with HTML because it has a
lot of formatting tags.
3. It is a markup language, so it provides a flexible way to design web pages
along with the text.
4. It facilitates programmers to add a link on the web pages (by html anchor tag),
so it enhances the interest of browsing of the user.
5. It is platform-independent because it can be displayed on any platform like
Windows, Linux, and Macintosh, etc.
6. It facilitates the programmer to add Graphics, Videos, and Sound to the web
pages which makes it more attractive and interactive.

Page 37 of 56
7.3 About CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It
provides an additional feature to HTML. It is generally used with HTML to change
the style of web pages and user interfaces. It can also be used with any kind of XML
documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applications and user interfaces for many mobile applications.

What does CSS do

 You can add new looks to your old HTML documents.
 You can completely change the look of your website with only a few changes
in CSS code.

Applications of CSS
As mentioned before, CSS is one of the most widely used style language over the
web. I'm going to list few of them here:
 CSS saves time - You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and
apply it to as many Web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So, less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.

Page 38 of 56
  Global web standards - Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.

7.4 About JavaScript

JavaScript, often abbreviated as JS, is a programming language that is one of the core
technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of
websites use JavaScript on the client side for webpage behaviour, often incorporating
third-party libraries. All major web browsers have a dedicated JavaScript engine to
execute the code on users' devices.

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming

language with first-class functions. While it is most well-known as the scripting
language for Web pages, many non-browser environments also use it, such as
Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based,
multi-paradigm, single-threaded, dynamic language, supporting object-oriented,
imperative, and declarative (e.g. functional programming) styles.

JavaScript was initially created to “make web pages alive”. The programs in this
language are called scripts. They can be written right in a web page’s HTML and run
automatically as the page loads. Scripts are provided and executed as plain text. They
don’t need special preparation or compilation to run. In this aspect, JavaScript is very
different from another language called Java.

Today, JavaScript can execute not only in the browser, but also on the server, or
actually on any device that has a special program called the JavaScript engine. The
browser has an embedded engine sometimes called a “JavaScript virtual machine”.
Different engines have different “codenames”.

For example:
V8 – in Chrome, Opera and Edge.
SpiderMonkey – in Firefox. There are other codenames like “Chakra” for IE,
“JavaScriptCore”, “Nitro” and “SquirrelFish” for Safari, etc.

Page 39 of 56
When JavaScript was created, it initially had another name: “LiveScript”. But Java
was very popular at that time, so it was decided that positioning a new language as a
“younger brother” of Java would help. But as it evolved, JavaScript became a fully
independent language with its own specification called ECMAScript, and now it has
no relation to Java at all.

Modern JavaScript is a “safe” programming language. It does not provide low-level

access to memory or the CPU, because it was initially created for browsers which do
not require it. JavaScript’s capabilities greatly depend on the environment it’s running
in. For instance, Node.js supports functions that allow JavaScript to read/write
arbitrary files, perform network requests, etc. In-browser JavaScript can do everything
related to webpage manipulation, interaction with the user, and the webserver.

For instance, in-browser JavaScript is able to:

 Add new HTML to the page, change the existing content, modify styles.
 React to user actions, run on mouse clicks, pointer movements, key presses.
 Send requests over the network to remote servers, download and upload files
(so-called AJAX and COMET technologies).
 Get and set cookies, ask questions to the visitor, show messages.
 Remember the data on the client-side (“local storage”).

There are at least three great things about JavaScript:

 Full integration with HTML/CSS.
 Simple things are done simply.
 Supported by all major browsers and enabled by default.

JavaScript is the only browser technology that combines these three things. That’s
what makes JavaScript unique. That’s why it’s the most widespread tool for creating
browser interfaces. That said, JavaScript can be used to create servers, mobile
applications, etc.

Page 40 of 56
 CHAPTER - 8
DESIGN

The User-Interface
The overall design and structure of the user-interface components have not changed,
even though the underlying back-end code underwent a significant rewrite in the
middle of the development. The components of the interface are as follows:

The project contains basically these GUI components:

 Buttons
 Sliders
 Histograms

Buttons in the project are used for

 Generating new arrays
 Bubble Sort
 Selection Sort
 Insertion Sort
 Merge Sort
 Quick Sort
 Heap Sort

There are two sliders in the application, which are for the purpose of changing the
array size and altering the animation speed.
 The histograms represent the elements of the array.
 Beside this, there are some headings in the application which are representing
the space and time complexities.

Page 41 of 56
 Figure-8.1 Algorithms visualizer when loaded

The section in the black bars is the area that will be updated to show sorting
algorithms working. The uppermost left heading shows the name of the web
application which is “Sorting Algorithm Visualizer”. Below which are the buttons, the
selectable algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick
Sort, Heap Sort. The user can click any of these algorithms by clicking on the buttons
and see how this particular algorithm works. There is no algorithm selected by
default, so the user will have to select an algorithm by his own to start the animation.
On the right side are the two sliders and a button. The sliders are for changing the
array size and the animation speed. The sliders have been set on a specific range by
default. The user can change the animation speed and even the array size by his own.
The button is for generating a new random array.

Figure-8.2 New array generated

Page 42 of 56
Beside this the area on the left and right of the histograms are representing the space
and time complexities. By default, the space and time complexities are not shown for
any of the algorithm. But once the user select any algorithm to see the animation, the
space and time complexities are updated.

Figure-8.3 Updated complexities

We have tried to keep the interface as simple as possible and grouped buttons together
to overcome any difficulty or confusion in the usability. The algorithms buttons do
not have any border whereas the button for generating new array has a specific
border. All the algorithms button show a feedback by changing their colors when the
mouse hovers over them. An example is shown in the figure below.

Figure-8.4 Buttons unselected

Figure-8.5 Button selected

Also, the selected button changes its color and you cannot select any other button
once the animation has started. The bars too have different colors when they are
unsorted, are being compared and have been sorted. The bars are black in color when
they are unsorted.

Page 43 of 56
 Figure-8.6 Unsorted array

Figure-8.7 Arrays being compared

The bars which are being compared are being compared have a different color. The
bars which have been compared during the first pass are blue in color.

Figure-8.8 Sorted arrays

Page 44 of 56
This is the simple user interface of our application and how various components will
interact with the user.

This is how our web application will behave on clicking on different buttons and how
the histograms change colors depending on what is being performed.

The web application not only allows the user to select the algorithms but also it allows
them to generate new array along with changing the size of the array. The user can
even decrease and increase the animation speed of the visualization.

Page 45 of 56
 CHAPTER - 9
CODING

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorting Algorithms Visualizer</title>
<link rel="stylesheet" href="./css/style.css">
</head> <body> <header> <nav>
<div class="left_heading">
<p class="main_heading">Sorting Algorithms Visualizer</p>
<div class="used_algorithms">
<button>Bubble Sort</button>
<button>Selection Sort</button>
<button>Insertion Sort</button>
<button>Merge Sort</button>
<button>Quick Sort</button>
<button>Heap Sort</button>
</div>
</div>
<div class="details">
<p>Array Size</p>
<input id="array_size" type="range" min=4 max=100 step=1 value=30>
<p>Animation Speed</p>
<input id="animation_speed" type="range" min=1 max=10 step=1 value=2>
<button id="generate_array" > New Array</button>
</div>
</nav>
</header>

Page 46 of 56
<section>
<div id="Space_comp">
<h3>SPACE COMPLEXITY</h3>
<div class="Complexity_Containers" id="Space_Complexity_Types_Container">
<div class="Pair_Definitions">
<p class="Sub_Heading">Worst case:</p>
<p id="Space_Worst"></p>
</div>
</div>
</div>
<div id="array_container">
</div>
<div id="Time_comp">
<h3>TIME COMPLEXITIES</h3>
<div class="Complexity_Containers" id="Time_Complexity_Types_Container">
<div class="Pair_Definitions">
<p class="Sub_Heading">Worst case:</p>
<p id="Time_Worst"></p>
</div>
<div class="Pair_Definitions">
<p class="Sub_Heading">Average case:</p>
<p id="Time_Average"></p>
</div>
<div class="Pair_Definitions">
<p class="Sub_Heading">Best case:</p>
<p id="Time_Best"></p>
</div>
</div>
</div>
</section>
<script src="./scripts/main.js"></script>
<script src="./scripts/visualizations.js"></script>
<script src="./scripts/bubble_sort.js"></script>
<script src="./scripts/selection_sort.js"></script>
Page 47 of 56
<script src="./scripts/insertion_sort.js"></script>
<script src="./scripts/merge_sort.js"></script>
<script src="./scripts/quick_sort.js"></script>
<script src="./scripts/heap_sort.js"></script>
</body>
</html>

Page 48 of 56
 CHAPTER – 10
TESTING

Software testing is any action intended to assess a feature or capability of a

programme or system and determine whether it achieves the desired outcomes.
Although testing is a crucial but costly process. Testing may be done for quality
control, verification and validation, or dependability estimation.

Level of Testing:
Testing can be performed in following three levels.
i. Unit testing
ii. Integration testing
iii. System testing

UNIT TESTING
Each software element is independently tested, separate from the other system
elements. These tests, sometimes referred to as module testing, component testing, or
unit testing, confirm that the component operates as intended using the kinds of inputs
that may be predicted by looking at the component design.

INTEGRATED TESTING
The next step is making sure the interfaces between the components are defined and
handled correctly after all collecting components have through unit testing. The
practise of confirming that system components function together as specified in the
system and programme design specifications is known as integration testing.

SYSTEM TESTING
System testing concentrates on an integrated, whole system to assess compliance with
predetermined requirements. Tests are conducted on properties that are only visible
during system operation.

Page 49 of 56
10.1 Test case design
Test design for software and other engineering items can be just as difficult as the
product's initial design. But for the reasons we've already explored, software
engineers frequently treat testing as a last-minute consideration, creating test cases
that may "feel correct" but aren't necessarily complete. Keeping in mind the goals of
testing, we must create tests that are most likely to identify mistakes quickly and
efficiently.

For software, a wide range of test case design techniques have emerged. These
techniques give the developer a methodical strategy for testing. More importantly,
procedures give us a way to verify that tests are thorough and that we have the best
chance possible of finding software bugs.

One of two methods can be used to test any engineered product (and the majority of
other things):
1. Testing can be done to show each function is completely functional while also
looking for defects in each function if the defined function that a product has
been designed to execute is known.
2. Knowing a product's internal operations allows testing to be done to make sure
"all gears mesh," or that internal operations are carried out in accordance with
specifications and all internal components have received sufficient use.

10.2 Types of Testing

Black-box testing and white-box testing are the two test methodologies. Black-box
testing refers to tests carried out at the program interface when computer software is
involved. Black-box tests are used to show that software functions are operational,
that input is properly accepted and output is correctly created, and that the integrity of
external information (such as a database) is maintained—even though they are
intended to find flaws.

A black-box test pays minimal attention to the internal logical structure of the
software and instead investigates some essential component of a system.

Page 50 of 56
Close inspection of procedural detail is the cornerstone of white-box software testing.
By creating test cases that put particular sets of conditions and/or loops to the test, the
software's logical routes are examined. It is possible to check the "state of the
program" at various times to see if the asserted or expected status matches the actual
situation.

WHITE-BOX TESTING:
White-box testing, sometimes known as glass-box testing, is a test case design
technique that generates test cases using the procedural design's control structure. The
software engineer can generate test cases for the following using white-box testing
techniques:
 Ensure that a module's independent pathways have all been used at least once.
 Logical conclusions should be tested for both its true and false sides.
 Execute each loop within its operational constraints and at its boundaries.
 Internal data structures should be tested to confirm their accuracy.

BLACK-BOX TESTING:
Black-box testing, also known as behavioural testing, is concerned with the software's
functional requirements. To completely exercise all functional requirements for a
program, the software engineer can create sets of input conditions using black-box
testing. White-box methods cannot be substituted by black-box testing. As opposed to
white-box approaches, it is a complimentary strategy that is more likely to find a
different class of mistakes.

Black-box testing looks for faults in the following classifications:

 Improper or absent functions
 Interface Errors
 Issues involving data structures or access to external databases
 Errors in behaviour or performance
 Errors in initialization and termination

Black-box testing is frequently used in the later stages of testing, in contrast to white-
box testing, which is carried out early in the testing process. Black-box testing

Page 51 of 56
deliberately ignores control structure, so the information domain is the major
emphasis.

CHAPTER - 11
SYSTEM IMPLEMENTATION

Implementation is the process that actually yields the lowest-level system elements in
the system hierarchy (system breakdown structure). System components are created,
purchased, or recycled. Production includes the forming, removing, connecting, and
finishing processes used in hardware fabrication, the coding and testing processes
used in software realisation, or the processes used to build operating procedures for
the duties of operators. A manufacturing system that makes advantage of the
established technical and management procedures may be needed if deployment
entails a production process.

The implementation of this project is a combination of HTML5 (Hypertext Markup

Language 5), JavaScript, and CSS (Cascading Style Sheets). There is only HTML file.
The only addition to the main HTML file there is CSS folder which has the .css file
for the styling. Beside his there is a scripts folder too which contains all the .js files
which are adding logic to our application. As of now, the preferred browser is Google
Chrome. However, quick tests showed possible use in Mozilla Firefox and Safari.
The code now resembles a Model-View-Controller architecture. A simplified diagram
of the Model-View-Controller relationship is below in Figure below.

Figure-11 MVC Diagram

Page 52 of 56
 CHAPTER - 12
DOCUMENTATION

The documentation of the system is also one of the most important activities in the
system development life cycle. This ensures the continuity of the system. Generally
following two types of documentations are prepared for any system.
1. User or Operator Documentation
2. System Documentation

12.1 Operational Document

The system documentation contains the details of system design, programs, their
coding, system flow, data dictionary, process description, etc. This helps to
understand the system and permit changes to be made in the existing system to satisfy
new user needs.

12.2 User Manual 

The user documentation is a complete description of the system from the users point
of view detailing how to use or operate the system. It also includes the major error
messages likely to be encountered by the user.

User Manual for sorting algorithms visualizer:

The user can start the animation by selecting any of the sorting buttons available. As
soon as, the user clicks on any of the buttons representing the sorting algorithms the
animation is started and the complexities(space and time complexities) are updated.

The user can also generated a new array by clicking on the New array button. They
can also change the animation speed and can decrease or increase the speed and even
change the array size by changing the range over the sliders.

Page 53 of 56
Figure- 12 Sorting algorithm visualizer

Page 54 of 56
 CHAPTER - 13
CONCLUSION & FUTURE SCOPE

The primary objective of this project was to provide a teaching aid that visualises the
most popular sorting algorithms. The application lets you navigate each represented
algorithm by going ahead and backward. On a random or custom array, the user can
perform sorting. The application displays pseudocode and up-to-date data on some
variables during the demonstration run.

We made an effort to produce web application that could be utilised by professors,

tutors, and students alike and had an intuitive and user-friendly interface. Extension of
the applications by other methods may be the next enhancement.

Page 55 of 56
 CHAPTER - 14
BIBLIOGRAPHY & REFERENCES

1. History of Algorithm URL:

http://cs-exhibitions.uni-klu.ac.at/index.php?id=193
2. Analysis of different sorting techniques URL:
https://www.geeksforgeeks.org/analysis-of-different-sorting-techniques/
3. What is Big O notation explained URL:
https://www.freecodecamp.org/news/big-o-notation-why-it-matters-and-why-
it-doesnt-1674cfa8a23c/
4. HTML History URL:
https://www.w3schools.in/html-tutorial/history/
5. About JavaScript:
https://javascript.info/intro

Page 56 of 56