-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (84 loc) · 4.1 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
<head>
<title>Sorting Visualizer</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="modal.css">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<script src="main.js"></script>
<script src="algorithms/mergeSort.js"></script>
<script src="algorithms/bubbleSort.js"></script>
<script src="algorithms/insertionSort.js"></script>
<script src="algorithms/selectionSort.js"></script>
<script src="algorithms/optimizedSelectionSort.js"></script>
<script src="algorithms/heapSort.js"></script>
<script src="algorithms/hoareQuickSort.js"></script>
<script src="algorithms/lomutoQuickSort.js"></script>
<script src="animations.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<span onclick="closeModal()" class="close">×</span>
<h1>Sorting Algorithms</h1>
<p>I made this to show what is happening in each sorting algorithm, and to visualize them in action.</p>
<h3>Included:</h3>
<ul>
<li>Merge Sort</li>
<li>Heap Sort</li>
<li>Quick Sort</li>
<li>Bubble Sort</li>
<li>Insertion Sort</li>
<li>Selection Sort</li>
<li>Optimized Selection Sort</li>
</ul>
<h3>Notes</h3>
<p>
Optimized selection sort is not really a well known sorting algorithm. I noticed that the
common selection sort could also keep track of the highest index, therefore resulting
in a time complexity cut in half. Obviously, merge sort and quick sort are still better,
but it was fun to create my own algorithm.
</p>
<button onclick="closeModal()">Close</button>
<button onclick="noShowModal()">Don't show me again</button>
</div>
</div>
<div class="main">
<div class="topBar">
<button onclick="toggleSounds()" id="mute">🔈</button>
<button onclick="openModal()">Info</button>
<button onclick="resetArray()" id="reset">Randomize</button>
<button onclick="reversedArray()" id="reversedArray">Reversed Array</button>
<button onclick="doSort()" id="go">Go</button>
<select id="multiplier">
<option value="0.1">0.1x</option>
<option value="0.5">0.5x</option>
<option value="1" selected="selected">1x</option>
<option value="2">2x</option>
<option value="10">10x</option>
<option value="100">100x</option>
</select>
<select id="sorting-algorithm">
<option value="merge">Merge Sort</option>
<option value="heap">Heap Sort</option>
<option value="hoare-quick">Hoare Quick Sort</option>
<option value="lomuto-quick">Lomuto Quick Sort</option>
<option value="bubble">Bubble Sort</option>
<option value="insertion">Insertion Sort</option>
<option value="selection">Selection Sort</option>
<option value="optimized-selection">Optimized Selection Sort</option>
</select>
<input type="text" value = "150" onchange="resetArray()" placeholder="Bars" id="numofbars">
</div>
<div class= "array-container">
<br>
<div id="bars"></div>
<br>
</div>
</div>
</body>
<script>resetArray()</script>
<script src="modal.js"></script>
<script>modalOnOpen()</script>
<script src="sounds.js"></script>
</html>