-
Notifications
You must be signed in to change notification settings - Fork 0
/
bubble.html
76 lines (73 loc) · 3.63 KB
/
bubble.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Algorithm Visualizer</title>
<link rel="stylesheet" href="Project.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
<strong><a class="navbar-brand" href="./index.html">
Algo Viz
</a></strong>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="./bubble.html">Bubble</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./selection.html">Selection</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./insertion.html">Insertion</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./merge.html">Merge</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./quick.html">Quick</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./heap.html">Heap</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div id="section-bubblesort" class="col-12">
<div class="page">
<h1 class="heading">Bubble Sort</h1>
<h2 class="home-subheading"><strong>Time Complexity-</strong> Average case: O(n<sup>2</sup>) | | | | Worst-case: O(n<sup>2</sup>) | | | | Best case: O(n) </h2>
<div class="sort-container">
<div class="button-container m-3">
<button class="btn btn-primary" onclick="refresh()">Generate New Array</button>
<script> function refresh(){location.reload();}</script>
<button class="startbtn btn btn-primary">Sort</button>
</div>
<div class="slider m-3 d-flex flex-row justify-content-center">
<div>
<strong><p>Array Size</p></strong>
<input type="range" min="5" max="30" step="1" value="10" class="slider" id="array-size">
</div>
<div>
<strong><p>Speed</p></strong>
<input type="range" min="100" max="2000" step="100" value="1000" class="slider" id="speed">
</div>
</div>
<div class="parentDiv"></div>
<script src="bubble.js"></script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>