chippychoppy / react-state-events-self-assessment-100520

Good Drake, Bad Drake

Instructions

• fork and clone this repo and complete the deliverables below

Deliverables

• You will be given two objects:

  {"yes-image": "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQptvy1IuxkMzOgcsR_uWucIkwE67jI04GfUg&usqp=CAU", "yes-statement": "google the answer"}

  {"no-image": "https://thumbs.gfycat.com/ElaborateShinyBernesemountaindog-size_restricted.gif", "no-statement": "learn problem solving, syntax, reading documentation" }

• Your goal is to make your app look like the attached wireframe. There should be a statement and underneath that statement is the applicable "yes" or "no" image

• The DOM should first display the no-image and no-statement an img tag and h1 tag

• When the image is clicked, it should switch to the yes-image and yes-statement

• When the image is clicked a second time it should flip back

You are given an App.js file, an objects.js file which exports the two objects mentioned above, and a state-basic-assessment-wireframe file which has your wireframe. Use all the tools you have learned to build this app in the way you feel is best. CSS is not mandatory but should be worked on if you have time remaining

• You can run npm run lab to run tests but use a combination of TDD and BDD to verify functionality
• You can run npm submit to easily save and push up your work

Food for Thought

• Based on the attached wireframe how many components do you think you'll need?