SortingVisualizer/sorting.html at main · RashmiSahu2005/SortingVisualizer · 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
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Sorting Algorthims</title>
	<link rel="stylesheet" href="style.css">
</head>
<body class="sorting">
	<div class="sorting-container"></div>

	<div class="bottom-container-sorting">
		<div class="sorting-buttons-container">
			<div class="sort-alg-container">
				<button class="alg-buttons" onclick="linearSort()">Linear</button>
				<button class="alg-buttons" onclick="bubbleSort()">Bubble</button>
			</div>
			<div class="sort-alg-container">
				<button class="alg-buttons" onclick="selectionSort()">Selection</button>
				<button class="alg-buttons" onclick="insertionSort()">Insertion</button>
			</div>
			<div class="sort-alg-container">
				<button class="alg-buttons" onclick="mergeSort()">Merge</button>
				<button class="alg-buttons" onclick="quickSort()">Quick</button>
			</div>
			<div class="sort-alg-container">
				<button class="alg-buttons" onclick="heapSort()">Heap</button>
				<button class="alg-buttons" onclick="bogoSort()">Bogo</button>
			</div>
		</div>
		<div class="text-container">
			<p id="comparison-count">Comparisons: 0</p>
			<p id="swap-count">Swaps: 0</p>
			<p id="time-complexity">Time complexity:</p>
		</div>
		<div class="sorting-settings-container">
			<button class="alg-buttons" onclick="randomize()">Randomize</button>
			<div class="sliderstuff">
				<label for="mySlider">Number of Bars</label>
				<input class="range-style" type="range" min="10" max="175" step="1" value="90" id="mySlider" oninput="updateRandom()">
			</div>
			<div class="sliderstuff">
				<label for="mySlider2">Speed</label>
				<input class="range-style" type="range" min="0.001" max="100" step="0.001" value="50" id="mySlider2" oninput="updateSpeed()">
			</div>
			</div>
		<div class="html-nav-container">
			<div class="checkboxstuff">
				<label for="audioToggle">Mute</label>
				<input class="audio" type="checkbox" id="audioToggle">
			</div>
			<div class="sorting-button">
				<button class="alg-buttons">
					<a href="pathfinding.html" style="color: inherit; text-decoration: none;">Pathfinding Visualizer</a>
				</button>
				<button class="alg-buttons" id="source-code">
					<a href="/" target="_self" style="color: inherit; text-decoration: none;">Back</a>
				</button>
			</div>

		</div>

	</div>


	<script src="js/sorting.js"></script>

</body>
</html>