Skip to content

Commit ec2bd23

Browse files
DSDmarkDSDmark
committed
Update
1 parent 681495d commit ec2bd23

File tree

4 files changed

+90
-71
lines changed

4 files changed

+90
-71
lines changed

‎README.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
![GitHub last commit](https://img.shields.io/github/last-commit/DSDmark/TodoList)
77
[![pages-build-deployment](https://github.com/DSDmark/TodoList/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/DSDmark/TodoList/actions/workflows/pages/pages-build-deployment)
88

9-
# Your First Application 🤟
10-
## Walcome to Webdev 😊
9+
# BubbleSort-Visualization
1110

1211
<div>
1312

@@ -31,20 +30,20 @@ Once you are done you can close the application in your terminal to quit the ap
3130

3231
---
3332

34-
## Try Out TodoList Demo
33+
## BubbleSort-Visualization
3534

3635
<a href="https://dsdmark.github.io/TodoList/" alt="TodoList Demo">TodoList Demo</a>
3736

3837
</div>
3938

40-
### Todo List
39+
### BubbleSort-Visualization
4140

42-
![Todo List perview](public/images/perview.gif "Todo List")
41+
![BubbleSort-Visualization](public/images/perview.gif "BubbleSort-Visualization")
4342

4443
</div>
4544

4645
> If you have any issues with that Application feel free to let me know!
4746
48-
> If you are more interested, check out the collection of [ **CLIsapplications**](https://github.com/DSDmark/CLIsapplications"CLIsapplications").
47+
> If you are more interested, check out the collection of [ **DSDmark**](https://github.com/DSDmark/BubbleSort-Visualization").
4948
---
5049

‎assets/js/index.js‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
const canvas = document.getElementById('cvs')
2+
const stopButton = document.getElementById('stopbutton')
23
const ctx = canvas.getContext('2d')
34
const CH = (canvas.height = 300)
45
const CW = (canvas.width = 600)
56
canvas.style.background = 'black'
67

7-
8-
98
const BubbleSort = {
109
i: 0,
1110
j: 0,
@@ -20,9 +19,9 @@ const BubbleSort = {
2019
ctx.clearRect(0, 0, CH, CW)
2120
const lineSpacing = 10
2221
ctx.lineWidth = 5
23-
for (let j = 0; j < this.seedValue.length; j++) {
22+
for (let j = 1; j < this.seedValue.length; j++) {
2423
const y = j * lineSpacing
25-
ctx.beginPath()
24+
ctx.beginPath()
2625
ctx.moveTo(y, CH)
2726
ctx.lineTo(y, CH - this.seedValue[j])
2827
ctx.closePath()
@@ -38,14 +37,15 @@ const BubbleSort = {
3837
}
3938
},
4039
update() {
40+
4141
if (this.seedValue[this.j] > this.seedValue[this.j + 1]) {
4242
;[this.seedValue[this.j], this.seedValue[this.j + 1]] = [
4343
this.seedValue[this.j + 1],
4444
this.seedValue[this.j],
4545
]
4646
this.sortedLine = this.seedValue[this.j + 1]
4747
}
48-
if (this.i < this.seedValue.length) {
48+
if (this.i < this.seedValue.length || isClick) {
4949
this.j++
5050
if (this.j >= this.seedValue.length - this.i - 1) {
5151
this.color = 'red'
@@ -54,7 +54,9 @@ const BubbleSort = {
5454
}
5555
} else {
5656
this.isLoop = false
57+
clearInterval()
5758
}
59+
5860
this.draw()
5961
},
6062
startup() {
@@ -64,18 +66,31 @@ const BubbleSort = {
6466
this.seedValue[this.i] = Math.random() * (CH - 0 + 1) + 0
6567
}
6668
this.i = 0
69+
70+
// Hendling Evnets.
6771
},
72+
stopLoop() {
73+
clearInterval();
74+
},
6875
}
6976

7077
// You could use window.requestAnimationFrame as well. but, for simplicity i'm using setInterval.
71-
78+
let cleaer;
79+
stopButton.addEventListener('click',()=>{
80+
// p
81+
// clearInterval(cleaer);
82+
} )
7283
function render() {
7384
BubbleSort.startup()
74-
if (BubbleSort.isLoop) {
75-
setInterval(() => {
85+
if (BubbleSort.isLoop) {
86+
87+
cleaer = setInterval(() => {
7688
BubbleSort.update(BubbleSort.seedValue)
89+
7790
}, BubbleSort.loopSpeed)
78-
}
91+
}else{
92+
console.log("final");
93+
}
7994
}
8095

8196
render() // calling the main functions.

‎assets/style/style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ body{
1616
flex-direction:column;
1717
border: 1px solid #ccc;
1818
background-color: #f1f1f1;
19-
line-height:1.5rem;
2019
width: auto;
2120
height:auto;
2221
}

‎index.html‎

Lines changed: 61 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,63 +9,69 @@
99
</head>
1010
<body>
1111
<div class="tab">
12-
<div class="inputField">
13-
<label for="sizeoflines">
14-
Size of lines:<br />
15-
<input
16-
class="tablinks"
17-
type="range"
18-
id="sizeoflines"
19-
min="0"
20-
max="100"
21-
value="50"
22-
/>
23-
</label>
24-
<label for="numberoflines">
25-
Number of lines:<br />
26-
<input
27-
class="tablinks"
28-
id="numberoflines"
29-
type="range"
30-
min="0"
31-
max="100"
32-
value="50"
33-
/>
34-
</label>
35-
<button
36-
class="tablinks"
37-
id="stopbutton"
38-
/>Stop Sorting</button> <br />
39-
<label for="sizeofcanvas">
40-
Size of canvas(lenght):<br />
41-
<input
42-
class="tablinks"
43-
id="sizeofcanvas"
44-
type="range"
45-
min="0"
46-
max="100"
47-
value="50"
48-
/> </label
49-
><br />
50-
<label for="sortedlinecolor">
51-
Sorted line color:<br />
52-
<input
53-
class="tablinks"
54-
id="sortedlinecolor"
55-
value="red"
56-
/> </label><br />
57-
<label for="lienescolors">
58-
colors of lines:<br />
59-
<input
60-
class="tablinks"
61-
id="linescolors"
62-
type="text" value="white"
63-
/> </label
64-
><br />
65-
</div>
12+
<div class="inputField">
13+
<button class="tablinks" id="stopbutton">Stop Sorting</button> <br />
14+
<label for="sortedlinecolor">
15+
Sorted line color:<br />
16+
<input class="tablinks" id="sortedlinecolor" value="red" /> </label
17+
><br />
18+
<label for="lienescolors">
19+
colors of lines:<br />
20+
<input
21+
class="tablinks"
22+
id="linescolors"
23+
type="text"
24+
value="white"
25+
/> </label
26+
><br />
27+
<label for="sizeoflines">
28+
Size of lines:<br />
29+
<input
30+
class="tablinks"
31+
type="range"
32+
id="sizeoflines"
33+
min="0"
34+
max="100"
35+
value="50"
36+
/>
37+
</label>
38+
<label for="numberoflines">
39+
Number of lines:<br />
40+
<input
41+
class="tablinks"
42+
id="numberoflines"
43+
type="range"
44+
min="0"
45+
max="100"
46+
value="50"
47+
/>
48+
</label>
49+
<label for="sizeofcanvas">
50+
Size of canvas(lenght):<br />
51+
<input
52+
class="tablinks"
53+
id="sizeofcanvas"
54+
type="range"
55+
min="0"
56+
max="100"
57+
value="50"
58+
/> </label
59+
><br />
60+
<label for="sizeofcanvas">
61+
Size of canvas(lenght):<br />
62+
<input
63+
class="tablinks"
64+
id="sizeofcanvas"
65+
type="range"
66+
min="0"
67+
max="100"
68+
value="50"
69+
/> </label
70+
><br />
71+
</div>
6672
<canvas id="cvs"></canvas>
6773
</div>
68-
<!-- The main section when all things will heppening -->
74+
<!-- The main section when all things will heppening -->
6975
<script src="./assets/js/index.js"></script>
7076
</body>
7177
</html>

0 commit comments

Comments
 (0)