From b335ec2b16a4127e0bad54514a093511aa9e4af4 Mon Sep 17 00:00:00 2001 From: h7x4 Date: Tue, 27 Oct 2020 02:30:35 +0100 Subject: [PATCH] Add exercise 8 --- Exercise 8/bar-chart-with-bars.html | 187 +++++++++++++++++++++++ Exercise 8/bar-chart-with-labels.html | 109 +++++++++++++ Exercise 8/bar-chart-with-lines.html | 55 +++++++ Exercise 8/income-greater-than-500k.html | 13 ++ Exercise 8/questions.txt | 46 ++++++ Exercise 8/taxForms.js | 17 +++ 6 files changed, 427 insertions(+) create mode 100644 Exercise 8/bar-chart-with-bars.html create mode 100644 Exercise 8/bar-chart-with-labels.html create mode 100644 Exercise 8/bar-chart-with-lines.html create mode 100644 Exercise 8/income-greater-than-500k.html create mode 100644 Exercise 8/questions.txt create mode 100644 Exercise 8/taxForms.js diff --git a/Exercise 8/bar-chart-with-bars.html b/Exercise 8/bar-chart-with-bars.html new file mode 100644 index 0000000..5b14b58 --- /dev/null +++ b/Exercise 8/bar-chart-with-bars.html @@ -0,0 +1,187 @@ + + + + Tax forms: Bar chart with lines + + + + + + + + + + diff --git a/Exercise 8/bar-chart-with-labels.html b/Exercise 8/bar-chart-with-labels.html new file mode 100644 index 0000000..33a958c --- /dev/null +++ b/Exercise 8/bar-chart-with-labels.html @@ -0,0 +1,109 @@ + + + + Tax forms: Bar chart with lines + + + + + + + + + + diff --git a/Exercise 8/bar-chart-with-lines.html b/Exercise 8/bar-chart-with-lines.html new file mode 100644 index 0000000..2cd4725 --- /dev/null +++ b/Exercise 8/bar-chart-with-lines.html @@ -0,0 +1,55 @@ + + + + Tax forms: Bar chart with lines + + + + + + + + + + diff --git a/Exercise 8/income-greater-than-500k.html b/Exercise 8/income-greater-than-500k.html new file mode 100644 index 0000000..eb5395f --- /dev/null +++ b/Exercise 8/income-greater-than-500k.html @@ -0,0 +1,13 @@ + + + + Income greather than 500 000 + + + + + + + diff --git a/Exercise 8/questions.txt b/Exercise 8/questions.txt new file mode 100644 index 0000000..ae4a3d6 --- /dev/null +++ b/Exercise 8/questions.txt @@ -0,0 +1,46 @@ +# Questions + +1. When calling `getContext('2d')` on a Canvas element, it will return a drawing context (i.e. the type of canvas) - in this case a two-dimensional context. How can we get a three-dimensional context instead? + +You could use any version of WebGL. Webgl is an API for rendering graphics on the web, with the help of things like hardware acceleration and compiled function libraries which will run a lot faster than interpreting everything as javascript. Most modern browsers have an implementation of WebGL. + +Example of usage: +```javascript + const ctx = canvas.getContext('webgl'); +``` + +2. How would you create a blue circle using the Canvas element? Explain with words or code. + +```javascript + const drawCircle = (x, y, radius) => { + context.beginPath(); + context.fillStyle('blue'); + context.arc(x,y,0, Math.PI*2); + context.fill(); + } + + drawCircle(); +``` + +3. What is a more terse (also known as shorter) way of writing the loop in the following usingthe Array.filter method? + +```javascript + const countries = ['Norway', 'Sweden', 'Denmark', 'New Zealand']; + const countriesStartingWithN = []; + + for (let i = 0; i < countries.length; i++) { + let country = countries[i]; + if (country.startsWith('N')) { + countriesStartingWithN.push(country); + } + } +``` +```javascript + const countries = ['Norway', 'Sweden', 'Denmark', 'New Zealand']; + + const countriesStartingWithN = countries.filter( + country => country.startsWith('n') + ); +``` + +[//]: # vim: set syntax=markdown: diff --git a/Exercise 8/taxForms.js b/Exercise 8/taxForms.js new file mode 100644 index 0000000..7807299 --- /dev/null +++ b/Exercise 8/taxForms.js @@ -0,0 +1,17 @@ +const taxForms = [ + { + realName: "Bruce Wayne", + income: 750000, + wealth: 300000 + }, + { + realName: "John Blake", + income: 440000, + wealth: 832000 + }, + { + realName: "Selina Kyle", + income: 640000, + wealth: 432000 + } +];