Math magicians: fetch data from API

src/App.css

@@ -1,8 +1,16 @@
 * {
-  margin: auto;
+  margin: 0;
 }
 
 #logo {
-  margin: 3%;
+  margin-left: 3%;
+  margin-top: 3%;
   width: 4%;
 }
+
+.App {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3%;
+}

src/App.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import './App.css';
 import Calculator from './components/Calculator'; // Import the Calculator component
+import JokeComponent from './components/DisplayQuote';
 
 function App() {
   return (
     <div className="App">
+      {/* Quotes are Displayed here */}
+      <JokeComponent />
       {/* Add the Calculator component here */}
       <Calculator />
     </div>

src/components/DisplayQuote.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import '../styles/display-quote.css';
+
+const JokeComponent = () => {
+  const [joke, setJoke] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const myAPIKey = 'Ixgm2cYnlo7wGSvmiMQCVvfUJ6kVeTvgNZShaXEC';
+    const apiURL = 'https://api.api-ninjas.com/v1/dadjokes?limit=1';
+
+    const options = {
+      method: 'GET',
+      headers: { 'X-Api-Key': myAPIKey },
+    };
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(apiURL, options);
+        const data = await response.json();
+        setJoke(data[0].joke);
+      } catch (error) {
+        setError(true);
+      }
+      setLoading(false);
+    };
+
+    fetchData(); // Call the function to fetch data when the component mounts
+  }, []);
+  return (
+    <div>
+      {loading && <p>Loading...</p>}
+      {error && (
+        <div>
+          <p>Error:</p>
+          {/* <p>{error}</p> */}
+        </div>
+      )}
+      {joke && (
+        <div id="display-joke">
+          <h4>Joke of the Day:</h4>
+          <p>{joke}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default JokeComponent;

src/styles/calculator.css

@@ -1,6 +1,6 @@
 .calculator-wrapper {
-  margin: 3%;
-  padding: 10%;
+  margin-right: 5%;
+  padding: 1%;
   display: flex;
   justify-content: center;
 }

src/styles/display-quote.css

@@ -0,0 +1,17 @@
+
+#display-joke {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#display-joke h4 {
+  color: #fff;
+  font-family: cursive;
+}
+
+#display-joke p {
+  color: #004;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  margin-top: 1.5%;
+}