Skip to content

Commit 981aed9

Browse files
AbhineshhhAbhineshhh
committed
added sorting visualizer
1 parent 59812a4 commit 981aed9

File tree

3 files changed

+168
-0
lines changed

3 files changed

+168
-0
lines changed

‎sorting-visualizer/208 - Sorting visualizer/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="./style.css" />
9+
<title>Sorting Visualizer</title>
10+
</head>
11+
12+
<body>
13+
<div class="main_container">
14+
<button class="title_btn">🌟 Sorting Visualizer 🌟</button>
15+
<div id="container"></div>
16+
<div>
17+
<button class="btn" onClick="init()">Generate Array ✨</button>
18+
<button class="btn" onClick="play()">Sort 🔥</button>
19+
</div>
20+
</div>
21+
<script src="./script.js"></script>
22+
</body>
23+
24+
</html>

‎sorting-visualizer/208 - Sorting visualizer/script.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const n = 9; //number of bars to sort
2+
const array = [];
3+
init();
4+
5+
//generate random numbers
6+
function init() {
7+
for (let i = 0; i < n; i++) {
8+
array[i] = Math.floor(Math.random() * (11 - 1) + 1);
9+
}
10+
showBars();
11+
}
12+
13+
function play() {
14+
const copy = [...array];
15+
const moves = bubbleSort(copy);
16+
animate(moves);
17+
}
18+
19+
//function for animating the bars
20+
function animate(moves) {
21+
if (moves.length == 0) {
22+
showBars();
23+
return;
24+
}
25+
const move = moves.shift();
26+
const [i, j] = move.indices;
27+
if (move.type == 'swap') {
28+
[array[i], array[j]] = [array[j], array[i]];
29+
}
30+
showBars(move);
31+
setTimeout(function () {
32+
animate(moves);
33+
}, 200);
34+
}
35+
36+
//implement the bubble sort function
37+
function bubbleSort(array) {
38+
const moves = [];
39+
do {
40+
var swapped = false;
41+
for (let i = 1; i < array.length; i++) {
42+
moves.push({ indices: [i - 1, i], type: 'comp' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
43+
if (array[i - 1] > array[i]) {
44+
swapped = true;
45+
moves.push({ indices: [i - 1, i], type: 'swap' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
46+
[array[i - 1], array[i]] = [array[i], array[i - 1]];
47+
}
48+
}
49+
} while (swapped);
50+
return moves;
51+
}
52+
53+
//render the bars dynamically in the index html file
54+
function showBars(move) {
55+
container.innerHTML = '';
56+
for (let i = 0; i < array.length; i++) {
57+
const bar = document.createElement('div');
58+
bar.style.height = array[i] * 10 + '%';
59+
bar.classList.add('bar');
60+
bar.innerHTML = Math.floor(array[i] * 10);
61+
if (move && move.indices.includes(i)) {
62+
bar.style.backgroundColor = move.type == 'swap' ? 'red' : 'green'; //red if swapping green if comparing
63+
}
64+
container.appendChild(bar);
65+
}
66+
}

‎sorting-visualizer/208 - Sorting visualizer/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.bar {
2+
padding: 10px 12px;
3+
display: flex;
4+
justify-content: center;
5+
width: 25px;
6+
background: rgb(224, 81, 172);
7+
margin: 3px;
8+
border: 3.5px solid rgb(23, 23, 24);
9+
color: whitesmoke;
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
background-color: rgb(70, 68, 68);
20+
font-family: 'Montserrat', sans-serif;
21+
}
22+
body .main_container {
23+
padding: 3rem;
24+
height: 100vh;
25+
width: 100%;
26+
display: flex;
27+
align-items: center;
28+
flex-direction: column;
29+
}
30+
body .main_container #container {
31+
padding: 5rem 0rem;
32+
height: 80%;
33+
display: flex;
34+
align-items: flex-end;
35+
justify-content: center;
36+
}
37+
38+
.btn {
39+
border-radius: 30px;
40+
font-size: 17px;
41+
font-weight: 400;
42+
padding: 1rem;
43+
margin: 0rem 1rem;
44+
border: 0;
45+
cursor: pointer;
46+
transition: ease-in 0.2s;
47+
box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
48+
border: 3.5px solid rgb(23, 23, 24);
49+
}
50+
51+
.btn:hover {
52+
font-size: 15px;
53+
color: whitesmoke;
54+
background-color: rgb(224, 81, 172);
55+
padding: 1rem;
56+
box-shadow: 0rem 0rem 0 rgb(23, 23, 24);
57+
border: 3.5px solid rgb(23, 23, 24);
58+
}
59+
60+
.title_btn {
61+
border-radius: 30px;
62+
font-size: 25px;
63+
font-weight: 700;
64+
padding: 1rem 4rem;
65+
margin: 0rem 1rem;
66+
border: 0;
67+
transition: ease-in 0.2s;
68+
box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
69+
border: 3.5px solid rgb(23, 23, 24);
70+
background-color: white;
71+
}
72+
73+
@media screen and (width <= 400px) {
74+
.title_btn {
75+
padding: 0.6rem 2rem;
76+
font-size: 18px;
77+
}
78+
}

0 commit comments

Comments
 (0)