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 + } +];