Elamin-react-quiz

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 =============
  *

src/Question2-LionsExhibit.js

@@ -10,6 +10,13 @@
 
 import React from "react";
 
-const LionsExhibit = () => null;
+const LionsExhibit = () => {
+    return (
+        <article className="lions">
+            <h2>Lions</h2>
+            <p>The mane is the most recognisable feature of the species</p>
+        </article>
+    );
+};
 
 export default LionsExhibit;

src/Question3-TigersExhibit.js

@@ -18,12 +18,12 @@
 
 import React from "react";
 
-function TigersExhibit() {
+function TigersExhibit(props) {
   return (
     <div className="tigers">
       <h2>Tigers</h2>
-      <p>There are ... tigers in the world</p>
-      <ul>{/* DELETE THIS LINE AND WRITE THE ANSWER PART B HERE */}</ul>
+      <p>There are {props.population} tigers in the world</p>
+      <ul>{props.habitats.map((habit, index) => <li key={index}>{habit}</li>)}</ul>
     </div>
   );
 }

src/Question4-MonkeysExhibit.js

@@ -5,18 +5,20 @@
  */
 
 import React from "react";
+class MonkeysExhibit extends React.Component {
 
-function MonkeysExhibit(props) {
-  return (
-    <section className="monkeys">
-      <h2>Latin name: {props.latinName}</h2>
-      <ul>
-        {props.commonSpecies.map((speciesName, index) => {
-          return <li key={index}>{speciesName}</li>;
-        })}
-      </ul>
-    </section>
-  );
+  render() {
+    return (
+      <section className="monkeys">
+        <h2>Latin name: {this.props.latinName}</h2>
+        <ul>
+          {this.props.commonSpecies.map((speciesName, index) => {
+            return <li key={index}>{speciesName}</li>;
+          })}
+        </ul>
+      </section>
+    );
+  }
 }
 
 export default MonkeysExhibit;

src/Question5-AnimalSpotter.js

@@ -13,9 +13,11 @@ import React, { Component } from "react";
 class AnimalSpotter extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = { animalSpotted: 0 };
   }
-
+  spotAnimal = () => {
+    this.setState({ animalSpotted: ++this.state.animalSpotted })
+  };
   render() {
     return (
       <div className="animal-spotter">
@@ -28,7 +30,7 @@ class AnimalSpotter extends Component {
 
 function CounterButton(props) {
   return (
-    <button style={{ background: "lightseagreen", color: "white" }} onClick>
+    <button style={{ background: "lightseagreen", color: "white" }} onClick={props.handleClick}>
       I spotted an animal!
     </button>
   );

src/Question6-ImageGallery.js

@@ -17,13 +17,23 @@ class ImageGallery extends Component {
       imgSrc: null
     };
   }
-
+  componentDidMount() {
+    this.fetchData();
+  }
   fetchData = () => {
-    fetch().then(res => res.json());
+    fetch("https://auspicious-baritone.glitch.me/gorilla")
+      .then(res => res.json())
+      .then(src => {
+        this.setState({ imgSrc: src })
+      });
   };
 
   render() {
-    return <img src={this.state.imgSrc} alt="An animal" />;
+    if (this.state.imgSrc) {
+      return <img src={this.state.imgSrc} alt="An animal" />;
+    } else {
+      return <p>Image is loading....</p>
+    }
   }
 }
 

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 });

src/__tests__/Question2-LionsExhibit.test.js

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 
 import LionsExhibit from "../Question2-LionsExhibit";
 
-describe.skip("Question 2 - LionsExhibit", () => {
+describe("Question 2 - LionsExhibit", () => {
   it("renders an article with the class 'lions'", () => {
     const component = mount(<LionsExhibit />);
     expect(component.find("article.lions")).toHaveLength(1);

src/__tests__/Question3-TigersExhibit.test.js

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 
 import TigersExhibit from "../Question3-TigersExhibit";
 
-describe.skip("Question 3 - TigersExhibit", () => {
+describe("Question 3 - TigersExhibit", () => {
   it("renders the population count", () => {
     const component = mount(
       <TigersExhibit

src/__tests__/Question4-MonkeysExhibit.test.js

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 
 import MonkeysExhibit from "../Question4-MonkeysExhibit";
 
-describe.skip("Question 4 - MonkeysExhibit", () => {
+describe("Question 4 - MonkeysExhibit", () => {
   it("continues to render", () => {
     const component = mount(
       <MonkeysExhibit

src/__tests__/Question5-AnimalSpotter.test.js

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 
 import AnimalSpotter from "../Question5-AnimalSpotter";
 
-describe.skip("Question 5 - AnimalSpotter", () => {
+describe("Question 5 - AnimalSpotter", () => {
   it("shows an initial count", () => {
     const component = mount(<AnimalSpotter />);
     expect(component.find(".animal-spotter p").text()).toBe(

src/__tests__/Question6-ImageGallery.test.js

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 
 import ImageGallery from "../Question6-ImageGallery";
 
-describe.skip("Question 6 - ImageGallery", () => {
+describe("Question 6 - ImageGallery", () => {
   let deferred;
 
   beforeEach(() => {

src/__tests__/Question7-WindowSize.test.js

@@ -3,7 +3,7 @@ import { mount } from "enzyme";
 
 import WindowSize from "../Question7-WindowSize";
 
-describe.skip("Question 7 - WindowSize", () => {
+describe("Question 7 - WindowSize", () => {
   beforeEach(() => {
     window.removeEventListener = jest.fn();
   });