From cf6b718ac997964a7bedef96adfffb5bf1934cdc Mon Sep 17 00:00:00 2001
From: Anthony Jerez <ajerez450@gmail.com>
Date: Sun, 1 Dec 2024 13:27:37 -0500
Subject: [PATCH 1/2] Completed-Solution

---
 package-lock.json | 4 ++--
 src/App.jsx       | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 254efeb..bd79634 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lab-react-trivia-solution",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lab-react-trivia-solution",
-      "version": "0.0.0",
+      "version": "0.2.0",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
diff --git a/src/App.jsx b/src/App.jsx
index b7bde75..e2737a2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,6 +14,13 @@ function App() {
     setSelectedAnswer(selection);
   };
 
+  const fetchNewQuestion = async () => {
+    const newQuestion = await fetch('https://opentdb.com/api.php?amount=1&category=9&type=multiple');
+    const newQuestionData = await newQuestion.json();
+    setSelectedAnswer(null);
+    setQuestionData(newQuestionData.results[0]);
+  }
+
   let card;
 
   if (selectedAnswer) {
@@ -41,7 +48,7 @@ function App() {
     <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 className="btn btn-success" onClick={fetchNewQuestion}>Next Question</button>
         {card}
       </div>
     </div>

From d02767f95d2c3aaa3df20fe3fd6e716724356421 Mon Sep 17 00:00:00 2001
From: Anthony Jerez <ajerez450@gmail.com>
Date: Sat, 11 Jan 2025 12:06:37 -0500
Subject: [PATCH 2/2] Added API request functionality for fetching questions

---
 src/App.jsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e2737a2..600e94b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,11 +15,21 @@ function App() {
   };
 
   const fetchNewQuestion = async () => {
-    const newQuestion = await fetch('https://opentdb.com/api.php?amount=1&category=9&type=multiple');
-    const newQuestionData = await newQuestion.json();
-    setSelectedAnswer(null);
-    setQuestionData(newQuestionData.results[0]);
-  }
+    try {
+      const response = await fetch('https://opentdb.com/api.php?amount=1&category=9&type=multiple');
+      if (!response.ok) {
+        throw new Error(`HTTP error. Status: ${response.status}`);
+      }
+      const newQuestionData = await response.json();
+      if (!newQuestionData.results || newQuestionData.results.length === 0) {
+        throw new Error('No questions found in API response.');
+      }
+      setSelectedAnswer(null);
+      setQuestionData(newQuestionData.results[0]);
+    } catch (error) {
+      console.error('Error fetching new question data: ', error.message);
+    }
+  };  
 
   let card;