Skip to content

Commit 27ed4db

Browse files
elfgoddelfgodd
committed
Section 20: Starting and Pausing the Timer
1 parent f870ad6 commit 27ed4db

2 files changed

Lines changed: 69 additions & 13 deletions

File tree

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

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,36 @@ class Timer {
99

1010
// start(){}, Calling the constructor anytime the user clicks on the start button
1111
this.startButton.addEventListener('click', this.start)
12-
}
12+
this.pauseButton.addEventListener('click', this.pause)
13+
}
14+
15+
// start() {
16+
// // console.log('Time to start the timer!');
17+
// console.log(this);
18+
// }
19+
start = () => {
20+
// This runs on tick immediately
21+
this.tick()
22+
// const timer = setInterval(this.tick, 1000)
23+
this.interval = setInterval(this.tick, 1000)
24+
console.log(timer);
25+
// function that is built into the browser
26+
// clearInterval(timer)
27+
}
1328

14-
start() {
15-
// console.log('Time to start the timer!');
16-
console.log(this);
29+
pause = () => {
30+
clearInterval(this.interval)
31+
}
32+
33+
tick = () => {
34+
console.log('tick')
1735
}
1836
}
1937

2038
const durationInput = document.querySelector('#duration')
2139
const startButton = document.querySelector('#start')
22-
const pauseButton= document.querySelector('#pause')
40+
const pauseButton = document.querySelector('#pause')
2341

2442
// Create our instance of the timer and pass in those three elements
2543
const timer = new Timer(durationInput, startButton, pauseButton)
26-
27-
timer.start()
44+
// timer.start()

‎20-Drawing-Animations/README.md‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,28 +41,67 @@ R// 'this' is equal to the first argument of 'bind', 'call' or 'apply
4141
**bind, call and apply** are built-in functions that belong to all functions inside of JavaScript that we create
4242

4343
```javascript
44-
const printThis = function() {
44+
const printThis = function () {
4545
console.log(this)
4646
}
4747

48-
printThis.call({ color: 'red'})
49-
printThis.apply({ color: 'red'})
48+
printThis.call({ color: 'red' })
49+
printThis.apply({ color: 'red' })
5050
```
5151

5252
#### All other cases
53+
5354
'this' is equal to whatever is to the left of the '.' in the method call
5455

5556
```javascript
5657
const colors = {
5758
printColor() {
5859
console.log(this)
59-
}
60+
},
6061
}
6162

6263
const randomObject = {
63-
a: 1
64+
a: 1,
6465
}
6566

6667
randomObject.printColor = colors.printColor
6768
randomObject.printColor()
68-
```
69+
```
70+
71+
## 3. 10 Starting and Pausing the Timer
72+
73+
```javascript
74+
class Timer {
75+
constructor(durationInput, startButton, pauseButton) {
76+
this.durationInput = durationInput
77+
this.startButton = startButton
78+
this.pauseButton = pauseButton
79+
80+
// start(){}, Calling the constructor anytime the user clicks on the start button
81+
this.startButton.addEventListener('click', this.start)
82+
this.pauseButton.addEventListener('click', this.pause)
83+
}
84+
85+
// start() {
86+
// // console.log('Time to start the timer!');
87+
// console.log(this);
88+
// }
89+
start = () => {
90+
// This runs on tick immediately
91+
this.tick()
92+
// const timer = setInterval(this.tick, 1000)
93+
this.interval = setInterval(this.tick, 1000)
94+
console.log(timer)
95+
// function that is built into the browser
96+
// clearInterval(timer)
97+
}
98+
99+
pause = () => {
100+
clearInterval(this.interval)
101+
}
102+
103+
tick = () => {
104+
console.log('tick')
105+
}
106+
}
107+
```

0 commit comments

Comments
 (0)