From 0d88ae48e49c97292eeef084a3c5679d0abd16c7 Mon Sep 17 00:00:00 2001 From: Rumyra Date: Fri, 22 Jan 2021 17:22:36 +0000 Subject: [PATCH 1/4] adding top level await example to modules --- modules/top-level-await/data/colors.json | 7 +++ modules/top-level-await/index.html | 20 +++++++++ modules/top-level-await/main.js | 41 +++++++++++++++++ modules/top-level-await/modules/canvas.js | 47 ++++++++++++++++++++ modules/top-level-await/modules/circle.js | 40 +++++++++++++++++ modules/top-level-await/modules/getColors.js | 5 +++ modules/top-level-await/modules/square.js | 34 ++++++++++++++ modules/top-level-await/modules/triangle.js | 45 +++++++++++++++++++ 8 files changed, 239 insertions(+) create mode 100644 modules/top-level-await/data/colors.json create mode 100644 modules/top-level-await/index.html create mode 100644 modules/top-level-await/main.js create mode 100644 modules/top-level-await/modules/canvas.js create mode 100644 modules/top-level-await/modules/circle.js create mode 100644 modules/top-level-await/modules/getColors.js create mode 100644 modules/top-level-await/modules/square.js create mode 100644 modules/top-level-await/modules/triangle.js diff --git a/modules/top-level-await/data/colors.json b/modules/top-level-await/data/colors.json new file mode 100644 index 0000000..38e0ca1 --- /dev/null +++ b/modules/top-level-await/data/colors.json @@ -0,0 +1,7 @@ +{ + "yellow": "#F4D03F", + "green": "#52BE80", + "blue": "#5499C7", + "red": "#CD6155", + "orange": "#F39C12" +} \ No newline at end of file diff --git a/modules/top-level-await/index.html b/modules/top-level-await/index.html new file mode 100644 index 0000000..1fa4ed3 --- /dev/null +++ b/modules/top-level-await/index.html @@ -0,0 +1,20 @@ + + + + + Dynamic module class example + + + + + + + + + + diff --git a/modules/top-level-await/main.js b/modules/top-level-await/main.js new file mode 100644 index 0000000..60aeed8 --- /dev/null +++ b/modules/top-level-await/main.js @@ -0,0 +1,41 @@ +import { Canvas } from './modules/canvas.js'; +import colors from './modules/getColors.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 new file mode 100644 index 0000000..02dcc9a --- /dev/null +++ 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 new file mode 100644 index 0000000..062e7a6 --- /dev/null +++ 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 new file mode 100644 index 0000000..acfdbcb --- /dev/null +++ b/modules/top-level-await/modules/getColors.js @@ -0,0 +1,5 @@ +// fetch request +const colors = fetch('../data/colors.json') + .then(response => response.json()); + +export default await colors; \ No newline at end of file diff --git a/modules/top-level-await/modules/square.js b/modules/top-level-await/modules/square.js new file mode 100644 index 0000000..69f267e --- /dev/null +++ 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 new file mode 100644 index 0000000..ccdf87a --- /dev/null +++ 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 }; From e9e031298462fef6176e25c3d94b17500d949bb9 Mon Sep 17 00:00:00 2001 From: Rumyra Date: Fri, 22 Jan 2021 17:25:38 +0000 Subject: [PATCH 2/4] adding top level await example to modules --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b4c9a0c..c1960dc 100644 --- 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)). \ No newline at end of file +* [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)). \ No newline at end of file From 40488482791e2133c3490b4b0748ee8daf5d4efc Mon Sep 17 00:00:00 2001 From: Rumyra Date: Sun, 24 Jan 2021 13:18:34 +0000 Subject: [PATCH 3/4] small amend --- modules/top-level-await/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/top-level-await/main.js b/modules/top-level-await/main.js index 60aeed8..dc6e1c4 100644 --- a/modules/top-level-await/main.js +++ b/modules/top-level-await/main.js @@ -1,5 +1,5 @@ -import { Canvas } from './modules/canvas.js'; import colors from './modules/getColors.js'; +import { Canvas } from './modules/canvas.js'; let circleBtn = document.querySelector('.circle'); let squareBtn = document.querySelector('.square'); From 6271bdd927dde0528277806f4e82fa9b246a4b9e Mon Sep 17 00:00:00 2001 From: Rumyra Date: Mon, 25 Jan 2021 14:01:35 +0000 Subject: [PATCH 4/4] fixed issue --- modules/top-level-await/modules/getColors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/top-level-await/modules/getColors.js b/modules/top-level-await/modules/getColors.js index acfdbcb..60d4903 100644 --- a/modules/top-level-await/modules/getColors.js +++ b/modules/top-level-await/modules/getColors.js @@ -1,5 +1,5 @@ // fetch request -const colors = fetch('../data/colors.json') +const colors = fetch('/modules/top-level-await/data/colors.json') .then(response => response.json()); export default await colors; \ No newline at end of file