Random Quote Generator App using ReactJS

Last Updated : 19 Jul, 2023

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.js
 
import React from "react";
import axios from "axios";
 
import "./App.css";
 
class App extends React.Component {
    state = { advice: "" };
 
    componentDidMount() {
        this.fetchAdvice();
    }
 
    fetchAdvice = () => {
        axios
            .get("https://api.adviceslip.com/advice")
            .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 rel="preconnect" href="https://fonts.gstatic.com" />
    <link href=
"https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;
            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

Suggest improvement

Create Rock Paper Scissor Game using ReactJS

What is the difference between Bootstrap v3 and v4 ?

Share your thoughts in the comments

Random Quote Generator App using ReactJS

Javascript

HTML

CSS

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?