In this article, we will create an application that uses an API to generate random quotes. The user will be given a button which on click will fetch a random quote from the API and display it on the screen. Users can generate many advices by clicking the button again. The button and the quotes are displayed beautifully using CSS styling to create a good user interface.
Let us have a look at how the final application will look like:
Prerequisites/Tecnologies Used
Approach:
We’re going to use React on the front end and we’ll make get requests to Advice Slip JSON API. After going through this article, you will have a strong understanding of basic React workflow as well as how to make API requests in React Apps. Learn how to fetch API data with React js.
Advice Slip JSON API: https://api.adviceslip.com/
Steps to create the application:
Step 1: create react app by the following command
npx create-react-app quote-generator-react
Step 2: Now, go to the folder
cd quote-generator-react
Step 3: Install the required dependencies
npm i axios
Project Structure: It will look like the following.
The updated dependencies in package.json will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Write the following code in respective files.
- index.html: This file is used to import font package and change the title
- App.js: In this, we will create a class-based App component in this app component we are going to have a State
- App..css: This file contains our styling code for our random quote generator app.
Javascript
// App.jsimport React from "react";import axios from "axios";import "./App.css";class App extends React.Component { state = { advice: "" }; componentDidMount() { this.fetchAdvice(); } fetchAdvice = () => { axios .then((response) => { const { advice } = response.data.slip; this.setState({ advice }); }) .catch((error) => { console.log(error); }); }; render() { const { advice } = this.state; return ( <div className="app"> <div className="card"> <h1 className="heading">{this.state.advice}</h1> <button className="button" onClick={this.fetchAdvice}> <span>Give Me Advice</span> </button> </div> </div> ); }}export default App; |
HTML
<!--index.html--><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content= "Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!--Fonts--> <link href= 400;500;600;700;800;900&display=swap" rel="stylesheet" /> <title>Quote Generator</title></head><body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div></body></html> |
CSS
/* App.css */#root, html, body { margin: 0; padding: 0; height: 100vh; box-sizing: border-box;} .app { height: 100%; background: linear-gradient( rgba(9, 9, 121, 100), rgba(0, 212, 255, 100) ); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center;} .card { background: whitesmoke; width: 40%; height: 30%; display: flex; align-items: center; flex-direction: column; border-radius: 25px; padding: 2%; box-shadow: 10px 10px;} .heading { display: flex; align-items: center; height: 350px; font-family: 'Spartan', sans-serif;} .button { position: relative; outline: none; text-decoration: none; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; text-transform: uppercase; height: 200px; width: 210px; opacity: 1; background-color: #ffffff; border: 1px solid rgba(22, 76, 167, 0.6);} .button span { color: #164ca7; font-size: 12px; font-weight: 500; letter-spacing: 0.7px;} .button:hover { animation: rotate 0.7s ease-in-out both;} .button:hover span { animation: storm 0.7s ease-in-out both; animation-delay: 0.06s;} @keyframes rotate { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(3deg) translate3d(0, 0, 0); } 50% { transform: rotate(-3deg) translate3d(0, 0, 0); } 75% { transform: rotate(1deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); }} @keyframes storm { 0% { transform: translate3d(0, 0, 0) translateZ(0); } 25% { transform: translate3d(4px, 0, 0) translateZ(0); } 50% { transform: translate3d(-3px, 0, 0) translateZ(0); } 75% { transform: translate3d(2px, 0, 0) translateZ(0); } 100% { transform: translate3d(0, 0, 0) translateZ(0); }}@media only screen and (max-width: 1007px) { .card { width: 60%; height: 30%; }} @media only screen and (max-width: 600px) { .card { width: 80%; height: 40%; }} |
Steps to run the application:
Step 1: Type the following command in your command line
npm start
Step 2: Open http://localhost:3000/ URL in the browser. It will display the result.
Output:
Quote Generator App using React
