From a4bdcf7457069033a382add1547ba7d33b229c14 Mon Sep 17 00:00:00 2001 From: Hossain Date: Fri, 25 Aug 2023 19:24:20 +0100 Subject: [PATCH 1/5] Update DisplayQuote.js --- src/App.js | 5 ++++ src/components/DisplayQuote.js | 49 ++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 src/components/DisplayQuote.js diff --git a/src/App.js b/src/App.js index 684c6eb..dabce24 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,15 @@ import React from 'react'; import './App.css'; import Calculator from './components/Calculator'; // Import the Calculator component +// import getJoke from './components/Quote'; +import JokeComponent from './components/DisplayQuote'; function App() { return (
+ {/* Quotes are Displayed here */} + + {/* */} {/* Add the Calculator component here */}
diff --git a/src/components/DisplayQuote.js b/src/components/DisplayQuote.js new file mode 100644 index 0000000..806d79c --- /dev/null +++ b/src/components/DisplayQuote.js @@ -0,0 +1,49 @@ +import React, { useState, useEffect } from 'react'; + +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 ( +
+ {loading &&

Loading...

} + {error && ( +
+

Error:

+ {/*

{error}

*/} +
+ )} + {joke && ( +
+

Joke of the Day:

+

{joke}

+
+ )} +
+ ); +}; + +export default JokeComponent; From eca24671d21a91ceabe10f02973915358522dcd8 Mon Sep 17 00:00:00 2001 From: Hossain Date: Fri, 25 Aug 2023 19:57:04 +0100 Subject: [PATCH 2/5] Update Quote display style --- src/App.css | 12 ++++++++++-- src/App.js | 1 - src/components/DisplayQuote.js | 5 +++-- src/styles/calculator.css | 4 ++-- src/styles/display-quote.css | 16 ++++++++++++++++ 5 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 src/styles/display-quote.css diff --git a/src/App.css b/src/App.css index 1ba9257..43350b9 100644 --- a/src/App.css +++ b/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%; +} diff --git a/src/App.js b/src/App.js index dabce24..829f374 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import React from 'react'; import './App.css'; import Calculator from './components/Calculator'; // Import the Calculator component -// import getJoke from './components/Quote'; import JokeComponent from './components/DisplayQuote'; function App() { diff --git a/src/components/DisplayQuote.js b/src/components/DisplayQuote.js index 806d79c..a756b3a 100644 --- a/src/components/DisplayQuote.js +++ b/src/components/DisplayQuote.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import '../styles/display-quote.css'; const JokeComponent = () => { const [joke, setJoke] = useState(null); @@ -37,8 +38,8 @@ const JokeComponent = () => { )} {joke && ( -
-

Joke of the Day:

+
+

Joke of the Day:

{joke}

)} diff --git a/src/styles/calculator.css b/src/styles/calculator.css index d072d35..043982c 100644 --- a/src/styles/calculator.css +++ b/src/styles/calculator.css @@ -1,6 +1,6 @@ .calculator-wrapper { - margin: 3%; - padding: 10%; + margin-right: 5%; + padding: 1%; display: flex; justify-content: center; } diff --git a/src/styles/display-quote.css b/src/styles/display-quote.css new file mode 100644 index 0000000..1ba47fd --- /dev/null +++ b/src/styles/display-quote.css @@ -0,0 +1,16 @@ +#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%; +} From fe32b2a0bbce9456d0f696db72742d761ba20269 Mon Sep 17 00:00:00 2001 From: Hossain Date: Fri, 25 Aug 2023 20:08:31 +0100 Subject: [PATCH 3/5] Update functional components to display quote --- src/App.js | 1 - src/styles/calculator.css | 49 ------------------------------------ src/styles/display-quote.css | 1 + 3 files changed, 1 insertion(+), 50 deletions(-) diff --git a/src/App.js b/src/App.js index 829f374..8492dfa 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,6 @@ function App() {
{/* Quotes are Displayed here */} - {/* */} {/* Add the Calculator component here */}
diff --git a/src/styles/calculator.css b/src/styles/calculator.css index 043982c..e69de29 100644 --- a/src/styles/calculator.css +++ b/src/styles/calculator.css @@ -1,49 +0,0 @@ -.calculator-wrapper { - margin-right: 5%; - padding: 1%; - display: flex; - justify-content: center; -} - -.display { - background: linear-gradient(to right, #858694, #424121); - color: #fff; - text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; - display: flex; - justify-content: flex-end; - padding: 2%; -} - -.operator { - display: grid; - grid-template-columns: repeat(4, 5em); - height: calc(35vh - 10px); -} - -.zero-btn { - grid-column: span 2; -} - -.operator-right-column { - background-color: #f5913e; -} - -button { - background-color: #e0e0e0; - border: 0.02px solid #fff; - width: 100%; - height: 100%; - font-size: 1em; -} - -.display .next { - align-self: flex-end; - margin: 0; - background-color: rgb(29, 17, 29); -} - -.display .total { - align-self: flex-end; - background-color: rgb(27, 15, 27); - margin: 2%; -} diff --git a/src/styles/display-quote.css b/src/styles/display-quote.css index 1ba47fd..8f8d9e3 100644 --- a/src/styles/display-quote.css +++ b/src/styles/display-quote.css @@ -1,3 +1,4 @@ + #display-joke { display: flex; flex-direction: column; From 3705862e792b6262d7ad102c1352fed986d5149f Mon Sep 17 00:00:00 2001 From: Hossain Date: Fri, 25 Aug 2023 20:09:18 +0100 Subject: [PATCH 4/5] Update style for quotes --- src/styles/calculator.css | 49 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/src/styles/calculator.css b/src/styles/calculator.css index e69de29..043982c 100644 --- a/src/styles/calculator.css +++ b/src/styles/calculator.css @@ -0,0 +1,49 @@ +.calculator-wrapper { + margin-right: 5%; + padding: 1%; + display: flex; + justify-content: center; +} + +.display { + background: linear-gradient(to right, #858694, #424121); + color: #fff; + text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; + display: flex; + justify-content: flex-end; + padding: 2%; +} + +.operator { + display: grid; + grid-template-columns: repeat(4, 5em); + height: calc(35vh - 10px); +} + +.zero-btn { + grid-column: span 2; +} + +.operator-right-column { + background-color: #f5913e; +} + +button { + background-color: #e0e0e0; + border: 0.02px solid #fff; + width: 100%; + height: 100%; + font-size: 1em; +} + +.display .next { + align-self: flex-end; + margin: 0; + background-color: rgb(29, 17, 29); +} + +.display .total { + align-self: flex-end; + background-color: rgb(27, 15, 27); + margin: 2%; +} From 8a9d21deb0914708a1ec3af745faa005c79bbdb2 Mon Sep 17 00:00:00 2001 From: Hossain Date: Sat, 26 Aug 2023 15:42:32 +0100 Subject: [PATCH 5/5] Update Quote component --- package-lock.json | 15 ++++-- package.json | 1 + src/App.js | 4 +- src/components/DisplayQuote.js | 83 ++++++++++++++++++++-------------- src/styles/display-quote.css | 6 +-- 5 files changed, 67 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d2736b..3f0264a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -19088,6 +19089,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -20783,9 +20792,9 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", "bin": { "uuid": "dist/bin/uuid" } diff --git a/package.json b/package.json index 30c8359..b594a2a 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index 8492dfa..be47105 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,13 @@ import React from 'react'; import './App.css'; import Calculator from './components/Calculator'; // Import the Calculator component -import JokeComponent from './components/DisplayQuote'; +import Quote from './components/DisplayQuote'; function App() { return (
{/* Quotes are Displayed here */} - + {/* Add the Calculator component here */}
diff --git a/src/components/DisplayQuote.js b/src/components/DisplayQuote.js index a756b3a..c3ffd8c 100644 --- a/src/components/DisplayQuote.js +++ b/src/components/DisplayQuote.js @@ -1,50 +1,65 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import '../styles/display-quote.css'; -const JokeComponent = () => { - const [joke, setJoke] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(false); +const uniqueID = 'Ixgm2cYnlo7wGSvmiMQCVvfUJ6kVeTvgNZShaXEC'; - useEffect(() => { - const myAPIKey = 'Ixgm2cYnlo7wGSvmiMQCVvfUJ6kVeTvgNZShaXEC'; - const apiURL = 'https://api.api-ninjas.com/v1/dadjokes?limit=1'; - - const options = { - method: 'GET', - headers: { 'X-Api-Key': myAPIKey }, - }; +function Quote() { + const [quoteText, setQuoteText] = useState(''); + const [authorText, setAuthor] = useState(''); + const [categoryText, setCategory] = useState(''); + const [isLoading, setIsLoading] = useState(true); + const [hasError, setHasError] = useState(false); - const fetchData = async () => { + useEffect(() => { + const fetchQuote = async () => { + setIsLoading(true); try { - const response = await fetch(apiURL, options); + const response = await fetch('https://api.api-ninjas.com/v1/quotes', { + headers: { + 'X-Api-Key': uniqueID, + }, + }); + if (!response.ok) { + throw new Error( + `API request failed with status code ${response.status}.`, + ); + } const data = await response.json(); - setJoke(data[0].joke); + setQuoteText(data[0].quote); + setAuthor(data[0].author); + setCategory(data[0].category); } catch (error) { - setError(true); + setHasError(true); } - setLoading(false); + setIsLoading(false); }; + fetchQuote(); + }, []); // Empty dependency array to run only once on initial component mount - fetchData(); // Call the function to fetch data when the component mounts - }, []); return ( -
- {loading &&

Loading...

} - {error && ( -
-

Error:

- {/*

{error}

*/} -
+
+

Quotes of the Day:

+ {isLoading &&

Loading Quote...

} + {hasError &&

Something wrong !

} + + {quoteText && ( +

+ " + {quoteText} + " +

)} - {joke && ( -
-

Joke of the Day:

-

{joke}

-
+
+
+ {authorText && ( +

+ {authorText} + ,  + {categoryText} +

)}
); -}; +} -export default JokeComponent; +export default Quote; diff --git a/src/styles/display-quote.css b/src/styles/display-quote.css index 8f8d9e3..f3e5972 100644 --- a/src/styles/display-quote.css +++ b/src/styles/display-quote.css @@ -1,16 +1,16 @@ -#display-joke { +#display-quote { display: flex; flex-direction: column; justify-content: space-between; } -#display-joke h4 { +#display-quote h4 { color: #fff; font-family: cursive; } -#display-joke p { +#display-quote p { color: #004; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; margin-top: 1.5%;