Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2f7a886

Browse files
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-
varcompleteAudio=newAudio("./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-
vartemp;
96-
for(leti=0;i<data.length-1;i++){
101+
for(leti=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 (varj = 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-
varcompleteAudio=newAudio("./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)

AltStyle によって変換されたページ (->オリジナル) /