Skip to content

Commit 390e443

Browse files
iamujj15iamujj15
committed
initial commit
0 parents  commit 390e443

File tree

8 files changed

+672
-0
lines changed

8 files changed

+672
-0
lines changed

‎bubble.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use strict";
2+
3+
const speedSlider = document.getElementById("speed");
4+
5+
const bubbleSort = async function () {
6+
tempDisable();
7+
const barsEl = document.getElementById("bars");
8+
const sz = Number(barsEl.childElementCount);
9+
10+
for (let i = 0; i < sz; ++i) {
11+
let barDefaultColour;
12+
for (let j = 0; j < sz - i - 1; ++j) {
13+
const bar1 = barsEl.children[j];
14+
const bar2 = barsEl.children[j + 1];
15+
barDefaultColour = bar1.style.backgroundColor;
16+
17+
const bar1Height = Number(bar1.style.height.slice(0, -1));
18+
const bar2Height = Number(bar2.style.height.slice(0, -1));
19+
20+
await waitforme(Number(speedSlider.value));
21+
22+
if (bar1Height > bar2Height) swap(bar1, bar2);
23+
24+
bar1.style.backgroundColor = "red";
25+
bar2.style.backgroundColor = "red";
26+
27+
await waitforme(Number(speedSlider.value));
28+
29+
bar1.style.backgroundColor = barDefaultColour;
30+
bar2.style.backgroundColor = barDefaultColour;
31+
}
32+
barsEl.children[sz - i - 1].style.backgroundColor = "green";
33+
}
34+
document.getElementById("new-array").classList.remove("disabled");
35+
document.getElementById("size").classList.remove("disabled");
36+
};
37+
38+
const btnBubbleSort = document.getElementById("bubble");
39+
btnBubbleSort.addEventListener("click", bubbleSort);

‎index.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
8+
/>
9+
<link
10+
rel="stylesheet"
11+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
12+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
13+
crossorigin="anonymous"
14+
/>
15+
<link rel="stylesheet" href="styles.css" />
16+
<title>Sorting Visualizer</title>
17+
</head>
18+
<body>
19+
<header>
20+
<p class="h1 hd"><strong>Sorting Visualizer</strong></p>
21+
</header>
22+
<div class="btns">
23+
<div class="left-btn">
24+
<button class="btn btn-clr" id="new-array" type="button">
25+
New Array
26+
</button>
27+
</div>
28+
<div class="slider-container">
29+
<input
30+
type="range"
31+
min="10"
32+
max="200"
33+
value="20"
34+
step="10"
35+
name="size"
36+
class="slider"
37+
id="size"
38+
/>
39+
<label for="size" class="lbl">Size</label>
40+
</div>
41+
<div class="slider-container">
42+
<input
43+
type="range"
44+
min="10"
45+
max="410"
46+
value="60"
47+
step="50"
48+
name="speed"
49+
class="slider"
50+
id="speed"
51+
/>
52+
<label for="speed" class="lbl">Speed</label>
53+
</div>
54+
<div class="right-btn">
55+
<button class="btn reload" id="reload">Reload</button>
56+
<button class="btn btn-clr" id="bubble" type="button">
57+
Bubble Sort
58+
</button>
59+
<button class="btn btn-clr" id="selection" type="button">
60+
Selection Sort
61+
</button>
62+
<button class="btn btn-clr" id="insertion" type="button">
63+
Insertion Sort
64+
</button>
65+
<button class="btn btn-clr" id="merge" type="button">
66+
Merge Sort
67+
</button>
68+
<button class="btn btn-clr" id="quick" type="button">
69+
Quick Sort
70+
</button>
71+
</div>
72+
</div>
73+
<div id="bars">
74+
<!-- Bars -->
75+
</div>
76+
<!-- Will add it in future
77+
<footer>
78+
<small>🐿️ Ujjwal - 2023</small>
79+
</footer>
80+
-->
81+
<script src="sorting.js"></script>
82+
<script src="bubble.js"></script>
83+
<script src="selection.js"></script>
84+
<script src="insertion.js"></script>
85+
<script src="merge.js"></script>
86+
<script src="quick.js"></script>
87+
<script
88+
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
89+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
90+
crossorigin="anonymous"
91+
></script>
92+
<script
93+
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
94+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
95+
crossorigin="anonymous"
96+
></script>
97+
<script
98+
src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
99+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
100+
crossorigin="anonymous"
101+
></script>
102+
</body>
103+
</html>

‎insertion.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use strict";
2+
3+
const insertionSort = async function () {
4+
tempDisable();
5+
const barsEl = document.getElementById("bars");
6+
const sz = Number(barsEl.childElementCount);
7+
8+
barsEl.children[0].style.backgroundColor = "green";
9+
let i, j;
10+
for (let i = 1; i < sz; ++i) {
11+
let barDefaultColor;
12+
barsEl.children[i].style.borderColor = "#FF2171";
13+
let j;
14+
for (j = i - 1; j >= 0; --j) {
15+
const barCrr = barsEl.children[j];
16+
const barNx = barsEl.children[j + 1];
17+
barDefaultColor = barCrr.style.backgroundColor;
18+
19+
const barCrrHeight = Number(barCrr.style.height.slice(0, -1));
20+
const barNxHeight = Number(barNx.style.height.slice(0, -1));
21+
22+
await waitforme(Number(speedSlider.value));
23+
24+
if (barCrrHeight <= barNxHeight) break;
25+
26+
barCrr.style.backgroundColor = "red";
27+
barNx.style.backgroundColor = "red";
28+
swap(barCrr, barNx);
29+
30+
await waitforme(Number(speedSlider.value));
31+
32+
barCrr.style.backgroundColor = barDefaultColor;
33+
barNx.style.backgroundColor = barDefaultColor;
34+
}
35+
barsEl.children[j + 1].style.backgroundColor = "green";
36+
barsEl.children[i].style.removeProperty("border-color");
37+
}
38+
document.getElementById("new-array").classList.remove("disabled");
39+
document.getElementById("size").classList.remove("disabled");
40+
};
41+
42+
const btnInsertionSort = document.getElementById("insertion");
43+
btnInsertionSort.addEventListener("click", insertionSort);

‎merge.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
"use scrict";
2+
3+
const merge = async function (l, m, r) {
4+
const sz2 = Number(barsEl.childElementCount);
5+
for (let i = 0; i < sz2; ++i)
6+
if (i < l || i > r) barsEl.children[i].style.opacity = "0.5";
7+
8+
const n1 = Number(m - l + 1);
9+
const n2 = Number(r - m);
10+
11+
const L = [];
12+
const R = [];
13+
14+
for (let i = 0; i < n1; i++) L.push(bars[l + i]);
15+
for (let j = 0; j < n2; j++) R.push(bars[m + 1 + j]);
16+
17+
let i = 0,
18+
j = 0,
19+
k = l;
20+
21+
while (i < n1 && j < n2) {
22+
if (L[i] <= R[j]) {
23+
bars[k] = L[i];
24+
barsEl.children[k].style.height = `${L[i]}%`;
25+
barsEl.children[k].children[0].innerText = L[i];
26+
i++;
27+
} else {
28+
bars[k] = R[j];
29+
barsEl.children[k].style.height = `${R[j]}%`;
30+
barsEl.children[k].children[0].innerText = R[j];
31+
j++;
32+
}
33+
k++;
34+
await waitforme(Number(speedSlider.value));
35+
}
36+
37+
while (i < n1) {
38+
bars[k] = L[i];
39+
barsEl.children[k].style.height = `${L[i]}%`;
40+
barsEl.children[k].children[0].innerText = L[i];
41+
i++;
42+
k++;
43+
await waitforme(Number(speedSlider.value));
44+
}
45+
46+
while (j < n2) {
47+
bars[k] = R[j];
48+
barsEl.children[k].style.height = `${R[j]}%`;
49+
barsEl.children[k].children[0].innerText = R[j];
50+
j++;
51+
k++;
52+
await waitforme(Number(speedSlider.value));
53+
}
54+
55+
for (let i = 0; i < sz2; ++i)
56+
if (i < l || i > r) barsEl.children[i].style.opacity = "1.0";
57+
};
58+
59+
const mergeS = async function (l, r) {
60+
if (l >= r) {
61+
return;
62+
}
63+
const m = l + Math.trunc((r - l) / 2);
64+
65+
await mergeS(l, m);
66+
await mergeS(m + 1, r);
67+
68+
await merge(l, m, r);
69+
};
70+
71+
const doGreen = async function (sz) {
72+
for (let i = 0; i < sz; ++i) {
73+
barsEl.children[i].style.backgroundColor = "green";
74+
await waitforme(20);
75+
}
76+
};
77+
78+
const mergeSort = async function () {
79+
tempDisable();
80+
const barsEl = document.getElementById("bars");
81+
const sz = Number(barsEl.childElementCount);
82+
83+
await mergeS(0, Number(sz - 1)).then(() => doGreen(sz));
84+
document.getElementById("new-array").classList.remove("disabled");
85+
document.getElementById("size").classList.remove("disabled");
86+
};
87+
88+
const btnMergeSort = document.getElementById("merge");
89+
btnMergeSort.addEventListener("click", mergeSort);

‎quick.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
"use scrict";
2+
3+
const swapQuick = async function (i, j) {
4+
const bar1 = barsEl.children[i];
5+
const bar2 = barsEl.children[j];
6+
7+
const bar1Height = Number(bar1.style.height.slice(0, -1));
8+
const bar2Height = Number(bar2.style.height.slice(0, -1));
9+
const temp = bar1Height;
10+
const t2 = bar1.children[0].innerText;
11+
bar1.style.height = `${bar2Height}%`;
12+
bar1.children[0].innerText = bar2.children[0].innerText;
13+
bar2.style.height = `${temp}%`;
14+
bar2.children[0].innerText = t2;
15+
16+
const temp2 = bars[i];
17+
bars[i] = bars[j];
18+
bars[j] = temp2;
19+
};
20+
21+
const partition = async function (l, r) {
22+
const sz2 = Number(barsEl.childElementCount);
23+
for (let j = 0; j < sz2; ++j)
24+
if (j < l || j > r) barsEl.children[j].style.opacity = "0.5";
25+
26+
let barDefaultColor = barsEl.children[0].style.backgroundColor;
27+
let barDefaultBorderColor = barsEl.children[0].style.borderColor;
28+
29+
const pvt = bars[r];
30+
let i = l - 1;
31+
barsEl.children[i + 1].children[0].style.backgroundColor = "#FF2171";
32+
barsEl.children[i + 1].style.borderColor = "blue";
33+
34+
for (let j = l; j < r; ++j) {
35+
if (bars[j] < pvt) {
36+
++i;
37+
38+
barsEl.children[i].style.backgroundColor = "red";
39+
barsEl.children[j].style.backgroundColor = "red";
40+
41+
swapQuick(i, j);
42+
43+
await waitforme(Number(speedSlider.value));
44+
45+
barsEl.children[i].children[0].style.backgroundColor =
46+
barDefaultColor;
47+
barsEl.children[i].style.borderColor = barDefaultBorderColor;
48+
barsEl.children[i].style.backgroundColor = barDefaultColor;
49+
barsEl.children[j].style.backgroundColor = barDefaultColor;
50+
51+
barsEl.children[i + 1].children[0].style.backgroundColor =
52+
"#FF2171";
53+
barsEl.children[i + 1].style.borderColor = "blue";
54+
}
55+
}
56+
barsEl.children[i + 1].style.backgroundColor = "red";
57+
barsEl.children[r].style.backgroundColor = "red";
58+
59+
swapQuick(i + 1, r);
60+
61+
await waitforme(Number(speedSlider.value));
62+
63+
barsEl.children[i + 1].children[0].style.backgroundColor = barDefaultColor;
64+
barsEl.children[i + 1].style.borderColor = barDefaultBorderColor;
65+
barsEl.children[i + 1].style.backgroundColor = barDefaultColor;
66+
barsEl.children[r].style.backgroundColor = barDefaultColor;
67+
68+
barsEl.children[i + 1].children[0].style.backgroundColor = barDefaultColor;
69+
barsEl.children[i + 1].style.borderColor = barDefaultBorderColor;
70+
71+
for (let j = 0; j < sz2; ++j)
72+
if (j < l || j > r) barsEl.children[j].style.opacity = "1.0";
73+
74+
return i + 1;
75+
};
76+
77+
const quickS = async function (l, r) {
78+
if (l >= r) return;
79+
80+
let pi = await partition(l, r);
81+
82+
await quickS(l, pi - 1);
83+
await quickS(pi + 1, r);
84+
};
85+
86+
const quickSort = async function () {
87+
tempDisable();
88+
const barsEl = document.getElementById("bars");
89+
const sz = Number(barsEl.childElementCount);
90+
91+
await quickS(0, Number(sz - 1)).then(() => doGreen(sz));
92+
document.getElementById("new-array").classList.remove("disabled");
93+
document.getElementById("size").classList.remove("disabled");
94+
};
95+
96+
const btnQuickSort = document.getElementById("quick");
97+
btnQuickSort.addEventListener("click", quickSort);

0 commit comments

Comments
 (0)