Merge pull request #10 from Rumyra/await

top level await
mdn · Jan 25, 2021 · a99def0 · a99def0
2 parents 49bac64 + 6271bdd
commit a99def0
Show file tree

Hide file tree

Showing 9 changed files with 241 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -12,4 +12,5 @@ The "modules" directory contains a series of examples that explain how [JavaScri
 * [module-objects](modules/module-objects)): Shows how to import an entire module as an object using `import * as x from 'y.js'` syntax ([run the example live](http://mdn.github.io/js-examples/modules/module-objects)).
 * [classes](modules/classes): Provides an example of importing a class from a module ([run the example live](http://mdn.github.io/js-examples/modules/classes)).
 * [module-aggregation](modules/module-aggregation): Shows how sub module features can be aggregated into a parent module using `export { x } from 'y.js'` syntax ([run the example live](http://mdn.github.io/js-examples/modules/module-aggregation)).
-* [dynamic-module-imports](modules/dynamic-module-imports): Demonstrates dynamic module loading using `import().then()` ([run the example live](http://mdn.github.io/js-examples/modules/dynamic-module-imports)).
+* [dynamic-module-imports](modules/dynamic-module-imports): Demonstrates dynamic module loading using `import().then()` ([run the example live](http://mdn.github.io/js-examples/modules/dynamic-module-imports)).
+* [top-level-await](modules/top-level-await): An example of using the `await` keyword within a module ([run the example live](http://mdn.github.io/js-examples/modules/top-level-await)).
diff --git a/modules/top-level-await/data/colors.json b/modules/top-level-await/data/colors.json
@@ -0,0 +1,7 @@
+{
+  "yellow": "#F4D03F",
+  "green": "#52BE80",
+  "blue": "#5499C7",
+  "red": "#CD6155",
+  "orange": "#F39C12"
+}
diff --git a/modules/top-level-await/index.html b/modules/top-level-await/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Dynamic module class example</title>
+    <style>
+      canvas {
+        border: 1px solid black;
+        margin-top: 10px;
+      }
+    </style>
+    <script type="module" src="main.js"></script>
+  </head>
+  <body>
+    <button class="circle">Circle</button>
+    <button class="square">Square</button>
+    <button class="triangle">Triangle</button>
+
+  </body>
+</html>
diff --git a/modules/top-level-await/main.js b/modules/top-level-await/main.js
@@ -0,0 +1,41 @@
+import colors from './modules/getColors.js';
+import { Canvas } from './modules/canvas.js';
+
+let circleBtn = document.querySelector('.circle');
+let squareBtn = document.querySelector('.square');
+let triangleBtn = document.querySelector('.triangle');
+
+// create the canvas and reporting list
+let myCanvas = new Canvas('myCanvas', document.body, 480, 320);
+myCanvas.create();
+myCanvas.createReportList();
+
+// draw a square
+squareBtn.addEventListener('click', () => {
+  import('./modules/square.js').then((Module) => {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, colors.blue);
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});
+
+// draw a circle
+circleBtn.addEventListener('click', () => {
+  import('./modules/circle.js').then((Module) => {
+    let circle1 = new Module.Circle(myCanvas.ctx, myCanvas.listId, 75, 200, 100, colors.green);
+    circle1.draw();
+    circle1.reportArea();
+    circle1.reportPerimeter();
+  })
+});
+
+// draw a triangle
+triangleBtn.addEventListener('click', () => {
+  import('./modules/triangle.js').then((Module) => {
+    let triangle1 = new Module.Triangle(myCanvas.ctx, myCanvas.listId, 100, 75, 190, colors.yellow);
+    triangle1.draw();
+    triangle1.reportArea();
+    triangle1.reportPerimeter();
+  })
+});
diff --git a/modules/top-level-await/modules/canvas.js b/modules/top-level-await/modules/canvas.js
@@ -0,0 +1,47 @@
+class Canvas {
+  constructor(id, parent, width, height) {
+    this.id = id;
+    this.listId = null;
+    this.parent = parent;
+    this.width = width;
+    this.height = height;
+    this.ctx = null;
+  }
+
+  // new class stuff above here
+
+  create() {
+    if(this.ctx !== null) {
+      console.log('Canvas already created!');
+      return;
+    } else {
+      let divWrapper = document.createElement('div');
+      let canvasElem = document.createElement('canvas');
+      this.parent.appendChild(divWrapper);
+      divWrapper.appendChild(canvasElem);
+
+      divWrapper.id = this.id;
+      canvasElem.width = this.width;
+      canvasElem.height = this.height;
+
+      this.ctx = canvasElem.getContext('2d');
+    }
+  }
+
+  createReportList() {
+    if(this.listId !== null) {
+      console.log('Report list already created!');
+      return;
+    } else {
+      let list = document.createElement('ul');
+      list.id = this.id + '-reporter';
+
+      let canvasWrapper = document.getElementById(this.id);
+      canvasWrapper.appendChild(list);
+
+      this.listId = list.id;
+    }
+  }
+}
+
+export { Canvas };
diff --git a/modules/top-level-await/modules/circle.js b/modules/top-level-await/modules/circle.js
@@ -0,0 +1,40 @@
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+}
+
+class Circle {
+  constructor(ctx, listId, radius, x, y, color) {
+    this.ctx = ctx;
+    this.listId = listId;
+    this.radius = radius;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.name = 'circle';
+  }
+
+  draw() {
+    this.ctx.fillStyle = this.color;
+    this.ctx.beginPath();
+    this.ctx.arc(this.x, this.y, this.radius, degToRad(0), degToRad(360), false);
+    this.ctx.fill();
+  }
+
+  reportArea() {
+    let listItem = document.createElement('li');
+    listItem.textContent = `${this.name} area is ${Math.round(Math.PI * (this.radius * this.radius))}px squared.`
+
+    let list = document.getElementById(this.listId);
+    list.appendChild(listItem);
+  }
+
+  reportPerimeter() {
+    let listItem = document.createElement('li');
+    listItem.textContent = `${this.name} circumference is ${Math.round(2 * Math.PI * this.radius)}px.`
+
+    let list = document.getElementById(this.listId);
+    list.appendChild(listItem);
+  }
+}
+
+export { Circle };
diff --git a/modules/top-level-await/modules/getColors.js b/modules/top-level-await/modules/getColors.js
@@ -0,0 +1,5 @@
+// fetch request
+const colors = fetch('/modules/top-level-await/data/colors.json')
+	.then(response => response.json());
+
+export default await colors;
diff --git a/modules/top-level-await/modules/square.js b/modules/top-level-await/modules/square.js
@@ -0,0 +1,34 @@
+class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    this.ctx = ctx;
+    this.listId = listId;
+    this.length = length;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.name = 'square';
+  }
+
+  draw() {
+    this.ctx.fillStyle = this.color;
+    this.ctx.fillRect(this.x, this.y, this.length, this.length);
+  }
+
+  reportArea() {
+    let listItem = document.createElement('li');
+    listItem.textContent = `${this.name} area is ${this.length * this.length}px squared.`
+
+    let list = document.getElementById(this.listId);
+    list.appendChild(listItem);
+  }
+
+  reportPerimeter() {
+    let listItem = document.createElement('li');
+    listItem.textContent = `${this.name} perimeter is ${this.length * 4}px.`
+
+    let list = document.getElementById(this.listId);
+    list.appendChild(listItem);
+  }
+}
+
+export { Square };
diff --git a/modules/top-level-await/modules/triangle.js b/modules/top-level-await/modules/triangle.js
@@ -0,0 +1,45 @@
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+class Triangle {
+  constructor(ctx, listId, length, x, y, color) {
+    this.ctx = ctx;
+    this.listId = listId;
+    this.length = length;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.name = 'triangle';
+  }
+
+  draw() {
+    this.ctx.fillStyle = this.color;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.x, this.y);
+    this.ctx.lineTo(this.x + this.length, this.y);
+    let triHeight = (this.length/2) * Math.tan(degToRad(60));
+    this.ctx.lineTo(this.x + (this.length/2), this.y + triHeight);
+    this.ctx.lineTo(this.x, this.y);
+    this.ctx.fill();
+  }
+
+  reportArea() {
+    let listItem = document.createElement('li');
+    listItem.textContent = `${this.name} area is ${Math.round((Math.sqrt(3)/4)*(this.length * this.length))}px squared.`
+
+    let list = document.getElementById(this.listId);
+    list.appendChild(listItem);
+  }
+
+  reportPerimeter() {
+    let listItem = document.createElement('li');
+    listItem.textContent = `${this.name} perimeter is ${this.length * 3}px.`
+
+    let list = document.getElementById(this.listId);
+    list.appendChild(listItem);
+  }
+}
+
+export { Triangle };