jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

classes: remove patterns

Browse source
This commit is contained in:
Ilya Kantor 2019-04-21 13:40:15 +03:00
parent be9f48c2f2
commit b8eb04dfb6
76 changed files with 429 additions and 743 deletions
Download patch file Download diff file Expand all files Collapse all files

1
1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md Normal file
View file

@ -0,0 +1 @@
[js src="solution.view/extended-clock.js"]

34
1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js Normal file
View file

@ -0,0 +1,34 @@
class Clock {
constructor({ template }) {
this.template = template;
}
render() {
let date = new Date();
let hours = date.getHours();
if (hours < 10) hours = '0' + hours;
let mins = date.getMinutes();
if (mins < 10) mins = '0' + mins;
let secs = date.getSeconds();
if (secs < 10) secs = '0' + secs;
let output = this.template
.replace('h', hours)
.replace('m', mins)
.replace('s', secs);
console.log(output);
}
stop() {
clearInterval(this.timer);
}
start() {
this.render();
this.timer = setInterval(() => this.render(), 1000);
}
}

12
1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js Normal file
View file

@ -0,0 +1,12 @@
class ExtendedClock extends Clock {
constructor(options) {
super(options);
let { precision=1000 } = options;
this.precision = precision;
}
start() {
this.render();
this.timer = setInterval(() => this.render(), this.precision);
}
};

12
1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE HTML>
<script src="clock.js"></script>
<script src="extended-clock.js"></script>
<script>
let lowResolutionClock = new ExtendedClock({
template: 'h:m:s',
precision: 10000
});
lowResolutionClock.start();
</script>

34
1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js Normal file
View file

@ -0,0 +1,34 @@
class Clock {
constructor({ template }) {
this.template = template;
}
render() {
let date = new Date();
let hours = date.getHours();
if (hours < 10) hours = '0' + hours;
let mins = date.getMinutes();
if (mins < 10) mins = '0' + mins;
let secs = date.getSeconds();
if (secs < 10) secs = '0' + secs;
let output = this.template
.replace('h', hours)
.replace('m', mins)
.replace('s', secs);
console.log(output);
}
stop() {
clearInterval(this.timer);
}
start() {
this.render();
this.timer = setInterval(() => this.render(), 1000);
}
}

21
1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<script src="clock.js"></script>
<script>
let clock = new Clock({
template: 'h:m:s'
});
clock.start();
/* Your class should work like this: */
/*
let lowResolutionClock = new ExtendedClock({
template: 'h:m:s',
precision: 10000
});
lowResolutionClock.start();
*/
</script>

15
1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md Normal file
View file

@ -0,0 +1,15 @@
importance: 5
---
# Extended clock
We've got a `Clock` class. As of now, it prints the time every second.
[js src="source.view/clock.js"]
Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default.
- Your code should be in the file `extended-clock.js`
- Don't modify the original `clock.js`. Extend it.