-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (132 loc) · 6.46 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Algorithm Visualizor</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<a id="sort" href="./Sorting/sorting_main.html">Sorting</a>
<a id="bst" href="./Binary_Tree/binary_tree_main.html">Binary Tree</a>
<a id="linkedlist" href="./Linked_List/linked_list_main.html">Linked List</a>
<a id="stack" href="./Stack/stack_main.html">Stack</a>
<a id="youtube" href="https://youtube.com/channel/UCS4BRK8LOp2eIhFOhRf4kRg"></a>
<a id="discord" href="https://discord.gg/RP4TE5nE"></a>
<a id="github" href="https://github.com/codingwith3dv"></a>
<nav class="heading">
<div class="name">
<p>Alg<font color="#cc13ff">Vizard</font>
</p>
</div>
</nav>
<div class="slideshow_container">
<div class="slide fade">
<div class="description">Algorithms<br>
From a simple word document to Google's search engine<br>
They are found everywhere<br>
Then what about visualising them<br>
This website will give you a basic understanding<br>
Of all the popular algorithms by visualization</div>
</div>
<div class="slide fade">
hshhshhwhehhdhvwjwiowplakas
jejjejdkhqkxgkgqhdoqhxoh1xo
</div>
<p class="prev" onclick="pushSlides(-1)">❮</p>
<p class="next" onclick="pushSlides(1)">❯</p>
</div>
<div class="page">
<h1 class="pagetitle">Sorting</h1>
<img class="pageimage" src="./img/sorting_img.svg" alt="" />
<h4 class="pagedesc">Various sorting techniques are used for
arranging data in either ascending or
descending order. In this section we visualize
these sorting algorithms - <br>
❯ Bubble Sort<br>
❯ Quick Sort<br>
❯ Merge Sort<br>
❯ Selection Sort<br><br>
These are the most commonly used sorting algorithms.
When we do a search on Google, the search engine
uses a complex sorting algorithm which is fast
and efficient. Then it sorts the websites and they are presented to us
<br><br>
The visualizer provides pseudocode for all the algorithms.
</h4>
<button class="pagebutton" onclick="gotoNextPage(`sort`)">Go to Sorting
</button>
</div>
<div class="page">
<h1 class="pagetitle">Binary Search Trees</h1>
<img class="pageimage" src="./img/bst_img.svg" alt="" />
<h4 class="pagedesc">
Binary Search Trees fall in the category of data structures.<br>
It is often called as BST. Like trees, BST also have a root. <br><br />
It is called root node. Using BST's root node we can access any other node or data in the tree.
All operations in BST are super fast<br><br>
The visualizer can do these algorithms with animation - <br />
❯ Insert a node<br>
❯ Delete a node and<br>
❯ Search a value<br >
❯ Traverse the tree<br><br>It also provides the pseudocode for the algorithm
</h4>
<button class="pagebutton" onclick="gotoNextPage(`bst`)">Go to BST
</button>
</div>
<div class="page">
<h1 class="pagetitle">Linked List</h1>
<img src="./img/linked_list_img.svg" class="pageimage" />
<h4 class="pagedesc">
Linked List is one of the the most used data structure. In array
is that in array memory is pre-determined. But with linked list the memory allocation is dynamic.<br /><br />
Linked List has a head node which points to the next node and so on. <br />
The visualizer can - <br>
❯ Insert a node<br>
❯ Delete a node <br />
❯ Search for a node and <br />
❯ Transverse the list <br /><br />
The visualizer also provides the pseudocode for the algorithm
</h4>
<button class="pagebutton" onclick="gotoNextPage('linkedlist')">Go to Linked List</button>
</div>
<div class="page">
<h1 class="pagetitle">Stack</h1>
<img src="./img/stack_img/stack_img.svg" class="pageimage" />
<h4 class="pagedesc">
Stack is known as a LIFO(Last In First Out) data structure.
That means the node that comes first will come first.
It is mostly used for solving mazes.<br /><br />
The Stack has a main node and it is called the top node. We only have access to the top node and its value. Adding a node changes the top to new node and same for deletion<br /><br />
The visualizer can - <br><br />
❯ Push a value (adding a value) <br />
❯ Pop a value (removing a value) <br />
❯ Peek (Get element at top node) all with animations <br /><br />
The visualizer also provides the pseudocode for the algorithm
</h4>
<button class="pagebutton" onclick="gotoNextPage('stack')">Go to Stack</button>
</div>
<div class="about" id="about">
<h4 class="aboutHeading">About</h4>
<div class="aboutContributersContainer">
<img class="aboutImage" src="./img/icons/logo.png" alt="" />
<div class="aboutDesc">
<div class="aboutContributerName">Coding with 3DV</div>
<p class="desc">
I am a 14 year old student who loves coding.
My hobby is to make cool multi-platform apps and websites.
I am the founder of the Youtube Channel - Coding with 3DV.
I love to learn more and more about coding.
My biggest ambition is to be a software engineer at Google.
</p>
</div>
<div class="aboutContributers">
<img class="aboutContributerSocialMedia" src="./img/icons/youtube.svg" onclick="gotoPage('youtube')"/>
<img class="aboutContributerSocialMedia" src="./img/icons/discord.svg" onclick="gotoPage('discord')"/>
<img class="aboutContributerSocialMedia" src="./img/icons/github.svg" onclick="gotoPage('github')"/>
</div>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>