clock

iliakan · iliakan · commit cdc16934431a · 2019-03-07T10:36:07.000+03:00
diff --git a/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.md b/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.md
@@ -0,0 +1 @@
+[js src="solution.view/extended-clock.js"]
diff --git a/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/clock.js b/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/clock.js
@@ -1,9 +1,9 @@
 class Clock {
   constructor({ template }) {
-    this._template = template;
+    this.template = template;
   }
 
-  _render() {
+  render() {
     let date = new Date();
 
     let hours = date.getHours();
@@ -15,7 +15,7 @@ class Clock {
     let secs = date.getSeconds();
     if (secs < 10) secs = '0' + secs;
 
-    let output = this._template
+    let output = this.template
       .replace('h', hours)
       .replace('m', mins)
       .replace('s', secs);
@@ -24,11 +24,11 @@ class Clock {
   }
 
   stop() {
-    clearInterval(this._timer);
+    clearInterval(this.timer);
   }
 
   start() {
-    this._render();
-    this._timer = setInterval(() => this._render(), 1000);
+    this.render();
+    this.timer = setInterval(() => this.render(), 1000);
   }
 }
diff --git a/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js b/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
@@ -2,11 +2,11 @@ class ExtendedClock extends Clock {
   constructor(options) {
     super(options);
     let { precision=1000 } = options;
-    this._precision = precision;
+    this.precision = precision;
   }
 
   start() {
-    this._render();
-    this._timer = setInterval(() => this._render(), this._precision);
+    this.render();
+    this.timer = setInterval(() => this.render(), this.precision);
   }
 };
diff --git a/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/index.html b/1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/index.html
@@ -1,23 +1,12 @@
 <!DOCTYPE HTML>
-<html>
+<script src="clock.js"></script>
+<script src="extended-clock.js"></script>
 
-<head>
-  <title>Console clock</title>
-</head>
+<script>
+  let lowResolutionClock = new ExtendedClock({
+    template: 'h:m:s',
+    precision: 10000
+  });
 
-<body>
-
-  <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>
-
-</body>
-</html>
+  lowResolutionClock.start();
+</script>
diff --git a/1-js/09-classes/03-class-inheritance/2-clock-class-extended/source.view/clock.js b/1-js/09-classes/03-class-inheritance/2-clock-class-extended/source.view/clock.js
@@ -1,9 +1,9 @@
 class Clock {
   constructor({ template }) {
-    this._template = template;
+    this.template = template;
   }
 
-  _render() {
+  render() {
     let date = new Date();
 
     let hours = date.getHours();
@@ -15,7 +15,7 @@ class Clock {
     let secs = date.getSeconds();
     if (secs < 10) secs = '0' + secs;
 
-    let output = this._template
+    let output = this.template
       .replace('h', hours)
       .replace('m', mins)
       .replace('s', secs);
@@ -24,11 +24,11 @@ class Clock {
   }
 
   stop() {
-    clearInterval(this._timer);
+    clearInterval(this.timer);
   }
 
   start() {
-    this._render();
-    this._timer = setInterval(() => this._render(), 1000);
+    this.render();
+    this.timer = setInterval(() => this.render(), 1000);
   }
 }
diff --git a/1-js/09-classes/03-class-inheritance/2-clock-class-extended/source.view/index.html b/1-js/09-classes/03-class-inheritance/2-clock-class-extended/source.view/index.html
@@ -1,34 +1,21 @@
 <!DOCTYPE HTML>
-<html>
+<script src="clock.js"></script>
+<script>
+  let clock = new Clock({
+    template: 'h:m:s'
+  });
+  clock.start();
 
-<head>
-  <title>Console clock</title>
-</head>
 
-<body>
+  /* Your class should work like this: */
 
-  <!-- source clock -->
-  <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>
-
-</body>
+    let lowResolutionClock = new ExtendedClock({
+      template: 'h:m:s',
+      precision: 10000
+    });
 
-</html>
+    lowResolutionClock.start();
+  */
+</script>
diff --git a/1-js/09-classes/03-class-inheritance/2-clock-class-extended/task.md b/1-js/09-classes/03-class-inheritance/2-clock-class-extended/task.md
@@ -6,6 +6,9 @@ importance: 5
 
 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`

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+[js src="solution.view/extended-clock.js"]`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`	`1`	`class Clock {`
`2`	`2`	`constructor({ template }) {`
`3`		`- this._template = template;`
	`3`	`+ this.template = template;`
`4`	`4`	`}`
`5`	`5`
`6`		`- _render() {`
	`6`	`+ render() {`
`7`	`7`	`let date = new Date();`
`8`	`8`
`9`	`9`	`let hours = date.getHours();`
`@@ -15,7 +15,7 @@ class Clock {`
`15`	`15`	`let secs = date.getSeconds();`
`16`	`16`	`if (secs < 10) secs = '0' + secs;`
`17`	`17`
`18`		`- let output = this._template`
	`18`	`+ let output = this.template`
`19`	`19`	`.replace('h', hours)`
`20`	`20`	`.replace('m', mins)`
`21`	`21`	`.replace('s', secs);`
`@@ -24,11 +24,11 @@ class Clock {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`stop() {`
`27`		`- clearInterval(this._timer);`
	`27`	`+ clearInterval(this.timer);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`start() {`
`31`		`- this._render();`
`32`		`- this._timer = setInterval(() => this._render(), 1000);`
	`31`	`+ this.render();`
	`32`	`+ this.timer = setInterval(() => this.render(), 1000);`
`33`	`33`	`}`
`34`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,11 +2,11 @@ class ExtendedClock extends Clock {`
`2`	`2`	`constructor(options) {`
`3`	`3`	`super(options);`
`4`	`4`	`let { precision=1000 } = options;`
`5`		`- this._precision = precision;`
	`5`	`+ this.precision = precision;`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`start() {`
`9`		`- this._render();`
`10`		`- this._timer = setInterval(() => this._render(), this._precision);`
	`9`	`+ this.render();`
	`10`	`+ this.timer = setInterval(() => this.render(), this.precision);`
`11`	`11`	`}`
`12`	`12`	`};`