Sort-visualizer/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" contents="ie=edge">
	<title>Sorting Visualizer</title>
	<script src="../p5.js"></script>
	<script src="sketch.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h1>Sorting Visualizer</h1>
	</header>
	<main>
		<header>
			<div>
				<label for="algorithm-select">Algorithm:</label>
				<select id="algorithm-select" >
					<option value="bubble-sort">Bubble Sort</option>
					<option value="selection-sort">Selection Sort</option>
					<option value="insertion-sort">Insertion Sort</option>
					<option value="merge-sort">Merge Sort</option>
					<option value="quick-sort">Quick Sort</option>
					<option value="heap-sort">Heap Sort</option>
					<option value="radix-sort">Radix Sort</option>
				</select>
			</div>
			<div id="timer">
				<p>Time elapsed: <span id="timer-span">0</span> seconds</p>
			</div>
		</header>
	
    <section id="canvas-container">
      <!-- Canvas will be drawn here  -->
    </section>
    
    <div id="control-buttons">
      <button id="start-btn">Start</button>
      <button id="reset-btn">Reset</button>
    </div>
  </main>
	
</body>
</html>