Random jokes generator using API (Free)

   

     Today let's see how to create a random joke generator which will basically fetch the data from a free API. My main target is to show how to use API and put the data in HTML using javaScript. 

    Today we will use JokeApi website - https://sv443.net/jokeapi/v2/ . You can read the documentation from here. We will send an fetch request to - https://v2.jokeapi.dev/joke/Any?blacklistFlags=racist,sexist&type=single&idRange=0-319 . You can get this type of URL from JokeApi and any free API. You can replicate the same process for other APIs as well. 

    When we send request to this URL of the API, it will send back a response which is transformed into JSON format in JavaScript. Let's have a look on the sample JSON data - 

{
    "error": false,
    "category": "Pun",
    "type": "single",
    "joke": "I bought some shoes from a drug dealer. I don't know what he laced them with, but I was tripping all day!",
    "flags": {
        "nsfw": false,
        "religious": false,
        "political": false,
        "racist": false,
        "sexist": false,
        "explicit": false
    },
    "id": 204,
    "safe": false,
    "lang": "en"
}

    Our main data in this response are the category and joke portions. Using JavaScript these data strings will be inserted into the DOM. We will also have a button which onclick generates a new joke.
    For request sending we will use fetch() function which returns a promise and we will convert this into JSON and then by dot(.) operator we can access data strings like - data.category and data.joke apply them into the joke content box.

    ## HTML:

      
         <div class="jokes-container">
      <button onclick="generateJoke();">Generate Joke 😀</button>
      <div class="joke">
        <p id="joke-content"></p>
        <span id="joke-topic"></span>
      </div>
    </div>
      
    

   ## CSS:

      
        .jokes-container {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        font-family: "Montserrat", sans-serif;
      }

      .jokes-container button {
        font-family: "Montserrat", sans-serif;
        margin-bottom: 15px;
        background: #fff;
        border: 2px solid #009;
        color: #009;
        outline: none;
        padding: 4px 12px;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
          width: 100%;
        text-align: center;
      }

      .joke {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #222;
        border-radius: 5px;
        box-sizing: border-box;
        overflow: hidden;
      }

      .joke p {
        padding: 5px;
        margin: 5px;
        color: #fff;
        font-size: 18px;
      }

      .joke span {
        padding: 5px;
        background: #00ff99;
        width: 100%;
        text-align: center;
        color: #000;
      } 
    

    ## JavaScript:

  const jokeContent = document.getElementById("joke-content");
const jokeTopic = document.getElementById("joke-topic");

function generateJoke() {
  fetch(
    "https://v2.jokeapi.dev/joke/Any?blacklistFlags=racist,sexist&type=single&idRange=0-319"
  )
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      jokeContent.innerHTML = data.joke;
      jokeTopic.innerHTML = "" + data.category + "";
    });
}

generateJoke();
  

These coding you have to do. Now let's see a demo of our final output -

---

---

That's all for this post. Hope you have fully understood how to use an API and use the data in a webpage. Make sure to use other APIs also like - random-user-api, random-post-api etc. Make a Google search on free APIs and you will get plenty of them. Best of luck. Have a nice day . Bye....