Random Joke Generator using JavaScript

#webdev #javascript #beginners #api

Hello Guys! In this blog, I'm going to explain to you how to make a Joke Generator using JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<!-- Google Fonts  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Now let's design the container in our <body> tag. In the below HTML code, we have created a container that contains the <h1> tag for the heading. Then <p> tag with id 'joke' that holds our joke text. We are using id to uniquely grab the tag using JavaScript. Finally a <button> with type 'submit' and onclick event listener to fetch a new joke every time we click on the button.

<div class="container">
    <h1>Random Joke Generator</h1>
    <p> id="joke">
        You can get up to half a million dollars on the black market if you possess an authentic Chuck Norris pube.
    </p>
    <button> type="submit" class="btn" onclick="fetchJoke()">New joke</button>
</div>

Here is the final HTML code

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Random Joke Generator - @code.scientist</title>
</head>

<body>
    <div class="container">
        <h1>Random Joke Generator</h1>
        <p> id="joke">
            You can get up to half a million dollars on the black market if you possess an authentic Chuck Norris pube.
        </p>
        <button> type="submit" class="btn" onclick="fetchJoke()">New joke</button>
    </div>

</body>

</html>

Output Till Now

Let's understand CSS part

In the below CSS code.

We declare a * selectors for the font Poppins that we have imported in our head tag.
Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
Finally a container that contains all the elements that are heading, text(Joke), and button to generate a new joke.

* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid deepskyblue;
    padding: 40px;
    border-radius: 20px;
    width: 30rem;
}

#joke {
    font-style: italic;
}

.btn {
    height: 3rem;
    width: 8rem;
    border: 2px solid deepskyblue;
    background: deepskyblue;
    color: white;
    font-size: 16px;
    border-radius: 7px;
    padding: 8px;
    margin-top: 30px;
    cursor: pointer;
}

Output Till Now

Finally a JavaScript part

In the below javascript code, we just have a function that generates a new joke whenever it is called.
In the fetchJoke() function we use fetch API to get the response from the URL and stored it inside the response variable. Later we convert the response into a JSON object which consists of a random Joke. And finally, we grab the element with an id joke and set the joke to the element using DOM Manipulation.

const fetchJoke = async () => {
    let response = await fetch("https://api.chucknorris.io/jokes/random");
    let data = await response.json()
    document.getElementById("joke").innerText = data.value;
}

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More