diff --git a/package-lock.json b/package-lock.json index a0b2a76..bb9eaa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2797,7 +2797,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2815,11 +2816,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2832,15 +2835,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2943,7 +2949,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2953,6 +2960,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2965,17 +2973,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2992,6 +3003,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3064,7 +3076,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3074,6 +3087,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3149,7 +3163,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3179,6 +3194,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3196,6 +3212,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3234,11 +3251,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -6802,7 +6821,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6820,11 +6840,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6837,15 +6859,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6948,7 +6973,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6958,6 +6984,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6970,17 +6997,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6997,6 +7027,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7069,7 +7100,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7079,6 +7111,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7154,7 +7187,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7184,6 +7218,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7201,6 +7236,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7239,11 +7275,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } } diff --git a/src/Question1-Header.js b/src/Question1-Header.js index 1527b3b..e88c4b3 100644 --- a/src/Question1-Header.js +++ b/src/Question1-Header.js @@ -1,5 +1,4 @@ -/* DELETE THIS LINE AND WRITE THE ANSWER TO QUESTION 1 HERE */ - +import React from "react"; /* * ============= Question 1 ============= * diff --git a/src/Question2-LionsExhibit.js b/src/Question2-LionsExhibit.js index b31af8c..368cb7c 100644 --- a/src/Question2-LionsExhibit.js +++ b/src/Question2-LionsExhibit.js @@ -10,6 +10,13 @@ import React from "react"; -const LionsExhibit = () => null; +const LionsExhibit = () => { + return ( +
+

Lions

+

The mane is the most recognisable feature of the species

+
+ ); +}; export default LionsExhibit; diff --git a/src/Question3-TigersExhibit.js b/src/Question3-TigersExhibit.js index ccfd252..2602ebf 100644 --- a/src/Question3-TigersExhibit.js +++ b/src/Question3-TigersExhibit.js @@ -18,12 +18,16 @@ import React from "react"; -function TigersExhibit() { +function TigersExhibit(props) { return (

Tigers

-

There are ... tigers in the world

- +

There are {props.population} tigers in the world

+
); } diff --git a/src/Question4-MonkeysExhibit.js b/src/Question4-MonkeysExhibit.js index bfefca0..717ad8a 100644 --- a/src/Question4-MonkeysExhibit.js +++ b/src/Question4-MonkeysExhibit.js @@ -4,19 +4,21 @@ * Convert the MonkeysExhibit component below to a class component. */ -import React from "react"; +import React, { Component } from "react"; -function MonkeysExhibit(props) { - return ( -
-

Latin name: {props.latinName}

- -
- ); +class MonkeysExhibit extends Component { + render() { + return ( +
+

Latin name: {this.props.latinName}

+ +
+ ); + } } export default MonkeysExhibit; diff --git a/src/Question5-AnimalSpotter.js b/src/Question5-AnimalSpotter.js index b7136a2..f344fd2 100644 --- a/src/Question5-AnimalSpotter.js +++ b/src/Question5-AnimalSpotter.js @@ -13,9 +13,19 @@ import React, { Component } from "react"; class AnimalSpotter extends Component { constructor(props) { super(props); - this.state = {}; + this.state = { + animalSpotted: 0 + }; } + spotAnimal = () => { + this.setState(previousState => { + return { + animalSpotted: previousState.animalSpotted + 1 + }; + }); + }; + render() { return (
@@ -28,7 +38,10 @@ class AnimalSpotter extends Component { function CounterButton(props) { return ( - ); diff --git a/src/Question6-ImageGallery.js b/src/Question6-ImageGallery.js index aac6043..f6184c6 100644 --- a/src/Question6-ImageGallery.js +++ b/src/Question6-ImageGallery.js @@ -14,16 +14,45 @@ class ImageGallery extends Component { constructor(props) { super(props); this.state = { - imgSrc: null + imgSrc: null, + isLoading: true }; } - fetchData = () => { - fetch().then(res => res.json()); - }; + componentDidMount() { + fetch("https://auspicious-baritone.glitch.me/gorilla") + .then(res => { + if (res.status >= 200 && res.status < 300) { + return res; + } else { + throw new Error("HTTP error"); + } + }) + .then(res => res.json()) + .then(data => { + // console.log(data); + this.setState({ + isLoading: false, + imgSrc: data + }); + }) + .catch(err => { + this.setState({ + isLoading: false, + error: err + }); + }); + console.log(this.state.err); + } render() { - return An animal; + if (this.state.isLoading) { + return Loading... 👽; + } else if (this.state.error) { + return Something went wrong 😭; + } else { + return An animal; + } } } diff --git a/src/Question7-WindowSize.js b/src/Question7-WindowSize.js index e4266bb..6c34cd4 100644 --- a/src/Question7-WindowSize.js +++ b/src/Question7-WindowSize.js @@ -28,6 +28,10 @@ export class WindowSize extends Component { window.addEventListener("resize", this.handleWindowResize); } + componentWillUnmount() { + window.removeEventListener("resize", this.handleWindowResize); + } + handleWindowResize = () => { console.log("Window was resized!", window.innerWidth); this.setState({ windowWidth: window.innerWidth });