fix TechStarHub#3 UI Created

backend/index.js

@@ -4,28 +4,34 @@ const path = require("path");
 const app = express();
 const port = 8000;
 
+var allowCrossDomain = function (req, res, next) {
+	res.header("Access-Control-Allow-Origin", "*");
+	res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
+	res.header("Access-Control-Allow-Headers", "Content-Type");
+	next();
+};
+app.use(allowCrossDomain);
 app.get("/", (req, res) => {
-  res.send({ message: "Hello World!" });
+	res.send({ message: "Hello World!" });
 });
 
 app.get("/rand", (req, res) => {
-  const randomQuote = getRandomQuote();
-  res.json({ quote: randomQuote });
+	const randomQuote = getRandomQuote();
+	res.json({ quote: randomQuote });
 });
 
-
 function getRandomQuote() {
-  const filePath = path.join(__dirname, "data", "quotes.json");
+	const filePath = path.join(__dirname, "data", "quotes.json");
 
-  const jsonData = fs.readFileSync(filePath, "utf8");
+	const jsonData = fs.readFileSync(filePath, "utf8");
 
-  const quotes = JSON.parse(jsonData);
+	const quotes = JSON.parse(jsonData);
 
-  const randomIndex = Math.floor(Math.random() * quotes.length);
+	const randomIndex = Math.floor(Math.random() * quotes.length);
 
-  return quotes[randomIndex];
+	return quotes[randomIndex];
 }
 
 app.listen(port, () => {
-  console.log(`Example app listening on port ${port}`);
+	console.log(`Example app listening on port ${port}`);
 });

frontend/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

frontend/src/App.jsx

@@ -1,13 +1,12 @@
-import React from 'react'
-
 import './App.css'
+import Home from './pages/Home.jsx';
 
 function App() {
 
   return (
     <>
       <div className="App">
-        Quotes 
+        <Home />
       </div>
     </>
   )

frontend/src/index.css

@@ -1,5 +1,67 @@
-*{
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+@import url("https://fonts.googleapis.com/css2?family=Irish+Grover&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inria+Sans:wght@300&family=Irish+Grover&display=swap");
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	background: #164863;
+}
+.quoteLogo {
+	color: #fff;
+	font-family: Irish Grover;
+	font-size: 3.75rem;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
+	margin-left: 2vh;
+}
+.quoteButton {
+	width: 6rem;
+	height: 2rem;
+	flex-shrink: 0;
+	color: #fff;
+
+	border-radius: 0.2875rem;
+	border: 2px solid #164863;
+	background: #427d9d;
+	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+.quote {
+	display: flex;
+	width: 47.9375rem;
+	height: 9.375rem;
+	flex-direction: column;
+	justify-content: center;
+	flex-shrink: 0;
+
+	color: #fff;
+	text-align: center;
+	font-family: Inria Sans;
+	font-size: 3.75rem;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
+}
+.quoteAuthor {
+	color: #fff;
+	text-align: center;
+	font-family: Inria Sans;
+	font-size: 2rem;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
+	margin-left: 30vh;
+}
+
+.content {
+	margin-top: 15vh;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	flex-direction: column;
+	height: 50vh;
+}
+
+quoteSymboll {
+	background: contain no-repeat;
+}

frontend/src/pages/Home.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import quoteRight from '../quote1.svg'
+import quoteLeft from '../quote2.svg'
+export default function Home() {
+
+	const [quotes, setquotes] = useState([]);
+	useEffect(() => {
+		axios.get('http://localhost:8000/rand')
+			.then(response => {
+				setquotes(response.data.quote);
+			})
+			.catch(error => {
+				console.log(error);
+			});
+	}, []);
+	const HandleClick = () => {
+		axios.get('http://localhost:8000/rand')
+			.then(response => {
+				setquotes(response.data.quote);
+			})
+			.catch(error => {
+				console.log(error);
+			});
+
+	}
+	const quote = quotes.quoteText
+	const quoteAuthor = quotes.quoteAuthor
+
+	return <div>
+		<div className="quoteLogo">Quote</div>
+		<div className="content">
+
+			<div className="quote">
+				<span className="quoteSymboll">
+					<img src={quoteRight} alt="" /> {quote} <img src={quoteLeft} alt="" />
+				</span>
+			</div>
+			<div className="quoteSymboll"></div>
+			<div className="quoteAuthor"> - {quoteAuthor}</div>
+			<button type="button" className="quoteButton" onClick={() => HandleClick()}>GET QUOTE</button>
+		</div>
+	</div>;
+}