Random Joke Generator using JavaScript & API

In this article, you will learn how to create Random Joke Generator using JavaScript and API. JavaScript Joke Generator is a basic project for beginners who can generate random jokes. For this type of project, you can add content manually or with the help of API.

This type of project (random joke generator API) is much easier to create through API. The API helps you retrieve content from any other website and display it in places you like. Various websites provide such API links.

This type of project has a generate button. When you click on it, different content will start to be generated.

Joke Generator using Javascript Code

I used JavaScript HTML and CSS to create this joke API javascript. First I used HTML CSS to create its basic structure. I created a box on the webpage called Basic Structure to which I added a heading.

See the Pen Random Joke Generator using API by Raj Template (@RajTemplate) on CodePen.

 Created an area in which the content can be viewed and finally created a button that will generate a joke when clicked. I have also used JavaScript and API which will supply the content and activate the button.

Step 1: Basic structure of Joke Generator

I have used the following HTML code to create its basic structure. Here I used the box width: 400px and background-color: #fafdfd. With this, the four angles helped to make something round, border-radius: 5px.

<div class="wrapper">

</div>

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: "Rubik",sans-serif;

}

body{

    background-color: #0772a7;

}

.wrapper{

    width: 400px;

    padding: 50px 40px;

    background-color: #fafdfd;

    position: absolute;

    transform: translate(-50%, -50%);

    top: 50%;

    left: 50%;

    border-radius: 5px;

    box-shadow: 20px 20px 40px rgba(97,63,0,0.4);

}

Step 2: Add headings to enhance the beauty

Now I have an HTML tag that will basically work the title here. I used it mainly to enhance the beauty. Text-align: center to keep the text in the middle of the box and font-size: 25px to increase its size.

<span>Random Joke Generator</span>

span{

    display: block;

    text-align: center;

    margin-top: -30px;

    color:#063f63;

    font-size: 25px;

    font-family: sans-serif;

    font-weight: 500;

}

Step 3: Create a joke viewing area

Now I have created an area in which this joke can be seen. For this, we first created the area with the help of HTML paragraph tags. No specific width, the height of this area has been determined, it will determine its own size based on the amount of content.

Here we have used opacity: 0 which will normally hide everything in this area.

<p id="joke"></p>

p{

    font-size: 16px;

    box-shadow: 0 0 20px rgba(0,139,253,0.28);

    font-weight: 400;

    text-align: center;

    word-wrap: break-word;

    line-height: 35px;

    margin: 30px 0;

    opacity: 0;

}

Now using "fade" I have used opacity: 1. This means that when "fade" is effective, the contents of the display can be seen.

.fade{

    opacity: 1;

    transition: opacity 0.1s;

}

Step 4: Create a generate button using HTML

Now I have created a button that will generate jokes randomly. For this, I have used the button function of HTML.

<button id="btn">Generate Joke</button>

button{

    display: block;

    background-color: #0354ab;

    border: none;

    padding: 5px;

    font-size: 18px;

    color: #e7e7ec;

    font-weight: 500;

    padding: 12px 25px;

    margin: 0 auto;

    border-radius: 5px;

    cursor: pointer;

    outline: none;

}

Step 5: Activate Random Joke Generator with JavaScript

Hopefully following the steps above has created the basic structure of this project (joke generator using javascript code). Now is the time to implement this beautiful and simple random joke generator with the help of JavaScript.

First I set the constant of one of the display and button's ID functions.

const jokeContainer = document.getElementById("joke");

const btn = document.getElementById("btn");

Now I have added an API link to the project. As I said before API will help to bring all the content from any other website or source.

const url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";

I have made all the calculations in the constant called 'getJoke' how to generate joke.

 ➤ First I have instructed to remove "fade" using "classList.remove". With "fade" removed, nothing can be seen on the display.

 ➤ Then I saved all the data from the URL using the "fetch" method and arranged to display it in the display with the help of textContent.

 ➤ In the meantime, I have created a display using paragraph tags. Then instructed to add "fade" using classList.add. As a result, the text can be seen in the display.

let getJoke = () => {

    jokeContainer.classList.remove("fade");

    fetch(url)

    .then(data => data.json())

    .then(item =>{

        jokeContainer.textContent = `${item.joke}`;

        jokeContainer.classList.add("fade");

    });

}

Now I have activated the generate button. This generate button will help you to perform the calculation we added above.

When you click on the button, it will execute the above calculation (getJoke).

btn.addEventListener("click",getJoke);

getJoke();

I hope you understand from this tutorial how to make this Random Joke Generator using JavaScript and API. If there is any problem then you can definitely let me know by commenting. 

You will find the source code required for creating this project in the download button below. If you like this JavaScript Joke Generator then you must share it with your friends.

The download will start automatically