Skip to content

Commit 8074947

Browse files
PBJIPBJI
authored
Merge pull request #769 from Abhii-07/sortingVisualizer-Abhii-07
SortingVisualizer added by Abhii-07
2 parents c9704f0 + f1a2f8c commit 8074947

File tree

4 files changed

+328
-0
lines changed

4 files changed

+328
-0
lines changed

‎SortingVisualizer/Abhii-07/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Sorting-Algo-Visualizer
2+
Algorithm Visualizer lets you visualize various algorithms and data structures. This project mainly focuses on three types of sorting algorithms
3+
4+
Deployed : https://benevolent-peony-3fcf43.netlify.app/

‎SortingVisualizer/Abhii-07/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html>
2+
3+
<head>
4+
<title>Sort Visualizer</title>
5+
6+
<link rel="stylesheet" href="style.css">
7+
</link>
8+
</head>
9+
10+
11+
<body>
12+
<h1>Sorting Algorithm Visualizer</h1>
13+
<div>
14+
<section style="margin-top: 2vw;">
15+
<p class="head"><b>Comparision: <b id="comp"></b></b></p>
16+
<p class="head"><b>Swap: <b id="swap"></b></b></p>
17+
</section>
18+
<section class="data-container"></section>
19+
<section> <button class="btn1" onclick="generate()" id="btn1">Generate Array</button>
20+
<button class="btn4" onclick="reset()" id="btn4">Reset</button>
21+
</section>
22+
<secion class="sort">
23+
<br><br>
24+
<button class="btn2" onclick="selectionsort(),dis()" id="btn2">Selection Sort</button>
25+
<br><br>
26+
<button class="btn3" onclick="bubblesort(),dis()" id="btn3">Bubble Sort</button>
27+
<br><br>
28+
<button class="btn5" onclick="insertionsort(),dis()" id="btn5">Insertion Sort</button>
29+
</secion>
30+
31+
</div>
32+
<script src="main.js"></script>
33+
</body>
34+
35+
</html>

‎SortingVisualizer/Abhii-07/main.js‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
const container = document.querySelector(".data-container");
2+
var comp = 0;
3+
document.getElementById("comp").innerHTML = comp;
4+
var sw = 0;
5+
document.getElementById("swap").innerHTML = sw;
6+
function generate() {
7+
const num = 20;
8+
for (let i = 0; i < num; i++) {
9+
const val = (Math.floor(Math.random() * 100) % 100) + 1;
10+
const bar = document.createElement("div");
11+
bar.classList.add("bar");
12+
bar.style.height = `${val * 3}px`;
13+
bar.style.transform = `translateX(${i * 30}px)`;
14+
const barLabel = document.createElement("label");
15+
barLabel.classList.add("bar_id");
16+
barLabel.innerHTML = val;
17+
bar.appendChild(barLabel);
18+
container.appendChild(bar);
19+
}
20+
}
21+
function reset() {
22+
window.location.reload();
23+
}
24+
function swap(val1, val2) {
25+
return new Promise((resolve) => {
26+
var temp = val1.style.transform;
27+
val1.style.transform = val2.style.transform;
28+
val2.style.transform = temp;
29+
sw++;
30+
document.getElementById("swap").innerHTML = sw;
31+
window.requestAnimationFrame(() => {
32+
setTimeout(() => {
33+
container.insertBefore(val2, val1);
34+
resolve();
35+
}, 150);
36+
});
37+
});
38+
}
39+
40+
async function bubblesort() {
41+
const delay = 150;
42+
var bars = document.querySelectorAll(".bar");
43+
const size = bars.length;
44+
for (let i = 0; i < size; i++) {
45+
for (let j = 0; j < size - i - 1; j++) {
46+
bars[j].style.backgroundColor = "red";
47+
bars[j + 1].style.backgroundColor = "red";
48+
await new Promise((resolve) => {
49+
setTimeout(() => {
50+
resolve();
51+
}, delay);
52+
});
53+
var val1 = parseInt(bars[j].childNodes[0].innerHTML);
54+
var val2 = parseInt(bars[j + 1].childNodes[0].innerHTML);
55+
comp++;
56+
document.getElementById("comp").innerHTML = comp;
57+
if (val1 > val2) {
58+
await swap(bars[j], bars[j + 1]);
59+
bars = document.querySelectorAll(".bar");
60+
}
61+
62+
bars[j].style.backgroundColor = " rgb(24, 190, 255)";
63+
bars[j + 1].style.backgroundColor = " rgb(24, 190, 255)";
64+
}
65+
bars[size - i - 1].style.backgroundColor = "green";
66+
}
67+
}
68+
69+
async function selectionsort() {
70+
const delay = 300;
71+
let bars = document.querySelectorAll(".bar");
72+
const size = bars.length;
73+
var min_ind = 0;
74+
for (let i = 0; i < size; i++) {
75+
min_ind = i;
76+
//bars[i].style.backgroundColor = "darkblue";
77+
for (let j = i + 1; j < size; j++) {
78+
bars[j].style.backgroundColor = "red";
79+
bars[min_ind].style.backgroundColor = "red";
80+
await new Promise((resolve) => {
81+
setTimeout(() => {
82+
resolve();
83+
}, 300);
84+
});
85+
86+
var val1 = parseInt(bars[j].childNodes[0].innerHTML);
87+
var val2 = parseInt(bars[min_ind].childNodes[0].innerHTML);
88+
comp++;
89+
document.getElementById("comp").innerHTML = comp;
90+
if (val1 < val2) {
91+
// if(min_ind!=i)
92+
// {
93+
// bars[i].style.backgroundColor = " rgb(24, 190, 255)";
94+
95+
// }
96+
bars[min_ind].style.backgroundColor = " rgb(24, 190, 255)";
97+
min_ind = j;
98+
} else bars[j].style.backgroundColor = " rgb(24, 190, 255)";
99+
}
100+
if (min_ind != i) {
101+
sw++;
102+
document.getElementById("swap").innerHTML = sw;
103+
}
104+
var temp1 = bars[min_ind].style.height;
105+
var temp2 = bars[min_ind].childNodes[0].innerText;
106+
bars[min_ind].style.height = bars[i].style.height;
107+
bars[i].style.height = temp1;
108+
bars[min_ind].childNodes[0].innerText = bars[i].childNodes[0].innerText;
109+
bars[i].childNodes[0].innerText = temp2;
110+
//swap(bars[min_ind], bars[i])
111+
await new Promise((resolve) => {
112+
setTimeout(() => {
113+
resolve();
114+
}, 150);
115+
});
116+
117+
bars[min_ind].style.backgroundColor = " rgb(24, 190, 255)";
118+
bars[i].style.backgroundColor = "green";
119+
}
120+
}
121+
122+
async function insertionsort() {
123+
let bars = document.querySelectorAll(".bar");
124+
const size = bars.length;
125+
bars[0].style.backgroundColor = " rgb(49, 226, 13)";
126+
for (let i = 1; i < size; i++) {
127+
var j = i - 1;
128+
var key = parseInt(bars[i].childNodes[0].innerHTML);
129+
var barheight = bars[i].style.height;
130+
bars[i].style.backgroundColor = "red";
131+
await new Promise((resolve) => {
132+
setTimeout(() => resolve(), 150);
133+
});
134+
while (j >= 0 && parseInt(bars[j].childNodes[0].innerHTML) > key) {
135+
sw++;
136+
document.getElementById("swap").innerHTML = sw;
137+
comp++;
138+
document.getElementById("comp").innerHTML = comp;
139+
bars[j].style.backgroundColor = "red";
140+
bars[j + 1].style.height = bars[j].style.height;
141+
bars[j + 1].childNodes[0].innerHTML = bars[j].childNodes[0].innerHTML;
142+
j--;
143+
await new Promise((resolve) => {
144+
setTimeout(() => resolve(), 250);
145+
});
146+
for (var k = i; k >= 0; k--) {
147+
bars[k].style.backgroundColor = " rgb(49, 226, 13)";
148+
}
149+
}
150+
comp++;
151+
document.getElementById("comp").innerHTML = comp;
152+
bars[j + 1].style.height = barheight;
153+
bars[j + 1].childNodes[0].innerHTML = key;
154+
155+
await new Promise((resolve) => {
156+
setTimeout(() => resolve(), 250);
157+
});
158+
159+
bars[i].style.backgroundColor = " rgb(49, 226, 13)";
160+
}
161+
}
162+
function dis() {
163+
document.getElementById("btn1").disabled = "true";
164+
document.getElementById("btn1").style.backgroundColor = "rgb(214, 209, 209);";
165+
document.getElementById("btn2").disabled = "true";
166+
document.getElementById("btn2").style.backgroundColor = "rgb(214, 209, 209);";
167+
document.getElementById("btn5").disabled = "true";
168+
document.getElementById("btn5").style.backgroundColor = "rgb(214, 209, 209);";
169+
document.getElementById("btn3").disabled = "true";
170+
document.getElementById("btn3").style.backgroundColor = "rgb(214, 209, 209);";
171+
}

‎SortingVisualizer/Abhii-07/style.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
.mySlides {
2+
display: none;
3+
}
4+
5+
body {
6+
background-color: rgb(252, 250, 247);
7+
font-family: Verdana, sans-serif;
8+
}
9+
h1{
10+
text-align: center;
11+
background-color: rgb(121, 57, 180);
12+
padding: 10px;
13+
color: white;
14+
}
15+
.head {
16+
margin-top: 1vw;
17+
margin-right: 2vw;
18+
margin-left: 2vw;
19+
text-align: center;
20+
font-size: 30px;
21+
font-weight: bolder;
22+
}
23+
24+
.data-container {
25+
width: 600px;
26+
height: 384px;
27+
position: relative;
28+
margin: 0 auto;
29+
}
30+
31+
.bar {
32+
width: 28px;
33+
position: absolute;
34+
left: 0;
35+
bottom: 0;
36+
background-color: rgb(0, 183, 255);
37+
transition: 0.2s all ease;
38+
}
39+
40+
.bar__id {
41+
position: absolute;
42+
top: -24px;
43+
width: 100%;
44+
text-align: center;
45+
font-size: 1vw;
46+
}
47+
.btn1 {
48+
padding: 12px;
49+
font-weight: bolder;
50+
background-color: #da981f;
51+
border-radius: 10px;
52+
color: white;
53+
font-size: 16px;
54+
border: white;
55+
margin-left: 37vw;
56+
margin-top: 4vw;
57+
margin-right: 1vw;
58+
}
59+
.btn2 {
60+
padding: 12px;
61+
font-weight: bolder;
62+
background-color: #2f1980;
63+
border-radius: 10px;
64+
color: white;
65+
font-size: 16px;
66+
border: white;
67+
margin-left: 2vw;
68+
margin-top: 1vw;
69+
margin-right: 1vw;
70+
}
71+
.btn3 {
72+
padding: 12px;
73+
font-weight: bolder;
74+
margin-left: 2vw;
75+
margin-top: 1vw;
76+
margin-right: 1vw;
77+
background-color: rgb(14, 116, 14);
78+
border-radius: 10px;
79+
color: white;
80+
font-size: 16px;
81+
border: white;
82+
}
83+
84+
.btn4 {
85+
padding: 12px;
86+
font-weight: bolder;
87+
background-color: rgb(121, 57, 180);
88+
border-radius: 10px;
89+
color: white;
90+
font-size: 16px;
91+
border: white;
92+
}
93+
94+
.btn5 {
95+
padding: 12px;
96+
font-weight: bolder;
97+
margin-left: 2vw;
98+
margin-top: 1vw;
99+
margin-right: 1vw;
100+
background-color:rgb(224, 62, 62);
101+
border-radius: 10px;
102+
color: white;
103+
font-size: 16px;
104+
border: white;
105+
}
106+
.sort
107+
{
108+
position: fixed;
109+
z-index: 1;
110+
top: 0;
111+
left: 0;
112+
overflow-x: hidden;
113+
margin-left: 2vw;
114+
margin-top: 12vw;
115+
margin-right: 1vw;
116+
padding-top: 2vw;
117+
118+
}

0 commit comments

Comments
 (0)