Categories: How toReact JS

How to Create a Random Quote Generator using an API?

Web developers have to make several projects to increase their understanding of that specific language and move up a level. One such project is Creating a React Random quote generator with API.

It is considered the starting point where one learns to integrate API in our project as it is one of the basic and easiest projects out there.

In this blog, we will be making a random quote generator with API. We will be using this API for our project.

Index

Creating our React App
Creating the UI Part
Using Hooks
Using the data from our API in the UI
Setting Random Colors on the button Click

Let’s start….

Creating our React App

We can very easily create our React App with the following command.

create-react-app random-quote-generator

For this to work, you should have npm and node installed in your system and then navigate using the cd command to the folder where you want to create your react app.

We will be using bootstrap for this project with its CDN link for CSS and JS Bundle. You can use the npm package React-Bootstrap also.

Creating the UI Part

This section is just the UI part. You can make your designs, and I am using Bootstrap and some vanilla CSS for styling.

import React from "react";
 
const App = () => {
  return (
    <>
      <div className="container">
        <div className="row" id="random">
          <h1 className="h1 col-12 text-center text-white">
            Random Quote Generator with API
          </h1>
          <div className="col-md-3 col-sm-2"></div>
          <div className="col-md-6 col-sm-8" id="quote">
            <div className="quote">
              Life isn’t about getting and having, it’s about giving and being.
            </div>
            <div className="author text-end py-3">
              ---"Kevin Kruse"
            </div>
            <div className="text-center my-3">
              <button id="btn" className="py-2 px-3">
                Next
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
 
export default App;

As for the CSS, copy the following –

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap');
 
body{
    font-family:  'Nunito', sans-serif;
    margin: 0;padding: 0;
}
.h1{
    margin-top: 5%;
    text-decoration: underline solid white;
    text-align: center;
    margin-bottom: 3%;
}
#quote{
    background-color: #fff;
    padding: 4%;
}
.quote{
    font-size: 25px;
    font-weight: 600;
}
.author{
    font-size: 20px;
    font-style: italic;
}
#btn{
    font-size: 25px;
    font-weight: 600;
    outline: none;
    background-color: rgb(104, 17, 185);
    border: transparent;
    color: white;
}

Using Hooks

We will be using both useState for state management and useEffect for API integration.

  const [quote, setQuote] = useState("");
  const [author, setAuthor] = useState("");

We are using two useStates for managing both quotes and the author states.

 const getQuotes = () => {
    fetch(
"https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
    )
      .then((res) => res.json())
      .then((data) => {
        let dataQ = data.quotes;
        let ranNum = Math.floor(Math.random() * dataQ.length);
        let ranQ = dataQ[ranNum];
        setQuote(ranQ.quote);
        setAuthor(ranQ.author);
      });
  useEffect(() => {
    getQuotes();
  }, []);

We will be using the JavaScript promise method for getting values from our API. You can also use async-await for the same purpose.

In the above code, we have created a random number with Math.random() and multiplied it by the length of our data within our API to get a random number between 0 and the length of our API, and there might be some numbers with decimals, and we don’t want that, so to make them whole numbers, we have used Math.floor().

Now ranQ.quotes has the data for that specific index number that Ranum will generate.

Using the data from our API in the UI

We will just use the States that we created for quotes and authors as seen in the code below –

 <div className="quote" style={{ color: `${hex}` }}>
     {quote}
  </div>
  <div className="author text-end py-3" style={{ color: `${hex}` }}>
     ---{author}
  </div>

And also we will be making our button perform the function by applying the onClick event handler.

<button id="btn" className="py-2 px-3" onClick={NextQuote}> Next</button>

const NextQuote = () => {
    getQuotes();
  };

Setting Random Colors on the button Click

Now, we have our random quote generator, and we can go one step forward and set the random color that will change the text and the background simultaneously when the button is clicked.

Just add the following code in the getQuotes function at the end.

 setHex("#" + Math.floor(Math.random() * 16777215).toString(16));

Now we have to make some changes to our UI. Fear not they are not that big, just adding styles to them.

      <div className="container" style={{ backgroundColor: `${hex}` }}>
        <div className="row" id="random">
          <h1 className="h1 col-12 text-center text-white">
            Random Quote Generator with API
          </h1>
          <div className="col-md-3 col-sm-2"></div>
          <div className="col-md-6 col-sm-8" id="quote">
          <div className="quote" style={{ color: `${hex}` }}>
              {quote}
            </div>
            <div className="author text-end py-3" style={{ color: `${hex}` }}>
              ---{author}
            </div>
            <div className="text-center my-3">
              <button id="btn" className="py-2 px-3" onClick={NextQuote}>
                Next
              </button>
            </div>
          </div>
        </div>
      </div>

And with this, our random quote generator with random color is finally completed.

You can add it to your portfolio and move to a different level to test out different APIs and do your stuff with it.

You can see it live here and if you want the complete code, visit my GitHub.

Ateev Duggal

I am Ateev Duggal, a front-end web developer, and a blogger. I write blogs mainly on React JS and have an experience of over 1.5 years of freelancing. I have worked on both static and dynamic projects again using React JS like a table to show clients data which was fetched using API, a review slider, pagination component, etc, and many websites like Parent, landing pages for Ataota, and many more. Some of my blogs have been published on freecodecamp, dev.to, Medium, geeks for geeks, and many other blogging platforms and developer's communities. My Primary skills not only include React JS but HTML5, CSS3, JS, Jquery, Git, and Bootstrap also. You can visit my GitHub Profile and LinkedIn profile for more information about me or you can visit my Website at tekolio.com