-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
329 lines (298 loc) · 17 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/signInModal.css">
<title>Algorithm Visualizer</title>
</head>
<body>
<!-- The Modal for sign in/sign up -->
<!-- Modal taken from https://www.w3schools.com/howto/howto_css_modals.asp -->
<!-- Modal content design taken from https://bytewebster.com/frontendprojects/login-signup-form-javascript-css#downloadbtn -->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header"><span class="close">×</span></div>
<div class="modal-body">
<div class="wrapper">
<div class="title-text">
<div class="title login">Login Form</div>
<div class="title signup">Signup Form</div>
</div>
<div class="form-container">
<div class="slide-controls">
<input type="radio" name="slide" id="login" checked>
<input type="radio" name="slide" id="signup">
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Signup</label>
<div class="slider-tab"></div>
</div>
<div class="form-inner">
<form class="login">
<div class="field">
<input id="loginEmail" type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input id="loginPassword" type="password" placeholder="Password" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input id="loginButton" type="submit" value="Login">
</div>
<div class="signup-link">
<p>Want to store & access saved data?</p>
<a href="">Signup now</a>
</div>
</form>
<form class="signup">
<div class="field">
<input id="signupName" type="text" placeholder="Name" required>
</div>
<div class="field">
<input id="signupEmail" type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input id="signupPassword" type="password" placeholder="Password" required>
</div>
<div class="field">
<input id="signupConfirmPassword" type="password" placeholder="Confirm password" required>
<span id = "message" style="color:red"> </span>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input id="signupButton" type="submit" value="Signup">
</div>
</form>
</div>
</div>
</div>
<!-- <div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div> -->
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-eq-height">
<div class="col-sm-3" style="background-color: #e3f2fd;">
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">
<img src="imgs/index_image.png" width="100%" alt="">
</a>
<ul class="navbar-nav flex-column text-center" style="width: 100%">
<li class="nav-item nav-title">
Algorithms
</li>
<li class="nav-item dropdown" id="graphNav">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Graph</a>
<ul class="dropdown-menu dropdown-graph text-center">
<li><a class="dropdown-item" href="html/bfs.html"> Breadth First Search</a></li>
<li><a class="dropdown-item" href="html/dfs.html"> Depth First Search </a></li>
<li><a class="dropdown-item" href="html/Dijkstra's.html"> Dijkstra's algorithm </a></li>
<li><a class="dropdown-item" href="html/astar.html"> A* </a></li>
<li><a class="dropdown-item" href="html/MinimumSpanningTree.html"> Minimum Spanning Tree </a></li>
</ul>
</li>
<li class="nav-item dropdown" id="sortingNav">
<a class="nav-link" href="#">Sorting</a>
<ul class="dropdown-menu dropdown-sorting text-center">
<li><a class="dropdown-item" href="html/sort.html"> Sorting </a></li>
</ul>
</li>
<li class="nav-item dropdown" id="treeNav">
<a class="nav-link" href="#">Tree</a>
<ul class="dropdown-menu dropdown-tree text-center">
<li><a class="dropdown-item" href="html/heap.html"> Max/Min Heap </a></li>
</ul>
</li>
<li class="nav-item nav-title">
External Resources
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://www.geeksforgeeks.org/graph-data-structure-and-algorithms/">Graph algorithms</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://www.geeksforgeeks.org/sorting-algorithms/">Sorting algorithms</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://www.geeksforgeeks.org/introduction-to-tree-data-structure-and-algorithm-tutorials/">Tree algorithms</a>
</li>
<li class="nav-item">
Last modified on Apr 8, 2023
</li>
</ul>
</nav>
</div>
<div class="col-sm-9">
<div class="divider">
Algorithm Visualizer - ECE651
<span class="float-right" style="margin-right: 5px;">
<!-- Trigger/Open The Modal -->
<!-- <button type="button" class="btn btn-info btn-sm" id="signInSignUp">Sign In/Sign Up </button> -->
<a href="#myModal" style="color:white" id="signInSignUp">Sign In/Sign Up </a>
<a href="#myModal" style="color:white" id="signOut"></a>
</span>
</div>
<div>
<h2 class="algorithm-name">Breadth First Search</h2>
<p>Breadth-first search (BFS) is a method for exploring a tree or graph. In a BFS, you first explore
all the nodes one step away, then all the nodes two steps away, etc.
Breadth-first search is like throwing a stone in the center of a pond. The nodes you explore
"ripple out" from the starting point.</p>
<!-- <img src="imgs/Breadth-first-search2.png" alt="">
<img src="imgs/Sorted_binary_tree_breadth-first_traversal.svg.png" alt=""> -->
<p class="source">Source：<a href="https://www.interviewcake.com/concept/java/bfs">Breadth
First
Search</a> </p>
</div>
<div>
<h2 class="algorithm-name">Depth First Search</h2>
<p>Depth-first search (DFS) is a method for exploring a tree or graph. In a DFS, you go as deep as
possible down one path before backing up and trying a different one.
Depth-first search is like walking through a corn maze. You explore one path, hit a dead end,
and go back and try a different one.</p>
<img src="imgs/Figure2-1024x343.png" alt="">
<figcaption style="padding-left: 460px;">pic. 1</figcaption>
<p class="source">Source：<a href="https://www.interviewcake.com/concept/java/dfs">Depth First
Search,</a><a href="https://pharmacelera.com/blog/science/artificial-intelligence-tree-search-algorithms/?utm_source=rss&utm_medium=rss&utm_campaign=artificial-intelligence-tree-search-algorithms"> Artificial Intelligence: tree search algorithms</a>
</p>
</div>
<div>
<h2 class="algorithm-name">Dijkstra’s Algorithm</h2>
<p>Dijkstra's algorithm finds the shortest path from one node to all other nodes in a weighted
graph.
Say we had the following graph, which represents the travel cost between different cities in the
southeast US (see the left pic).Dijkstra's algorithm lets us find the cheapest route from one
city to all other
cities (see the right pic).</p>
<div class="image-container">
<img src="imgs/dijkstras_algorithm__travel_graph.png" alt="">
<img src="imgs/dijkstras_algorithm__travel_graph_with_the_cheapest_route.png" alt="">
<figcaption style="padding-left: 360px;">pic. 2</figcaption>
</div>
<p class="source">Source：<a
href="https://www.interviewcake.com/concept/java/dijkstras-algorithm">Dijkstra's Algorithm
</a> </p>
</div>
<div>
<h2 class="algorithm-name">A*</h2>
<p>A* (pronounced "A-star") is a graph traversal and path search algorithm, which is used in many
fields of computer science due to its completeness, optimality, and optimal efficiency. One
major practical drawback is its O(b^d) space complexity, as it stores all generated nodes in
memory. Thus, in practical travel-routing systems, it is generally outperformed by algorithms
that can pre-process the graph to attain better performance, as well as memory-bounded
approaches; however, A* is still the best solution in many cases.</p>
<p class="source">Source：<a href="https://en.wikipedia.org/wiki/A*_search_algorithm">A* Search</a>
</p>
</div>
<div>
<h2 class="algorithm-name">Insertion Sort</h2>
<p>Insertion sort works by inserting elements from an unsorted list into a sorted subsection of the
list, one item at a time.</p>
<div class="image-container">
<img src="imgs/insertionsort.png" alt="">
<figcaption style="padding-left: 330px;">pic. 3</figcaption>
</div>
<p class="source">Source：<a
href="https://www.interviewcake.com/concept/python/insertion-sort">Insertion Sort,</a>
<a href="https://iq.opengenus.org/insertion-sort-analysis/"> Time complexity of Insertion Sort</a>
</p>
</div>
<div>
<h2 class="algorithm-name">Quick Sort</h2>
<p>Quicksort works by dividing the input into two smaller lists: one with small items and the other
with large items. Then, it recursively sorts both the smaller lists.</p>
<div class="image-container" id="quicksort-container">
<img src="imgs/quicksort.png" alt="">
<figcaption style="padding-left: 315px;">pic. 4</figcaption>
</div>
<p class="source">Source：<a href="https://www.interviewcake.com/concept/python/quicksort?">Quick
Sort,</a>
<a href="https://favtutor.com/blogs/quick-sort-cpp"> Quick Sort in C++</a>
</p>
</h2>
</div>
<div>
<h2 class="algorithm-name">Merge Sort</h2>
<p>Merge sort is based on the divide-and-conquer strategy. Merge sort continuously cuts down a list into multiple sublists until each has only one item, then merges those sublists into a sorted list.</p>
<div class="image-container" id="mergesort-container">
<img src="imgs/Merge Sort Explanation1.png" alt="">
<figcaption style="padding-left: 280px;">pic. 5</figcaption>
</div>
<p class="source">Source：<a href="https://www.simplilearn.com/tutorials/data-structure-tutorial/merge-sort-algorithm">Merge
Sort</a>
</p>
<h2 class="algorithm-name">Sort
</h2>
</div>
</div>
</div>
</div>
<footer class="bg-custom py-0">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="text-dark">© 2023 AlgoVisualizer.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script>
$("#graphNav").hover(
function () {
$('.dropdown-graph').addClass('show');
$('.dropdown-sorting').collapse('hide');
$('.dropdown-tree').collapse('hide');
},
function () {
$('.dropdown-graph').collapse('hide');
}
);
$("#sortingNav").hover(
function () {
$('.dropdown-sorting').addClass('show');
$('.dropdown-graph').collapse('hide');
$('.dropdown-tree').collapse('hide');
},
function () {
$('.dropdown-sorting').collapse('hide');
}
);
$("#treeNav").hover(
function () {
$('.dropdown-tree').addClass('show');
$('.dropdown-graph').collapse('hide');
$('.dropdown-sorting').collapse('hide');
},
function () {
$('.dropdown-tree').collapse('hide');
}
);
</script>
<script type="module" src="./js/index.js"></script>
</body>
</html>