Random Joke Generator using JavaScript
Tags: webdev, javascript, beginners, api
Published: 2022-08-17 15:27:52

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.

```html
<!-- 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.

```html
<!-- 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.


```html
<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**

```html
<!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**

![HTML Output of Joke Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5yidyn6akfqhwft4cwy.png)


## **Let's understand CSS part**
In the below CSS code. 
1. We declare a * selectors for the font Poppins that we have imported in our head tag.
2. Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
3. Finally a container that contains all the elements that are heading, text(Joke), and button to generate a new joke.


```css
* {
    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**

![CSS Output of Joke Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuzmghkmtfdtgdpybe94.PNG)

## **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. 

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