Skip to content

Commit f013336

Browse files
DSDmarkDSDmark
committed
UPDATE
1 parent 0f68756 commit f013336

File tree

7 files changed

+193
-85
lines changed

7 files changed

+193
-85
lines changed

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "es5",
4+
"semi":false,
5+
"tabWidth":2,
6+
}
7+

‎README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<div align="center">
2+
3+
![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/DSDmark/TodoList)
4+
![GitHub](https://img.shields.io/github/license/DSDmark/TodoList)
5+
![GitHub language count](https://img.shields.io/github/languages/count/DSDmark/TodoList)
6+
![GitHub last commit](https://img.shields.io/github/last-commit/DSDmark/TodoList)
7+
[![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)
8+
9+
# Your First Application 🤟
10+
## Walcome to Webdev 😊
11+
12+
<div>
13+
14+
<div align="center">
15+
16+
<div align="left">
17+
18+
19+
---
20+
21+
### How to install
22+
23+
1. Click on green **Clone or download** button and choose Download ZIP.
24+
2. Find the downloaded zipped file on your pc and extract it.
25+
3. Then install nodejs in your local system
26+
4. Open Root Directory,
27+
5. Run commend.
28+
> ```npm run start```
29+
30+
Once you are done you can close the application in your terminal to quit the application.
31+
32+
---
33+
34+
## Try Out TodoList Demo
35+
36+
<a href="https://dsdmark.github.io/TodoList/" alt="TodoList Demo">TodoList Demo</a>
37+
38+
</div>
39+
40+
### Todo List
41+
42+
![Todo List perview](public/images/perview.gif "Todo List")
43+
44+
</div>
45+
46+
> If you have any issues with that Application feel free to let me know!
47+
48+
> If you are more interested, check out the collection of [ **CLIsapplications**](https://github.com/DSDmark/CLIsapplications"CLIsapplications").
49+
---
50+

‎assets/js/.index.js.swn‎

12 KB
Binary file not shown.

‎assets/js/.index.js.swo‎

12 KB
Binary file not shown.

‎assets/js/index.js‎

Lines changed: 73 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,80 @@
1-
const canvas = document.getElementById("cvs");
2-
const ctx = canvas.getContext("2d");
1+
const canvas = document.getElementById('cvs')
2+
const ctx = canvas.getContext('2d')
3+
const CH = (canvas.height = 300)
4+
const CW = (canvas.width = 600)
5+
canvas.style.background = 'black'
36

4-
const CH = (canvas.height = 300);
5-
const CW = (canvas.width = 600);
6-
canvas.style.background = "black";
7-
let cond = true;
8-
let i = 0, j = 0;
9-
let value = [CH];
10-
let range = CW / 20;
11-
for (let i = 0; i <= range; i++) {
12-
value[i] = Math.random() * (CH - 0 + 1) + 0;
13-
}
14-
console.log(value)
15-
16-
17-
const RandomWalker = {
18-
borderStyle: { size: 1, color: "white", style: "solid" },
19-
color: "white",
20-
draw(value) {
21-
canvas.style.border = `${this.borderStyle.size}px ${this.borderStyle.style} ${this.borderStyle.color}`;
22-
ctx.clearRect(0, 0, CH, CW);
23-
const lineSpacing = 10;
24-
ctx.lineWidth = 5;
25-
26-
27-
ctx.beginPath();
28-
for (let j = 0; j < value.length; j++) {
29-
const y = j * lineSpacing;
30-
ctx.moveTo(y, CH);
31-
ctx.lineTo(y, CH - value[j]);
32-
33-
}
34-
ctx.closePath();
35-
ctx.strokeStyle = this.color;
36-
ctx.stroke();
37-
},
38-
update() {
39-
40-
41-
if (value[j] > value[j + 1]) {
42-
[value[j], value[j + 1]] = [value[j + 1], value[j]];
43-
this.color = "white"
44-
}
45-
if (i < value.length) {
46-
j++;
47-
console.log(i, j)
48-
if (j >= value.length - i - 1) {
49-
this.color = "red"
50-
j = 0;
51-
i = i + 1;
52-
}
53-
} else {
54-
55-
cond = false;
56-
}
57-
this.draw(value);
7+
const BubbleSort = {
8+
i: 0,
9+
j: 0,
10+
seedValue: [CH],
11+
loopSpeed: 100,
12+
isLoop: true,
13+
borderStyle: { size: 1, color: 'white', style: 'solid' },
14+
color: 'white',
15+
sortedLine: null,
16+
draw() {
17+
canvas.style.border = `${this.borderStyle.size}px ${this.borderStyle.style} ${this.borderStyle.color}`
18+
ctx.clearRect(0, 0, CH, CW)
19+
const lineSpacing = 10
20+
ctx.lineWidth = 5
21+
22+
for (let j = 0; j < this.seedValue.length; j++) {
23+
const y = j * lineSpacing
24+
ctx.beginPath()
25+
ctx.moveTo(y, CH)
26+
ctx.lineTo(y, CH - this.seedValue[j])
27+
ctx.closePath()
28+
if (this.sortedLine === this.seedValue[j]) {
29+
this.color = 'red'
30+
ctx.strokeStyle = this.color
31+
ctx.stroke()
32+
} else {
33+
this.color = 'white'
34+
ctx.strokeStyle = this.color
35+
ctx.stroke()
36+
}
37+
}
38+
},
39+
update() {
40+
if (this.seedValue[this.j] > this.seedValue[this.j + 1]) {
41+
;[this.seedValue[this.j], this.seedValue[this.j + 1]] = [
42+
this.seedValue[this.j + 1],
43+
this.seedValue[this.j],
44+
]
45+
this.sortedLine = this.seedValue[this.j + 1]
46+
}
47+
if (this.i < this.seedValue.length) {
48+
this.j++
49+
if (this.j >= this.seedValue.length - this.i - 1) {
50+
this.color = 'red'
51+
this.j = 0
52+
this.i = this.i + 1
53+
}
54+
} else {
55+
this.isLoop = false
56+
}
57+
this.draw()
58+
},
59+
startup() {
60+
let range = CW / 20
5861

62+
for (this.i = 0; this.i <= range; this.i++) {
63+
this.seedValue[this.i] = Math.random() * (CH - 0 + 1) + 0
64+
}
65+
this.i = 0
66+
},
67+
}
5968

60-
},
61-
// BubbleSort(arr) {
62-
// if (arr.length === 0 || arr.length === 1) return;
63-
// // for (let i = 0; i < arr.length; i++) {
64-
// // for (let j = 0; j <= arr.length; j++) {
65-
// if (arr[j] > arr[j + 1]) {
66-
// [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
67-
// }
68-
// // }
69-
// // }
70-
// return arr;
71-
// },
72-
};
69+
// You could use window.requestAnimationFrame as well. but, for simplicity i'm using setInterval.
7370

7471
function render() {
75-
if (cond) {
76-
77-
setInterval(() => {
78-
RandomWalker.update();
79-
}, 100)
80-
}
72+
BubbleSort.startup()
73+
if (BubbleSort.isLoop) {
74+
setInterval(() => {
75+
BubbleSort.update(BubbleSort.seedValue)
76+
}, BubbleSort.loopSpeed)
77+
}
8178
}
8279

83-
render();
80+
render() // calling the main functions.

‎assets/js/index.js.save‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const canvas = document.getElementById('cvs') const ctx = canvas.getContext('2d') const CH =
2+
(canvas.height = 300) const CW = (canvas.width = 600) canvas.style.background = 'black'
3+
4+
// debugger;
5+
6+
const BubbleSort = { i: 0, j: 0, seedValue: [CH], loopSpeed: 100, isLoop: true, borderStyle:
7+
{ size: 1, color: 'white', style: 'solid' }, color: 'white', draw() {
8+
canvas.style.border = `${this.borderStyle.size}px ${this.borderStyle.style}
9+
${this.borderStyle.color}` ctx.clearRect(0, 0, CH, CW) const lineSpacing = 10
10+
ctx.lineWidth = 5
11+
12+
ctx.beginPath() for (let j = 0; j < this.seedValue.length; j++) {
13+
const y = j * lineSpacing ctx.moveTo(y, CH) ctx.lineTo(y, CH - this.seedValue[j])
14+
}
15+
ctx.closePath() ctx.strokeStyle = this.color ctx.stroke()
16+
},
17+
update() { if (this.seedValue[this.j] > this.seedValue[this.j + 1]) {
18+
[this.seedValue[this.j], this.seedValue[this.j + 1]] = [
19+
this.seedValue[this.j + 1], this.seedValue[this.j],
20+
] this.color = 'white'
21+
}
22+
console.log(this.seedValue.length,this.i); if (this.i < this.seedValue.length) {
23+
this.j++ console.log(this.i, this.j) if (this.j >= this.seedValue.length - this.i - 1)
24+
{
25+
this.color = 'red' this.j = 0 this.i = this.i + 1
26+
}
27+
} else {
28+
this.isLoop = false
29+
}
30+
this.draw()
31+
},
32+
startup() { let range = CW / 20
33+
34+
for (this.i = 0; this.i <= range; this.i++) { this.seedValue[this.i] = Math.random() *
35+
(CH - 0 + 1) + 0
36+
}
37+
this.i = 0;
38+
},
39+
}
40+
41+
// You could use window.requestAnimationFrame as well. but, for simplicity i'm using
42+
// setInterval.
43+
44+
function render() { BubbleSort.startup() if (BubbleSort.isLoop) {
45+
setInterval(() => {
46+
BubbleSort.update(BubbleSort.seedValue)
47+
}, BubbleSort.loopSpeed)
48+
}
49+
}
50+
51+
render() // calling the main functions.
52+
53+

‎index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Random Walker</title>
8-
<link rel="stylesheet" href="./assets/style/style.css">
9-
</head>
10-
<body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>BubbleSort-Visualization</title>
8+
<link rel="stylesheet" href="./assets/style/style.css" />
9+
</head>
10+
<body>
11+
<!-- The main section when all things will heppening -->
1112
<canvas id="cvs"></canvas>
1213
<script src="./assets/js/index.js"></script>
13-
</body>
14+
</body>
1415
</html>

0 commit comments

Comments
 (0)