Create a Simple Random Quote Generator Using Jquery and Advice Slip Api
Tags: tutorial, learning, webdev, jquery
Published: 2023-12-08 16:24:26

 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.
```html
<div class=”wrapper”></div>
```
 This will be a container for our main content.
 
 In the div, we have inserted four different tags.
 ```html
     <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.
 ```CSS
 * {
  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.

```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.
 ```js
 $(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()`.
 ```js
  $(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`.
 ```js
  $(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.
 ```js
 $(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.
 ```js
 $(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.** 
![screenshot of our finished quote generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmwru9ms2bykur4a8din.png)
 
 You can visit the live site [here](https://advice-generator-mcbarna.netlify.app/).