Sorting_Algorithm_Visualizer/index.html at master · SankalpKadam/Sorting_Algorithm_Visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <script src="https://kit.fontawesome.com/3103697add.js" crossorigin="anonymous"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Chela+One&display=swap" rel="stylesheet">
        <title>Sorting Algorithm Visualizer</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <p class="myTitle">Sorting Algorithms Visualizer <a class="fa-brands fa-github" href="https://github.com/SankalpKadam/Sorting_Algorithm_Visualizer" style="color: #933dc9; outline: none; text-decoration: none;" target="_blank"></a></p>
        <header>
            <div class="alertDiv" id="DivAlert">
            </div>
            <div class="sortingAlgos dropdown" id="myDropDown">
                    <button class="btn btn-secondary dropdown-toggle" style="background-color: #933dc9; border-radius: 0;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Sorting Algorithm
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <div class="singleSortingAlgo" id="mergeSortButton">
                            <p>
                                Merge Sort
                            </p>
                        </div>
                        <div class="singleSortingAlgo" id="quickSortButton">
                            <p>
                                Quick Sort
                            </p>
                        </div>
                        <div class="singleSortingAlgo" id="insertionSortButton">
                            <p>
                                Insertion Sort
                            </p>
                        </div>
                        <div class="singleSortingAlgo" id="bubbleSortButton">
                            <p>
                                Bubble Sort
                            </p>
                        </div>
                        <div class="singleSortingAlgo" id="selectionSortButton">
                            <p>
                                Selection Sort
                            </p>
                        </div>
                    </div>
                    <div class="arraySize">
                        <p style="display: inline-block;" id="valueOfSize">Choose the size of array</p>
                        <input type="range" min="50" max="400" class="slider" id="arraySizeSlider" oninput="valueOfSize.innerHTML=`Size of the array is ${this.value}`">
                        <p style="display: inline-block;" id="valueOfSpeed">Choose the speed of visualization</p>
                        <input type="range" min="1" max="5" step="1" class="slider" id="visualizationSpeedSlider" oninput="valueOfSpeed.innerHTML=`Speed of visualization is ${this.value}`">
                        <h1 id="Randomize">Randomize</h1>
                        <h1 id="startSorting">Start</h1>
                    </div>
            </div>
        </header>
        <div class="arrayBars" id="arrayBar"></div>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="./Visualizer.js"></script>
        <script src="./Sorting_algos/bubble_sort.js"></script>
        <script src="./Sorting_algos/quick_sort.js"></script>
        <script src="./Sorting_algos/merge_sort.js"></script>
        <script src="./Sorting_algos/selection_sort.js"></script>
        <script src="./Sorting_algos/insertion_Sort.js"></script>
        <script src="./main.js"></script>
    </body>
</html>