Skip to content

Commit 96a2cce

Browse files
iamujj15iamujj15
committed
update ui
1 parent f79e3e7 commit 96a2cce

File tree

9 files changed

+269
-96
lines changed

9 files changed

+269
-96
lines changed

‎bubble.js

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
const speedSlider = document.getElementById("speed");
44

55
const bubbleSort = async function () {
6+
document.getElementById("bubble").classList.toggle("active-btn");
67
tempDisable();
78
const barsEl = document.getElementById("bars");
89
const sz = Number(barsEl.childElementCount);
@@ -33,6 +34,7 @@ const bubbleSort = async function () {
3334
}
3435
document.getElementById("new-array").classList.remove("disabled");
3536
document.getElementById("size").classList.remove("disabled");
37+
document.getElementById("bubble").classList.toggle("active-btn");
3638
};
3739

3840
const btnBubbleSort = document.getElementById("bubble");

‎content/fav.svg

+1
Loading

‎index.html

+154-69
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,164 @@
11
<!DOCTYPE html>
22
<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>
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 rel="shortcut icon" href="content/fav.svg" type="image/x-icon" />
10+
<link
11+
rel="stylesheet"
12+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
13+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
14+
crossorigin="anonymous"
15+
/>
16+
<link rel="stylesheet" href="styles.css" />
17+
<title>Sorting Visualizer</title>
18+
</head>
19+
<body>
20+
<div class="root">
1921
<header>
20-
<p class="h1 hd"><strong>Sorting Visualizer</strong></p>
22+
<p class="hd-txt"><strong>Sorting Visualizer</strong></p>
2123
</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>
24+
25+
<div class="main-cnt">
26+
<div class="menu">
27+
<div>
28+
<input
29+
type="range"
30+
min="10"
31+
max="200"
32+
value="20"
33+
step="10"
34+
name="size"
35+
class="slider"
36+
id="size"
37+
/>
38+
</div>
39+
<div>
40+
<label for="size" class="mt-2" style="color: #395144;">Size</label>
41+
</div>
42+
<div>
43+
<input
44+
type="range"
45+
min="10"
46+
max="410"
47+
value="60"
48+
step="50"
49+
name="speed"
50+
class="slider"
51+
id="speed"
52+
/>
53+
</div>
54+
<div>
55+
<label for="speed" class="mt-2" style="color: #395144;">Speed</label>
56+
</div>
57+
<div>
58+
<button class="btn btn-clr mt-2" id="new-array" type="button">
59+
New Array
60+
</button>
61+
</div>
62+
<div>
63+
<button class="btn reload mt-4 mb-2" id="reload">Reload</button>
64+
</div>
65+
<div class="srt-btn">
66+
<div>
67+
<button class="btn btn-clr" id="bubble" type="button">
68+
Bubble Sort
69+
</button>
70+
</div>
71+
<div>
72+
<button class="btn btn-clr" id="selection" type="button">
73+
Selection Sort
74+
</button>
75+
</div>
76+
<div>
77+
<button class="btn btn-clr" id="insertion" type="button">
78+
Insertion Sort
79+
</button>
80+
</div>
81+
<div>
82+
<button class="btn btn-clr" id="merge" type="button">
83+
Merge Sort
84+
</button>
85+
</div>
86+
<div>
87+
<button class="btn btn-clr" id="quick" type="button">
88+
Quick Sort
89+
</button>
90+
</div>
91+
</div>
2792
</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>
93+
<div class="bars-cnt" id="bars">
94+
<!-- Bars -->
4095
</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>
96+
<div>
97+
<!-- Something -->
5398
</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>
99+
</div>
100+
<footer
101+
class="d-flex flex-wrap justify-content-space-between align-items-center py-3 border-top"
102+
>
103+
<div class="ftr">
104+
<div>
105+
<a
106+
href="/"
107+
class="mb-3 me-2 mb-md-0 text-body-primary text-decoration-none lh-1"
108+
>
109+
<i
110+
class="fa-solid text-dark fa-arrow-up-wide-short mr-2"
111+
></i>
112+
</a>
113+
<span class="mb-3 mb-md-0 ftr-txt">
114+
🐿️ Ujjwal Upadhyay © 2023
115+
</span>
71116
</div>
117+
<div>
118+
<ul
119+
class="nav d-flex list-unstyled"
120+
>
121+
<li class="ms-3">
122+
<a
123+
class="mr-3"
124+
href="https://www.linkedin.com/in/iamujj15/"
125+
>
126+
<svg
127+
xmlns="http://www.w3.org/2000/svg"
128+
width="24"
129+
height="24"
130+
fill="currentColor"
131+
class="bi bi-linkedin"
132+
viewBox="0 0 16 16"
133+
>
134+
<path
135+
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
136+
/>
137+
</svg>
138+
</a>
139+
</li>
140+
<li class="ms-3">
141+
<a class="text-dark" href="https://github.com/iamujj15">
142+
<svg
143+
xmlns="http://www.w3.org/2000/svg"
144+
width="24"
145+
height="24"
146+
fill="currentColor
147+
class="bi bi-github"
148+
viewBox="0 0 16 16"
149+
>
150+
<path
151+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
152+
/>
153+
</svg>
154+
</a>
155+
</li>
156+
</ul>
72157
</div>
73-
<div id="bars">
74-
<!-- Bars -->
75158
</div>
76-
<!-- Will add it in future
77-
<footer>
78-
<small>🐿️ Ujjwal - 2023</small>
79159
</footer>
80-
-->
160+
</div>
161+
81162
<script src="sorting.js"></script>
82163
<script src="bubble.js"></script>
83164
<script src="selection.js"></script>
@@ -99,5 +180,9 @@
99180
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
100181
crossorigin="anonymous"
101182
></script>
183+
<script
184+
src="https://kit.fontawesome.com/8188a82202.js"
185+
crossorigin="anonymous"
186+
></script>
102187
</body>
103188
</html>

‎insertion.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use strict";
22

33
const insertionSort = async function () {
4+
document.getElementById("insertion").classList.toggle("active-btn");
45
tempDisable();
56
const barsEl = document.getElementById("bars");
67
const sz = Number(barsEl.childElementCount);
@@ -37,6 +38,7 @@ const insertionSort = async function () {
3738
}
3839
document.getElementById("new-array").classList.remove("disabled");
3940
document.getElementById("size").classList.remove("disabled");
41+
document.getElementById("insertion").classList.toggle("active-btn");
4042
};
4143

4244
const btnInsertionSort = document.getElementById("insertion");

‎merge.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ const merge = async function (l, m, r) {
2121
while (i < n1 && j < n2) {
2222
if (L[i] <= R[j]) {
2323
bars[k] = L[i];
24-
barsEl.children[k].style.height = `${L[i]}%`;
24+
barsEl.children[k].style.height = `${L[i] * 0.94}%`;
2525
// barsEl.children[k].children[0].innerText = L[i];
2626
i++;
2727
} else {
2828
bars[k] = R[j];
29-
barsEl.children[k].style.height = `${R[j]}%`;
29+
barsEl.children[k].style.height = `${R[j] * 0.94}%`;
3030
// barsEl.children[k].children[0].innerText = R[j];
3131
j++;
3232
}
@@ -36,7 +36,7 @@ const merge = async function (l, m, r) {
3636

3737
while (i < n1) {
3838
bars[k] = L[i];
39-
barsEl.children[k].style.height = `${L[i]}%`;
39+
barsEl.children[k].style.height = `${L[i] * 0.94}%`;
4040
// barsEl.children[k].children[0].innerText = L[i];
4141
i++;
4242
k++;
@@ -45,7 +45,7 @@ const merge = async function (l, m, r) {
4545

4646
while (j < n2) {
4747
bars[k] = R[j];
48-
barsEl.children[k].style.height = `${R[j]}%`;
48+
barsEl.children[k].style.height = `${R[j] * 0.94}%`;
4949
// barsEl.children[k].children[0].innerText = R[j];
5050
j++;
5151
k++;
@@ -76,13 +76,15 @@ const doGreen = async function (sz) {
7676
};
7777

7878
const mergeSort = async function () {
79+
document.getElementById("merge").classList.toggle("active-btn");
7980
tempDisable();
8081
const barsEl = document.getElementById("bars");
8182
const sz = Number(barsEl.childElementCount);
8283

8384
await mergeS(0, Number(sz - 1)).then(() => doGreen(sz));
8485
document.getElementById("new-array").classList.remove("disabled");
8586
document.getElementById("size").classList.remove("disabled");
87+
document.getElementById("merge").classList.toggle("active-btn");
8688
};
8789

8890
const btnMergeSort = document.getElementById("merge");

‎quick.js

+2
Original file line numberDiff line numberDiff line change
@@ -84,13 +84,15 @@ const quickS = async function (l, r) {
8484
};
8585

8686
const quickSort = async function () {
87+
document.getElementById("quick").classList.toggle("active-btn");
8788
tempDisable();
8889
const barsEl = document.getElementById("bars");
8990
const sz = Number(barsEl.childElementCount);
9091

9192
await quickS(0, Number(sz - 1)).then(() => doGreen(sz));
9293
document.getElementById("new-array").classList.remove("disabled");
9394
document.getElementById("size").classList.remove("disabled");
95+
document.getElementById("quick").classList.toggle("active-btn");
9496
};
9597

9698
const btnQuickSort = document.getElementById("quick");

‎selection.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use strict";
22

33
const selectionSort = async function () {
4+
document.getElementById("selection").classList.toggle("active-btn");
45
tempDisable();
56
const barsEl = document.getElementById("bars");
67
const sz = Number(barsEl.childElementCount);
@@ -67,6 +68,7 @@ const selectionSort = async function () {
6768
}
6869
document.getElementById("new-array").classList.remove("disabled");
6970
document.getElementById("size").classList.remove("disabled");
71+
document.getElementById("selection").classList.toggle("active-btn");
7072
};
7173

7274
const btnSelectionSort = document.getElementById("selection");

‎sorting.js

+9-7
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22

33
const barsEl = document.getElementById("bars");
44
const sizeSlider = document.getElementById("size");
5-
const barsRect = barsEl.getBoundingClientRect();
5+
// const barsRect = barsEl.getBoundingClientRect();
66
const btnNewArray = document.getElementById("new-array");
77
const btnReload = document.getElementById("reload");
8-
const barsWidth = barsRect.width;
9-
const barsHeight = barsRect.height;
8+
// const barsWidth = barsRect.width;
9+
// const barsHeight = barsRect.height;
10+
const barsWidth = barsEl.offsetWidth;
11+
const barsHeight = barsEl.offsetHeight;
1012

1113
barsEl.innerHTML = "";
1214
let bars = [];
@@ -19,16 +21,16 @@ const newArray = function () {
1921
for (let i = 0; i < Number(sizeSlider.value); ++i)
2022
bars.push(Math.floor(Math.random() * 99) + 1);
2123

22-
const newWidth = (Number(barsWidth) * 0.9) / Number(sizeSlider.value);
24+
const newWidth = (Number(barsWidth) * 0.96) / Number(sizeSlider.value);
2325

2426
for (let i = 0; i < Number(sizeSlider.value); ++i) {
2527
const divEl = document.createElement("div");
2628
divEl.classList.add("bar-prop");
2729
divEl.style.display = "inline-block";
28-
divEl.style.width = `${newWidth * 0.88}px`;
29-
divEl.style.height = `${Number(bars[i])}%`;
30+
divEl.style.width = `${newWidth * 0.94}px`;
31+
divEl.style.height = `${Number(bars[i]) * (0.94)}%`;
3032
divEl.style.margin = `0 ${0.05 * newWidth}px 0`;
31-
divEl.style.marginBottom = `${Number(barsHeight * 0.1)}px`;
33+
divEl.style.marginBottom = `${Number(barsHeight * 0.05)}px`;
3234
divEl.style.position = "relative";
3335
divEl.setAttribute("id", `bar-${i}`);
3436

0 commit comments

Comments
 (0)