algorithm_visualizer/sort.html at main · spee-dev/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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Algorithm Visualizer</title>
    <link rel="stylesheet" href="./css/common_style.css">
    <link rel="stylesheet" href="./css/sort_style.css">

</head>
<body>

    <header>
        <h1>
            Sorting Algorithm Visualizer
        </h1>
    </header>

    <div class="container">
        <div class="bars_container" id="bars_container"> </div>
        <div class="choice">
            <div class="buttons_container">
                <button>
                    <p><span style="font-size: 20px;">-</span>&nbsp; &nbsp; &nbsp;Range&nbsp; &nbsp; &nbsp;<span style="font-size: 20px;">+</span></p>
                    <input type="range" min="10" max="100" id="range" class="range" step="5" value="50">
                </button>
                <button>
                    <p><span style="font-size: 20px;">+</span>&nbsp; &nbsp; &nbsp;Speed&nbsp; &nbsp; &nbsp;<span style="font-size: 20px;">-</span></p>
                    <input type="range" min="2" max="500" id="speed" class="Speed" value="50">
                </button>
                <button id="randomize_array_btn">Generate Array</button>
                <select name="" class="sorting_algos" id="sorting_algos">
                    <option value="none" selected disabled hidden>Select Algo</option>
                    <option value="bubble">Bubble Sort</option>
                    <option value="insertion">Insertion Sort</option>
                    <option value="heap">Heap Sort</option>
                    <option value="merge">Merge Sort</option>
                    <option value="quick">Quick Sort</option>
                </select>
                <button id="sort_btn">Sort</button>
                <button id="home" class="button">Home</button>

            </div>
        </div>
    </div>

    <div class="container">

        <div class="contain1">
            <div class="box_container" id="box_container">
            </div>
        </div>

        <div class="contain2">
            <div class="user">
                <input type="text" class="userArray" id="arrayBox" placeholder="elements seperated by (,) max size 15">
                <button id="createArray">create</button>
            </div>

            <div class="choice">
                <div class="buttons_container">

                    <button>
                        <p><span style="font-size: 20px;">-</span>&nbsp; &nbsp; &nbsp;Array Size&nbsp; &nbsp; &nbsp;<span style="font-size: 20px;">+</span></p>
                        <input type="range" min="4" max="15" id="rangeBox" class="range" step="1" value="5">
                    </button>
                    <button>
                        <p><span style="font-size: 20px;">+</span>&nbsp; &nbsp; &nbsp;Speed&nbsp; &nbsp; &nbsp;<span style="font-size: 20px;">-</span></p>
                        <input type="range" min="100" max="2000" id="speedBox" class="Speed" value="2000">
                    </button>
                    <button id="randomize_array_btn_box">Generate Array</button>
                    <select name="" class="sorting_algos" id="sorting_algos_box">
                        <option value="none" selected disabled hidden>Select Algo</option>
                        <option value="bubbleBox">Bubble Sort</option>
                        <option value="insertionBox">Insertion Sort</option>
                        <option value="heapBox">Heap Sort</option>
                        <option value="mergeBox">Merge Sort</option>
                        <option value="quickBox">Quick Sort</option>
                    </select>
                    <button id="sort_btn_box">Sort</button>
                    <button id="home1" class="button">Home</button>

                </div>
            </div>
        </div>

    </div>

    <!-- <div class="container">

    </div> -->

    <footer>
        <p>
           Made with &#10084;&#65039; by Ankit &nbsp;
           <img src="img/git.png" /> &nbsp;
           <a href="https://github.com/ankit2022dsvv"
               rel="noopener noreferrer" target="_blank">ankit2022dsvv</a>
       </p>
   </footer>


    <script src="./js/sort_script.js"></script>
    <script src="./js/sort_script2.js"></script>
</body>
</html>