stage 8

stages/classes.mjs

@@ -0,0 +1,34 @@
+export class Shape {
+  constructor(x, y, col) {
+    this.x = x;
+    this.y = y;
+    this.col = col;
+  }
+}
+
+export class Rectangle extends Shape {
+  constructor(x, y, width, height, col) {
+    super(x, y, col);
+    this.width = width;
+    this.height = height;
+  }
+
+  draw(ctx) {
+    ctx.fillStyle = this.col;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+  }
+}
+
+export class Circle extends Shape {
+  constructor(x, y, r, col) {
+    super(x, y, col);
+    this.r = r;
+  }
+
+  draw(ctx) {
+    ctx.fillStyle = this.col;
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}

stages/index.html

@@ -4,4 +4,4 @@
 <h1>Example</h1>
 <canvas width=800 height=800></canvas>
 
-<script src="index.js"></script>
+<script src="index.js" type="module"></script>

stages/index.js

@@ -1,44 +1,9 @@
 'use strict';
 /**
- * We refactor the `Rectangle` and `Circle` classes,
- * taking the common properties and functions and
- * moving them to a new _superclass_ called `Shape`.
+ * We moved the classes to a separate file called `classes.mjs`.
  */
 
-class Shape {
-  constructor(x, y, col) {
-    this.x = x;
-    this.y = y;
-    this.col = col;
-  }
-}
-
-class Rectangle extends Shape {
-  constructor(x, y, width, height, col) {
-    super(x, y, col);
-    this.width = width;
-    this.height = height;
-  }
-
-  draw(ctx) {
-    ctx.fillStyle = this.col;
-    ctx.fillRect(this.x, this.y, this.width, this.height);
-  }
-}
-
-class Circle extends Shape {
-  constructor(x, y, r, col) {
-    super(x, y, col);
-    this.r = r;
-  }
-
-  draw(ctx) {
-    ctx.fillStyle = this.col;
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
-    ctx.fill();
-  }
-}
+import { Circle, Rectangle } from './classes.mjs';
 
 // create circle and rectangle objects
 const rect1 = new Rectangle(100, 50, 100, 200, 'crimson');