stage 12

jacekkopecky · jacekkopecky · commit 6bbc890629fc · 2020-03-26T16:56:32.000Z
diff --git a/stages/classes.mjs b/stages/classes.mjs
@@ -16,6 +16,10 @@ export class Shape {
     this._x = val;
   }
 
+  get area() {
+    throw new Error('area is not a property of this shape');
+  }
+
   moveBy(x, y) {
     this._x += x;
     this._y += y;
@@ -29,6 +33,10 @@ export class Rectangle extends Shape {
     this._height = height;
   }
 
+  get area() {
+    return this._width * this._height;
+  }
+
   draw(ctx) {
     ctx.fillStyle = this._col;
     ctx.fillRect(this._x, this._y, this._width, this._height);
@@ -41,6 +49,10 @@ export class Circle extends Shape {
     this._r = r;
   }
 
+  get area() {
+    return Math.PI * this._r ** 2;
+  }
+
   draw(ctx) {
     ctx.fillStyle = this._col;
     ctx.beginPath();
diff --git a/stages/index.js b/stages/index.js
@@ -1,7 +1,8 @@
 'use strict';
 /**
- * Getters and setters can perform custom
- * code when a property is read or written.
+ * Getters can be used for computed properties.
+ *
+ * Here, shapes come with `.area`.
  */
 
 import { Circle, Rectangle } from './classes.mjs';
@@ -18,9 +19,6 @@ const shapes = [
 const ctx = document.querySelector('canvas').getContext('2d');
 
 for (const s of shapes) {
-  s.x = 50;
   s.draw(ctx);
-
-  // the following line would throw an error because 'hi' is not a number:
-  // s.x = 'hi';
+  console.log(s.area);
 }
