-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
298 lines (267 loc) · 10.2 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
<!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" content="ie=edge" />
<title>Practice</title>
<link rel="stylesheet" href="style.css" />
<script>
function handleParenthesesValidation(value) {
parseParentheses(value);
}
function handleGenerate(value) {
generateBinaryNumbers(value);
}
function handleInsertAtHead(value) {
linklistValue.value = '';
if(value.trim().length > 0) {
insertAtHead(value);
}
}
function handleInsertAtTail(value) {
linklistValue.value = '';
if(value.trim().length > 0) {
insertAtTail(value);
}
}
// function handleInsertAfter(value, newValue) {
// linklistValue.value = '';
// insertAfter(value, newValue);
// }
function handleReverseList() {
reverseList();
}
function handlePrintList() {
printList();
}
function handleInsertBTSNode(value) {
binaryNodeValue.value = '';
insertBTS(value);
}
function handleMinValue() {
console.log(minBTSValue());
}
function handleMaxValue() {
console.log(maxBTSValue());
}
function handleSearchRequest(value) {
binaryNodeValue.value = '';
console.log(searchBTS(value));
}
</script>
</head>
<body>
<section>
<div>
<span>Enter value to node in link list</span>
<input type="text" id="linklistValue" value="" />
<button onclick="handleInsertAtHead(linklistValue.value)">
Insert at Head
</button>
<button onclick="handleInsertAtTail(linklistValue.value)">
Insert at Tail
</button>
<!-- <button onclick="handleInsertAfter(linklistValue.value)">
Insert after
</button> -->
<button onclick="handleReverseList()">
Reverse List
</button>
<button onclick="handlePrintList()">
Print List
</button>
<!-- <button onclick="handleParenthesesValidation(parentheseformate.value)">
Delete Node
</button> -->
</div>
<div>
<span>Enter values to create Binary Tree and perform various operations [Assumption root node has value 100]</span>
<div>
<input type="text" id="binaryNodeValue" />
<button onclick="handleInsertBTSNode(binaryNodeValue.value)">
Insert
</button>
<button onclick="handleMinValue()">
Console Min value
</button>
<button onclick="handleMaxValue()">
Console Max value
</button>
<button onclick="handleSearchRequest(binaryNodeValue.value)">
Console Search Node
</button>
</div>
</div>
<div>
<span>This button will validate paranthese</span>
<input type="text" id="parentheseformate" value="[{()}]" />
<button onclick="handleParenthesesValidation(parentheseformate.value)">
Validate
</button>
</div>
<div>
<span>This button will Generate Binary numbers</span>
<input type="text" id="generateBinary" value="10" />
<button onclick="handleGenerate(generateBinary.value)">
Generate Binary
</button>
</div>
<h2>Pollyfills</h2>
<p><b>Output will be visible in console window</b></p>
<div>
<span
>This button will initiate CustomPromise which is sample
pollyfill</span
>
<button onclick="startCustomPromise()">Custom Promise</button>
</div>
<div>
<span
>This button will initiate Custom Binding which is sample
pollyfill</span
>
<button onclick="startCustomBinding()">Custom Binding</button>
</div>
<div>
<span
>This button will initiate Custom Reduce which is sample
pollyfill</span
>
<button onclick="startCustomReduce()">Custom Reduce</button>
</div>
<div>
<span
>This button will initiate Custom Map which is sample pollyfill</span
>
<button onclick="startCustomMap()">Custom Map</button>
</div>
<div>
<span
>This button will initiate Custom Filter which is sample
pollyfill</span
>
<button onclick="runCustomFilter()">Custom Filter</button>
</div>
<div>
<span
>This button will initiate Custom Find which is sample pollyfill</span
>
<button onclick="startFindPolyfill()">Custom Find</button>
</div>
<div>
<span>This button will initiate Debouncing</span>
<input type="text" onkeyup="debounceListener()" />
</div>
<div>
<span>This button will initiate Throttling</span>
<input type="text" onkeyup="debounceListener()" />
</div>
</section>
<section>
<h2>Sorting</h2>
<p>
<b>
<u> NOTE: </u>Default sort() in JavaScript uses
<u>Insertion sort</u> by V8 Engine of Chrome and <u>Merge sort</u> by
Mozilla Firefox and Safari.
</b>
</p>
<div>
<details>
<summary><b>Bubble Sort</b></summary>
<p>
Compare the first item with the second. If the first item is bigger
than the second item than you need to swap them so that the bigger
one stays in the second position and then compare second with third
item and so on. We keep doing it. until we hit the last element of
the array. In that way we bubble up the biggest item of the array to
the right most position of the array.
</p>
<button onclick="startBubbleSort(bubble.value)">Bubble Sort</button>
<input id="bubble" /> <br />(comma seperated value (optional) if not
given than it will take default array)
</details>
</div>
<div>
<details>
<summary><b>Merge Sort</b></summary>
<p>
It belongs to the divide and conquer, and comparison algorithm
categories. It breaks the main list into multiple sublists/chunks
until it’s no longer possible to separate the list more. Then all of
this sections that we’ve created should be merged in a sorted order.
</p>
<button onclick="startMergeSort(merge.value)">Merge Sort</button>
<input id="merge" /> <br />(comma seperated value (optional) if not
given than it will take default array)
</details>
</div>
<div>
<details>
<summary><b>Selection Sort</b></summary>
<p>
This is very simple. Go through the array, find the index of the
lowest element swap the lowest element with the first element. Hence
first element is the lowest element in the array.
</p>
<button onclick="startSelectionSort(selection.value)">
Selection Sort
</button>
<input id="selection" /> <br />(comma seperated value (optional) if
not given than it will take default array)
</details>
</div>
<div>
<details>
<summary><b>Insertion Sort</b></summary>
<p>
Insertion sort is a very simple comparison sort used for sorting an
array (or list). A comparison sort is any sorting algorithm that
compares the current value that you are trying to place with other
values within the same array/list that’s being sorted. It does this
by working with one item at a time, and iteratively places each item
into the right order in the array.
</p>
<button onclick="startInsertionSort(insertion.value)">
Insertion Sort
</button>
<input id="insertion" /> <br />(comma seperated value (optional) if
not given than it will take default array)
</details>
</div>
<div>
<details>
<summary><b>Quick Sort</b></summary>
<p>
It is good for sorting large data sets. Quick sort follows Divide
and Conquer algorithm. It is dividing elements in to smaller parts
based on some condition and performing the sort operations on those
divided smaller parts. Hence, it works well for large datasets. So,
here are the steps how Quick sort works in simple words.
</p>
<button onclick="startQuickSort(quick.value)">Quick Sort</button>
<input id="quick" /> <br />(comma seperated value (optional) if not
given than it will take default array)
</details>
</div>
</section>
<script src="./src/pollyfills/bind-pollyfill.js"></script>
<script src="src/pollyfills/promise-polyfill.js"></script>
<script src="src/pollyfills/reduce-pollyfill.js"></script>
<script src="src/pollyfills/map-pollyfill.js"></script>
<script src="src/pollyfills/filter-pollyfill.js"></script>
<script src="src/sorting/bubble-sort.js"></script>
<script src="src/sorting/merge-sort.js"></script>
<script src="src/sorting/selection-sort.js"></script>
<script src="src/sorting/insertion-sort.js"></script>
<script src="src/sorting/quick-sort.js"></script>
<script src="src/pollyfills/debouncing.js"></script>
<script src="src/pollyfills/find-polyfill.js"></script>
<script src="src/data-structure/stack.js"></script>
<script src="src/data-structure/queue.js"></script>
<script src="src/data-structure/linked-list.js"></script>
<script src="src/data-structure/binary-search-tree.js"></script>
</body>
</body>
</html>