Here's the full frontend codes file by file
App.js
inside src
folder
import Quote from "./components/Quote";
import "./App.css";
function App() {
return (
<div>
<Quote />
</div>
);
}
export default App;
Quote.js
file inside components
subfolder in the src
folder:
import Nav from "./Nav";
import QuoteBody from "./QuoteBody";
import Footer from "./Footer";
const Quote = () => {
return (
<div>
<Nav />
<QuoteBody />
<Footer />
</div>
);
};
export default Quote;
QuoteBody.js
inside components
subfolder in the src
folder:
import React, { useState, useEffect } from "react";
import { FaTwitter, FaRandom } from "react-icons/fa";
import KantePic2 from "../images/p116594.png";
const api = `http://localhost:5000/api/quotes`; /*|| `${process.env.REACT_APP_API}/api/quotes`; */
const QuoteBody = () => {
const [quote, setQuotes] = useState("");
const [author, setAuthor] = useState("");
// Call Quotes API
useEffect(() => {
fetchQuotes();
}, []);
// Make the API request
const fetchQuotes = async () => {
try {
const res = await fetch(api);
const { quotes } = await res.json();
console.log(quotes);
// Get random quotes
let randomNum = Math.floor(Math.random() * quotes.length);
let randomQuote = quotes[randomNum];
setQuotes(randomQuote.quote);
setAuthor(randomQuote.author);
} catch (error) {
console.log(error);
}
};
// Handleclick function that will fetch the quotes
const handleClick = () => {
fetchQuotes();
};
// The functionality for sharing quotes on Twitter
let tweetURL = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;
return (
<section className="quote-body">
<div className="quote-container">
<img src={KantePic2} alt="Kante" className="kante-bg" />
<br />
<div className="quote">
<p className="quote-item">{quote}</p>
<p className="quote-author"> – {author}</p>
</div>
<div className="quote-btn-container">
{/* Twitter Button */}
<a className="btn tweet-btn" href={tweetURL} target="_blank">
<FaTwitter /> Tweet
</a>
{/* Random quote Button */}
<button onClick={handleClick} className="btn quote-btn">
<FaRandom /> New Quote
</button>
</div>
</div>
</section>
);
};
export default QuoteBody;
Nav.js
file inside components
subfolder in the src
folder:
import KanteHead from "../images/kantehead.png";
// Reloads the windo any thime invoked
const handleClick = () => {
return window.location.reload();
};
const Nav = () => {
return (
<div>
<nav className="navbar">
<div className="logo">
<a href="#" onClick={handleClick}>
<img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
</a>
<a href="#">
<h1 className="logo-text">
KANTE <br /> QUOTES
</h1>
</a>
</div>
<ul>
<li>
<a href="#"> Random Quote</a>
</li>
</ul>
</nav>
</div>
);
};
export default Nav;
Footer.js
file inside components
subfolder in the src
folder:
import KanteHead from "../images/kantehead.png";
// Reloads the windo any thime invoked
const handleClick = () => {
return window.location.reload();
};
const Nav = () => {
return (
<div>
<nav className="navbar">
<div className="logo">
<a href="#" onClick={handleClick}>
<img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
</a>
<a href="#">
<h1 className="logo-text">
KANTE <br /> QUOTES
</h1>
</a>
</div>
<ul>
<li>
<a href="#"> Random Quote</a>
</li>
</ul>
</nav>
</div>
);
};
export default Nav;
Footer.js
inside components
subfolder in the src
folder:
import React from "react";
const handleClick = () => {
return window.location.reload();
};
const Footer = () => {
return (
<section className="footer">
<div className="footer-items">
<p>
Made with the MERN Stack by Kolade Chris Ksound, <br />
Web developer and Technical Copywriter focusing on frontend
technologies and passionate Chelsea FC supporter. <br /> Dedicated to
N'golo Kante.
</p>
<ol>
<li>
<a href="#" onClick={handleClick}>
Random Quote
</a>
</li>
<li>
<a href="https://twitter.com/koladechris">Contact Developer</a>
</li>
</ol>
</div>
</section>
);
};
export default Footer;
You can find the project in this GitHub repo.