Skip to content

Commit 2f7a886

Browse files
Bappy4uBappy4u
committed
Refactor code and added sound off option
1 parent 0b0c0c7 commit 2f7a886

File tree

3 files changed

+143
-74
lines changed

3 files changed

+143
-74
lines changed

‎function.js‎

Lines changed: 88 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ var svg,
33
text,
44
maxElement = 15,
55
dataRange = maxElement * 2,
6-
areaHeight = 150,
6+
areaHeight = 250,
77
areaWidth = 800,
88
time = 300,
99
traverseColor = "#ffcaa1",
@@ -13,6 +13,11 @@ var svg,
1313
isSorting = false,
1414
isSorted = false;
1515

16+
var swooshAudio = new Audio("./sound-effects/swoosh.mp3");
17+
var completeAudio = new Audio("./sound-effects/complete.mp3");
18+
swooshAudio.volume = 0.3;
19+
completeAudio.volume = 0.3;
20+
1621
// generating random data
1722
var data = randomData(maxElement, dataRange);
1823
function setSpeed() {
@@ -27,139 +32,141 @@ var heightScale = d3
2732
// initialized a chart with random value
2833
createChart(data);
2934

30-
const selectionS = {
31-
selectionSort() {
35+
// javascript objects for performing different sorting algorithm
36+
const SortAlgo = {
37+
// bubble sort methods to perform bubble sort algorithm
38+
bubbleSort() {
39+
// promise for async bubble sort with delay
40+
3241
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
42+
// async function for bubble sort
3343

3444
async function sort(self) {
35-
for (let i = 0; i < data.length; i++) {
45+
var temp;
46+
for (let i = 0; i < data.length - 1; i++) {
47+
// If user click on stop button then this function will stop performing here.
3648
if (self.abort) {
3749
self.abort = false;
3850
return;
3951
}
40-
smallest = data[i];
41-
pos = i;
42-
changeBarColor(smallest, smallestColor);
52+
// changing initial smallest bar color
53+
changeBarColor(data[0], smallestColor);
4354
await timer(time);
44-
for (var j = i + 1; j < data.length; j++) {
55+
for (j = 0; j < data.length - i - 1; j++) {
56+
// If user click on stop button then this function will stop performing here.
4557
if (self.abort) {
4658
self.abort = false;
59+
changeBarColor(data[j], unsortedColor);
4760
return;
4861
}
49-
changeBarColor(data[j], traverseColor);
50-
if (smallest > data[j]) {
62+
await timer(time);
63+
changeBarColor(data[j + 1], traverseColor);
64+
await timer(time);
65+
if (data[j] > data[j + 1]) {
66+
temp = data[j];
67+
data[j] = data[j + 1];
68+
data[j + 1] = temp;
69+
changeBarColor(data[j + 1], smallestColor);
70+
swooshAudio.play();
71+
swapBar(data);
5172
await timer(time);
52-
changeBarColor(smallest, unsortedColor);
53-
smallest = data[j];
54-
pos = j;
73+
} else {
74+
changeBarColor(data[j + 1], smallestColor);
5575
}
56-
57-
changeBarColor(smallest, smallestColor);
58-
await timer(time);
5976
changeBarColor(data[j], unsortedColor);
6077
}
61-
if (data[i] != smallest) {
62-
temp = data[i];
63-
data[i] = smallest;
64-
data[pos] = temp;
65-
66-
var swooshAudio = new Audio("./sound-effects/swoosh.mp3");
67-
swooshAudio.play();
68-
}
69-
changeBarColor(smallest, sortedColor);
70-
swapBar(data);
71-
await timer(time); // then the created Promise can be awaited
78+
changeBarColor(data[j], sortedColor);
7279
}
80+
81+
// after complete sorting complete making all the bar green and playing complete sound effects
7382
svg.selectAll("rect").style("fill", "#56b4d3");
74-
var completeAudio = new Audio("./sound-effects/complete.mp3");
83+
7584
completeAudio.play();
7685
isSorting = false;
7786
isSorted = true;
7887
togglePlay();
7988
}
8089

90+
// calling async function here
8191
sort(this);
8292
},
8393

84-
selectionSortStop() {
85-
this.abort = true;
86-
isSorting = false;
87-
},
88-
};
89-
90-
const bubbleS = {
91-
bubbleSort() {
94+
// selection sort methods
95+
selectionSort() {
96+
// promise for async selection sort with delay
9297
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
9398

99+
// async function for selection sort algorithm
94100
async function sort(self) {
95-
var temp;
96-
for (let i = 0; i < data.length - 1; i++) {
101+
for (let i = 0; i < data.length; i++) {
102+
// Stoping execution here if users wants to stop.
97103
if (self.abort) {
98104
self.abort = false;
99105
return;
100106
}
101-
102-
changeBarColor(data[0], smallestColor);
107+
smallest = data[i];
108+
pos = i;
109+
changeBarColor(smallest, smallestColor);
103110
await timer(time);
104-
for (j = 0; j < data.length - i - 1; j++) {
111+
for (var j = i + 1; j < data.length; j++) {
105112
if (self.abort) {
106113
self.abort = false;
107-
changeBarColor(data[j], unsortedColor);
108114
return;
109115
}
110-
await timer(time);
111-
changeBarColor(data[j + 1], traverseColor);
112-
await timer(time);
113-
if (data[j] > data[j + 1]) {
114-
temp = data[j];
115-
data[j] = data[j + 1];
116-
data[j + 1] = temp;
117-
changeBarColor(data[j + 1], smallestColor);
118-
var swooshAudio = new Audio("./sound-effects/swoosh.mp3");
119-
swooshAudio.play();
120-
swapBar(data);
116+
changeBarColor(data[j], traverseColor);
117+
if (smallest > data[j]) {
121118
await timer(time);
122-
} else {
123-
changeBarColor(data[j + 1], smallestColor);
119+
changeBarColor(smallest, unsortedColor);
120+
smallest = data[j];
121+
pos = j;
124122
}
123+
124+
changeBarColor(smallest, smallestColor);
125+
await timer(time);
125126
changeBarColor(data[j], unsortedColor);
126127
}
127-
changeBarColor(data[j], sortedColor);
128+
if (data[i] != smallest) {
129+
temp = data[i];
130+
data[i] = smallest;
131+
data[pos] = temp;
132+
// playing swapping sound
133+
swooshAudio.play();
134+
}
135+
// swapping bar and changing smallest color
136+
changeBarColor(smallest, sortedColor);
137+
swapBar(data);
138+
await timer(time); // then the created Promise can be awaited
128139
}
140+
141+
// After complete sorting algorithm making all the bar green.
129142
svg.selectAll("rect").style("fill", "#56b4d3");
130-
var completeAudio = new Audio("./sound-effects/complete.mp3");
143+
131144
completeAudio.play();
132145
isSorting = false;
133146
isSorted = true;
134147
togglePlay();
135148
}
136-
149+
// calling sort function here
137150
sort(this);
138151
},
139152

140-
bubbleSortStop() {
153+
// If user wants to stop the sorting process then this function will be called and sorting algorithm will be stopped immediately.
154+
sortStop() {
141155
this.abort = true;
142156
isSorting = false;
143157
},
144158
};
145159

146160
function stopSorting() {
147-
const stopBubbleSort = bubbleS.bubbleSortStop.bind(bubbleS);
148-
const stopSelectionSort = selectionS.selectionSortStop.bind(selectionS);
149-
if (running == "bubble") {
150-
stopBubbleSort();
151-
} else if (running == "selection") {
152-
stopSelectionSort();
153-
}
161+
const stopSorting = SortAlgo.sortStop.bind(SortAlgo);
162+
stopSorting();
154163
}
155164
function startSorting() {
156165
if (getAlgo() == "bubble-sort") {
157-
const bubbleSortStarted = bubbleS.bubbleSort.bind(bubbleS);
158-
running = "bubble";
166+
const bubbleSortStarted = SortAlgo.bubbleSort.bind(SortAlgo);
159167
bubbleSortStarted();
160168
} else if (getAlgo() == "selection-sort") {
161-
const selectionSortStarted = selectionS.selectionSort.bind(selectionS);
162-
running = "selection";
169+
const selectionSortStarted = SortAlgo.selectionSort.bind(SortAlgo);
163170
selectionSortStarted();
164171
}
165172
}
@@ -190,3 +197,14 @@ document.getElementById("random-data").addEventListener("click", function () {
190197
var data = randomData(maxElement, dataRange);
191198
createChart(data);
192199
});
200+
201+
document.getElementById("sound").addEventListener("click", function () {
202+
if (this.classList.contains("line-through")) {
203+
swooshAudio.volume = 0.3;
204+
completeAudio.volume = 0.3;
205+
} else {
206+
swooshAudio.volume = 0;
207+
completeAudio.volume = 0;
208+
}
209+
this.classList.toggle("line-through");
210+
});

‎index.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="stylesheet" href="style.css" />
99
</head>
1010
<body>
11+
<p class="sound"><a id="sound" href="#">Sound 🎵</a></p>
1112
<h1>Sorting Visualizer</h1>
1213
<button id="random-data">Generate Random Data</button>
1314
<div class="radio">
@@ -36,20 +37,29 @@ <h1>Sorting Visualizer</h1>
3637
id="speed"
3738
name="speed"
3839
min="100"
39-
max="1000"
40+
max="800"
41+
value="300"
4042
onchange="setSpeed()"
4143
/>
4244
</label>
4345
</form>
46+
<button id="sort">Sort</button>
47+
<button id="stop" class="none stop">Stop</button>
4448
</div>
4549
<div class="container">
4650
<div class="bar-chart">
4751
<div id="chart"></div>
4852
<hr />
49-
<button id="sort">Sort</button>
50-
<button id="stop" class="none stop">Stop</button>
5153
</div>
5254
</div>
55+
<footer>
56+
<div class="footer-text">
57+
<p>
58+
Made with <span class="love">❤</span> by
59+
<a href="https://nbappy.me/">Najmul H. Bappy</a>
60+
</p>
61+
</div>
62+
</footer>
5363
<script src="https://d3js.org/d3.v4.min.js"></script>
5464
<script src="base.js"></script>
5565
<script src="function.js"></script>

‎style.css‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
* {
22
font-family: sans-serif;
33
}
4+
body {
5+
min-height: 100vh;
6+
}
47
.container {
58
display: flex;
69
justify-content: center;
710
align-items: center;
811
}
912
.bar-chart {
10-
margin-top: 40px;
13+
margin-top: 5vh;
1114
background-color: #eee;
1215
padding: 50px 20px 30px 20px;
1316
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
@@ -87,3 +90,41 @@ rect:hover {
8790
#8f5a34 100%
8891
);
8992
}
93+
footer {
94+
width: 100%;
95+
color: #8c8c8c;
96+
97+
margin: auto;
98+
margin-top: 5vh;
99+
}
100+
101+
footer p {
102+
display: block;
103+
margin: 0 auto;
104+
text-align: center;
105+
}
106+
107+
footer .footer-text {
108+
margin: auto;
109+
}
110+
111+
footer .love {
112+
color: red;
113+
}
114+
footer a {
115+
color: #2e2e2e;
116+
}
117+
.sound {
118+
text-align: right;
119+
}
120+
.sound a {
121+
background: rgb(165, 115, 115);
122+
padding: 5px;
123+
border-radius: 5px;
124+
color: #fff;
125+
cursor: pointer;
126+
text-decoration: none;
127+
}
128+
.line-through {
129+
text-decoration: line-through !important;
130+
}

0 commit comments

Comments
 (0)