Sorting-Visualizer/SortingVisualization.html at main · david-mclain/Sorting-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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" content="with=device-width, initial-scale=1.0"></meta>
	<title>David McLain - Sorting Visualizer</title>
	<link rel="stylesheet" href="sortingVisualization.css"></link>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body">
	<div class="main">
		<!--Nav bar containing buttons for user to decide which algorithm to visualize-->
		<nav>
			<a href="index.html"><img src="bin/logo_128x128.png"></img></a>
			<div class="sorting-options">
				<ul>
					<li><button onclick="generate()" id="generateButton"><span></span>Generate New Array</button></li>
					<li><button onclick="mergeSort()" id="mergeSortButton"><span></span>Merge Sort</button></li>
					<li><button onclick="threeWayQuick()" id="threeQuickButton"><span></span>3-Way Quicksort</button></li>
					<li><button onclick="heapSort()" id="heapSortButton"><span></span>Heap Sort</button></li>
			</div>
		</nav>
		<!--Where the bars to demonstrate animation will be-->
		<section class="bars-container"></section>
	</div>
</body>
<script src="SortingVisualizer.js"></script>
</html>