Skip to content

Commit 47be28b

Browse files
elfgoddelfgodd
committed
Section 20: Advanced Circle Properties
1 parent 7b051ad commit 47be28b

5 files changed

Lines changed: 173 additions & 27 deletions

File tree

‎20-Drawing-Animations/01-timer/index.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// ******************************
2-
// What on Earth are Prototypes ******************************
3-
41
class Timer {
52
constructor(durationInput, startButton, pauseButton, callbacks) {
63
this.durationInput = durationInput
@@ -44,12 +41,12 @@ class Timer {
4441
// console.log('tick')
4542
if (this.timeRemaining <= 0) {
4643
this.pause()
47-
if(this.onComplete) {
44+
if (this.onComplete) {
4845
this.onComplete()
4946
}
5047
} else {
5148
this.timeRemaining = this.timeRemaining - 1
52-
if(this.onTick) {
49+
if (this.onTick) {
5350
this.onTick()
5451
}
5552
}
@@ -75,10 +72,10 @@ const timer = new Timer(durationInput, startButton, pauseButton, {
7572
console.log('Timer started')
7673
},
7774
onTick() {
78-
console.log('Timer just ticked down');
75+
console.log('Timer just ticked down')
7976
},
8077
onComplete() {
81-
console.log('Timer just completed');
78+
console.log('Timer just completed')
8279
},
8380
})
8481
// timer.start()

‎20-Drawing-Animations/02-timer-v2/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<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>Timer</title>
8+
</head>
9+
<body>
10+
<svg height="200" widht="200">
11+
<circle
12+
r="90"
13+
cx="100"
14+
cy="100"
15+
fill="transparent"
16+
stroke="blue"
17+
stroke-width="10"
18+
stroke-dasharray="560"
19+
stroke-offset="560"
20+
/>
21+
</svg>
22+
<input id="duration" value="30" />
23+
<button id="start">Start</button>
24+
<button id="pause">Pause</button>
25+
<script src="timer.js"></script>
26+
<script src="index.js"></script>
27+
</body>
28+
</html>

‎20-Drawing-Animations/02-timer-v2/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const durationInput = document.querySelector('#duration')
2+
const startButton = document.querySelector('#start')
3+
const pauseButton = document.querySelector('#pause')
4+
5+
// Create our instance of the timer and pass in those three elements
6+
// The fourth argument is going to be totally optional so we can use our timer with or without fourth argument
7+
const timer = new Timer(durationInput, startButton, pauseButton, {
8+
onStart() {
9+
console.log('Timer started')
10+
},
11+
onTick() {
12+
console.log('Timer just ticked down')
13+
},
14+
onComplete() {
15+
console.log('Timer just completed')
16+
},
17+
})
18+
// timer.start()
19+
20+
// ####################
21+
// ####################
22+
// version 1
23+
// tick = () => {
24+
// console.log('tick')
25+
// const timeRemaining = parseFloat(this.durationInput.value)
26+
// this.durationInput.value = timeRemaining - 1
27+
// }

‎20-Drawing-Animations/02-timer-v2/timer.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
class Timer {
2+
constructor(durationInput, startButton, pauseButton, callbacks) {
3+
this.durationInput = durationInput
4+
this.startButton = startButton
5+
this.pauseButton = pauseButton
6+
7+
// Callbacks are optional (logic for that)
8+
if (callbacks) {
9+
this.onStart = callbacks.onStart
10+
this.onTick = callbacks.onTick
11+
this.onComplete = callbacks.onComplete
12+
}
13+
14+
// start(){}, Calling the constructor anytime the user clicks on the start button
15+
this.startButton.addEventListener('click', this.start)
16+
this.pauseButton.addEventListener('click', this.pause)
17+
}
18+
19+
// start() {
20+
// // console.log('Time to start the timer!');
21+
// console.log(this);
22+
// }
23+
start = () => {
24+
if (this.onStart) {
25+
this.onStart()
26+
}
27+
// This runs on tick immediately
28+
this.tick()
29+
// const timer = setInterval(this.tick, 1000)
30+
this.interval = setInterval(this.tick, 1000)
31+
console.log(timer)
32+
// function that is built into the browser
33+
// clearInterval(timer)
34+
}
35+
36+
pause = () => {
37+
clearInterval(this.interval)
38+
}
39+
40+
tick = () => {
41+
// console.log('tick')
42+
if (this.timeRemaining <= 0) {
43+
this.pause()
44+
if (this.onComplete) {
45+
this.onComplete()
46+
}
47+
} else {
48+
this.timeRemaining = this.timeRemaining - 1
49+
if (this.onTick) {
50+
this.onTick()
51+
}
52+
}
53+
}
54+
55+
get timeRemaining() {
56+
return parseFloat(this.durationInput.value)
57+
}
58+
59+
set timeRemaining(time) {
60+
this.durationInput.value = time
61+
}
62+
}

‎20-Drawing-Animations/README.md‎

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## 19-Prototypes-Classes-And-The-New-Operator
22

3+
**folder 01**
4+
35
## 1. 06 Binding Events in a Class
46

57
## 2. 08 Determining the Value of 'This'
@@ -156,8 +158,7 @@ const timer = new Timer(durationInput, startButton, pauseButton, {
156158
onStart() {
157159
console.log('Timer started')
158160
},
159-
onTick() {
160-
},
161+
onTick() {},
161162
onComplete() {},
162163
})
163164
```
@@ -178,29 +179,60 @@ const timer = new Timer(durationInput, startButton, pauseButton, {
178179
}
179180
```
180181

181-
182182
## 8. 16 OnTick and OnComplete
183183

184184
```javascript
185-
if (callbacks) {
186-
this.onStart = callbacks.onStart
187-
this.onTick = callbacks.onTick
188-
this.onComplete = callbacks.onComplete
189-
}
185+
if (callbacks) {
186+
this.onStart = callbacks.onStart
187+
this.onTick = callbacks.onTick
188+
this.onComplete = callbacks.onComplete
189+
}
190190
```
191191

192192
```javascript
193-
tick = () => {
194-
if (this.timeRemaining <= 0) {
195-
this.pause()
196-
if(this.onComplete) {
197-
this.onComplete()
198-
}
199-
} else {
200-
this.timeRemaining = this.timeRemaining - 1
201-
if(this.onTick) {
202-
this.onTick()
203-
}
193+
tick = () => {
194+
if (this.timeRemaining <= 0) {
195+
this.pause()
196+
if (this.onComplete) {
197+
this.onComplete()
198+
}
199+
} else {
200+
this.timeRemaining = this.timeRemaining - 1
201+
if (this.onTick) {
202+
this.onTick()
204203
}
205204
}
206-
```
205+
}
206+
```
207+
208+
## 8. 17 Extracting Timer Code
209+
210+
**folder 02**
211+
212+
## 9. 18 Introducing SVG
213+
214+
```html
215+
<svg height="200" widht="200">
216+
<circle r="20" cx="30" cy="30" />
217+
</svg>
218+
```
219+
220+
## 10. 19 Rules of SVGs
221+
222+
The X axis increases from left to right and the Y axis increases from top to bottom
223+
224+
## 11. 20 Advanced Circle Properties
225+
226+
````html
227+
<circle
228+
r="90"
229+
cx="100"
230+
cy="100"
231+
fill="transparent"
232+
stroke="blue"
233+
stroke-width="10"
234+
stroke-dasharray="560"
235+
stroke-offset="560"
236+
/>
237+
````
238+

0 commit comments

Comments
 (0)