/
sorting.html
44 lines (44 loc) · 2.04 KB
/
sorting.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorting Visualizer for the Web!</title>
</head>
<body>
<a href="http://chittle.codes" style="clear: left;">go back to main site</a>
<a href="https://github.com/bachittle/visual-sorting-online" style="clear: left;">fork me on github</a>
<h1>Sorting Visualizer for the Web!</h1>
<canvas style="float: left;border: 1px solid black;"></canvas>
<div class="menu">
<input type="number" id="numOfArr" placeholder="number of array elements">
<p>slider for speed of animation</p>
<input type="range" id="speed" placeholder="speed of each operation">
<select name="graphicOption" id="graphicOption">
<option value="barchart">barchart</option>
<option value="line">line</option>
<option value="circleline">circle</option>
<option value="colorline">colorline</option>
</select>
<select name="sort1" id="sort1">
<option value="mattSort">mattSort</option>
<option value="bogoSort">bogoSort</option>
<option value="bubbleSort">bubbleSort</option>
<option value="selectionSort">selectionSort</option>
<option value="insertionSort">insertionSort</option>
<option value="quickSort">quickSort</option>
</select>
<select name="sort2" id="sort2">
<option value="mattSort">mattSort</option>
<option value="bogoSort">bogoSort</option>
<option value="bubbleSort" selected>bubbleSort</option>
<option value="selectionSort">selectionSort</option>
<option value="insertionSort">insertionSort</option>
<option value="quickSort">quickSort</option>
</select>
<button id="shuffleArray" style="clear: both;">Shuffle Array!</button>
<button id="sortArray">Sort Array!</button>
</div>
<script type="module" src="sorting/canvas.js"></script>
</body>
</html>