Merge pull request #9 from J2ZROMERO/logic

Add trivia API file and GUI

src/App.js

@@ -1,8 +1,42 @@
 /* eslint-disable */
-import Basic from "./components/basic_calculator";
+import React, { useState, useEffect } from 'react';
+import Basic from './components/basic_calculator';
+import QuoteDisplay from './components/quotes';
+import apiRequest from './api/ninja';
+
+
+
+(async () => {
+  const result = await apiRequest();
+  console.log(result);
+})();
+
 
 function App() {
-  return <Basic />;
+  const [randomQuote, setRandomQuote] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const quote = await apiRequest();
+        setRandomQuote(quote);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+ // Fetch data initially
+ fetchData();
+ // Set up interval to fetch data every 5 seconds
+ const intervalId = setInterval(fetchData, 8000);
+ // Clean up the interval when the component is unmounted
+ return () => clearInterval(intervalId);
+  }, []); // Empty dependency array means this effect runs once when the component mounts
+  return (
+    <div>
+      <Basic />
+      <QuoteDisplay quote={randomQuote} />
+    </div>
+  );
 }
 
 export default App;

src/api/ninja.js

@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+const apiRequest = async () => {
+try{
+    const requestAPI = await fetch('http://numbersapi.com/random/trivia',{
+    method: 'GET',
+    contentType: 'application/json',
+});
+
+const response = await requestAPI.text();
+return response;
+
+}
+
+catch(error){
+    console.error(error);   
+}
+
+
+}
+
+
+export default apiRequest;
+

src/components/quotes.js

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import React from 'react';
+
+const QuoteDisplay = (props) => {
+  return (
+    <div className="container mt-5">
+      <div className="card">
+        <div className="card-body">
+          <blockquote className="blockquote mb-0">
+            <p>TRIVIA MATH by   <a href='https://apilist.fun/category/math' >API list [...]</a> </p>
+
+
+
+            <footer className="blockquote-footer">{props.quote}</footer>
+          </blockquote>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuoteDisplay;