Tuesdays 6:30pm to 9pm

src/App.js

@@ -37,11 +37,34 @@ function App() {
     );
   }
 
+  const setQuestionCard = (event) =>
+  {
+
+    fetch('https://opentdb.com/api.php?amount=1&category=9&type=multiple')
+    .then((response) => response.json())
+    .then((data) =>{ 
+      console.log(data)
+      setQuestionData(data.results[0]);
+    });
+    setSelectedAnswer(false);
+    let options = [
+      questionData.correct_answer,
+      ...questionData.incorrect_answers,
+    ];
+    card = (
+      <QuestionCard
+        question={questionData.question}
+        options={shuffleArray(options)}
+        selectAnswer={selectAnswer}
+      />
+    );
+  }
+
   return (
     <div className="w-100 my-5 d-flex justify-content-center align-items-center">
       <div style={{ maxWidth: "45%" }}>
         <h1 className="text-center">Trivia App</h1>
-        <button className="btn btn-success">Next Question</button>
+        <button onClick={setQuestionCard} className="btn btn-success">Next Question</button>
         {card}
       </div>
     </div>

src/components/ResultCard.js

@@ -3,7 +3,7 @@ import React from "react";
 function ResultCard({ correct, answer }) {
   return (
     <>
-      <h2>You answer is {correct ? `correct ✅` : `wrong ❌`}</h2>
+      <h2>Your answer is {correct ? `correct ✅` : `wrong ❌`}</h2>
       {!correct && <p>The correct answer was {answer}</p>}
     </>
   );