-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (63 loc) · 3.18 KB
/
index.html
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
<!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>Sorting Visualizer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="sorting.css">
</head>
<body>
<header id="main-header">
<h1><b>Sorting Visualizer</b></h1>
</header>
<nav class="navbar my-2">
<div class="container-fluid">
<button type="button" id="array" class="btn"><b>New Array</b> </button>
<input id="slider" type="range" min=5 max=105 step=1 value=30 ><span class="range-slider_value">0</span>
<div id="dot-wrapper">
<form class="dot-form" action="">
<h5 id="form-title">Speed:</h5>
<div id="dot-slider">
<input type="radio" name="dot-speed" id="1" value=1 required>
<label for="1" data-dot-speed="1"></label>
<input type="radio" name="dot-speed" id="2" value=10 required>
<label for="2" data-dot-speed="2"></label>
<input type="radio" name="dot-speed" id="3" value=100 required>
<label for="3" data-dot-speed="3"></label>
<input type="radio" name="dot-speed" id="4" value=500 required>
<label for="4" data-dot-speed="4"></label>
<input type="radio" name="dot-speed" id="5" value=800 required>
<label for="5" data-dot-speed="5"></label>
<div id="dot-input-label"></div>
</div>
</form>
</div>
<div class="algos gap-2 d-md-flex justify-content-md-end" >
<button type="button" id="bsort" class="btn "><b>Bubble Sort</b></button>
<button type="button" id="isort" class="btn "><b>Insertion Sort</b></button>
<button type="button" id="ssort" class="btn "><b>Selection Sort</b></button>
<button type="button" id="qsort" class="btn "><b>Quick Sort</b></button>
<button type="button" id="msort" class="btn "><b>Merge Sort</b></button>
</div>
</div>
</nav>
<section>
<div></div>
<div id="array_container"></div>
<div></div>
</section>
<footer>
Created with ❤️ By Manish Verma
</footer>
<script src="main.js"></script>
<script src="sorting.js"></script>
<script src="bubble.js"></script>
<script src="insertion.js"></script>
<script src="merge.js"></script>
<script src="quick.js"></script>
<script src="selection.js"></script>
</body>
</html>