Create a Simple Random Quote Generator Using Jquery and Advice Slip Api

The task is to create a simple random quote generator using Jquery, with the help of advice slip api. This tutorial will guide you on how to build a quote generator and how to use api’s with Jquery.
You only need a basic knowledge of HTML5, CSS, JavaScript, and Jquery.

HTML

In this tutorial, we have created a div with class “wrapper” in our HTML file.

<div class=”wrapper”></div>

This will be a container for our main content.

In the div, we have inserted four different tags.

     <div class="wrapper">
      <h5 class="header"></h5>
      <p class="quote"></p>
      <img src="" alt="" srcset="" class="divider" />
      <div class="dice-btn">
        <img src="style/images/icon-dice.svg" alt="dice image" srcset="" />
      </div>
     </div>

The class "header" will contain the quote number.

The class "quote" will contain the random generated quotes.

The img tag is for decoration.

the class "dice-btn", will be the button with the function to generate new quotes when clicked. we chose to use this particular image because it looks cool, you can use any image of your choice or a button tag, if you want to stick to traditions.

CSS

Further, we have included some CSS codes to style our project.

 * {
  box-shadow: none;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

@media (min-width: 200px) {
  body {
    background-color: hsl(218, 23%, 16%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5%;
    padding-top: 35%;
  }
  body .wrapper {
    position: relative;
    background-color: hsl(217, 19%, 24%);
    border-radius: 0.8em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6%;
    margin-bottom: 6em;
  }
  body .wrapper .header {
    color: hsl(150, 100%, 66%);
    letter-spacing: 0.2em;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  body .wrapper p {
    color: hsl(193, 38%, 86%);
    font-size: x-large;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1.5em;
  }
  body .wrapper .divider {
    padding-bottom: 3em;
  }
  body .wrapper .dice-btn {
    position: absolute;
    bottom: -2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(150, 100%, 66%);
    height: 4em;
    width: 4em;
    border-radius: 50%;
  }
}
@media (min-width: 1020px) {
  body {
    padding-top: 10%;
  }
  body .wrapper {
    width: 40%;
    margin-bottom: 3em;
  }
  body .wrapper .header {
    font-size: medium;
    padding-top: 0;
    padding-bottom: 0;
  }
  body .wrapper p {
    font-size: larger;
  }
  body .wrapper .divider {
    padding-bottom: 0em;
  }
  body .wrapper .dice-btn {
    cursor: pointer;
    transition: 0.3s ease;
  }
  body .wrapper .dice-btn:hover {
    box-shadow: 1px 1px 10px 3px hsl(150, 100%, 66%);
  }
}
@media (min-width: 1440px) {
  body {
    padding-top: 20%;
  }
  body .wrapper {
    width: 30%;
    margin-bottom: 8em;
  }
  body .wrapper .header {
    font-size: large;
  }
  body .wrapper p {
    font-size: x-large;
  }
}

We also made it responsive to mobile and desktop screen size's.

Jquery

We included the Jquery codes by CDN. in-between the head tags, we created two <script> tags, which specifies the src attributes for linking the Jquery file to our HTML.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="script.js"></script>

And then, we added the following paths in the src attributes.

The CDN path in the first <script> tag , will make it possible to write jquery codes in out JavaScript file.

Now we move onto our script.js file, and begin to write our jquery codes to make our project functional.

First we added the ready() method in jquery.

 $(document).ready(function () {}

The ready() method is used to make a function available after the document is loaded. Whatever code one writes inside the $(document).ready() method will run once the page DOM is ready to execute JavaScript code.

Then we added a function called getAdvice().

  $(document).ready(function () {
   const getAdvice = async () => {};
 }

getAdvice function will be responsible for generating our random quotes using the get advice api.

Then we added two lines of codes into getAdvice.

  $(document).ready(function () {
   const getAdvice = async () => {
    const res = await fetch("https://api.adviceslip.com/advice");
    const data = await res.json();
  };
 }

The first line of codes in getAdvice function creates a variable "res", which holds the link to the get advice slip api, and will send a request using the fetch method.
The second line creates a variable "data", that receives the response of the advice slip api.

Then we added two more lines of codes to the getAdvice function.

 $(document).ready(function () {
   const getAdvice = async () => {
    const res = await fetch("https://api.adviceslip.com/advice");
    const data = await res.json();

    $(".header").html(`ADVICE #${data.slip.id}`);
    $(".quote").html(`"${data.slip.advice}"`);
  };

  getAdvice();
 }

This function sends a request to the advice slip api and appends its response to both the "header" and "quote" class in the HTML.

Then we added an onClick event to the dice button image (class="dice-btn") that calls up the getAdvice() function whenever the button is clicked.

 $(document).ready(function () {
   const getAdvice = async () => {
    const res = await fetch("https://api.adviceslip.com/advice");
    const data = await res.json();

    $(".header").html(`ADVICE #${data.slip.id}`);
    $(".quote").html(`"${data.slip.advice}"`);
  };

  getAdvice();

  $(".dice-btn").click(function () {
  getAdvice();
 }

Now we have a working quote generator.

Below is the result of our code.

You can visit the live site here.