Languages

Random Joke Generator in Javascript

Application programming interface(API) enables one to get material from other websites and display it anywhere you wish.

This tutorial will teach you how to design a javaScript joke generator utilizing API links, a fantastic project for beginner developers to practice learning JavaScript.

Table of contents
Prerequisites
Objectives
Random Joke Generator Project Example
Conclusion
Further reading

Prerequisites

To follow this tutorial, the reader should have the following:

Essential expertise in HTML, CSS, and JavaScript.
A code editor, preferably Visual Code Studio.

Objectives

By the end of this tutorial, learners should be able to:

Design a basic HTML container to contain content.
Connect API links to get data from other web pages.
Assign actions to HTML buttons with eventListeners in javaScript.
Develop a complete functional random joke generator.

Random joke enerator project example

This project will generate random jokes using API links.

First, we will make a box on the web page and add a title. Then we will create an area in which all the joke generators will be seen.

Below the area will be a generate button that will generate a different joke each time it is clicked on.

We will not use any text manually. Here we will use an API link to collect all the information from other places with the help of the fetch method and then display it on the webpage with the help of textContent.

Create the following files:

index.html
style.css
app.js

This is the file structure.

Output file arrangement

Step 1: Basic structure of the joke generator

We will start by setting up the basic structure of the joke generator. The background-color of our basic box will be #0C0C0C and it will be 550px wide. We will use a border radius of 5px to round the edges of the box. Refer to the snippet below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Joke Generator</title>
  </head>
  <body>
    <!-- box -->
    <div class="box"></div>
  </body>
</html>

The box will be on the top center position of our page by setting its position to absolute, on the left side of our page, we will have 50% as well as the top and lastly, we will transform and translate our box from the top and left as -50%.

.box {
  width: 550px;
  padding: 40px 50px;
  background-color: #0c0c0c;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}

The box should resemble the following picture in appearance.

Output box

Step 2: Adding a title

The next step is to add a title.

The title is there to enhance the page's appearance. The title will be oriented center to keep it in the box and will be 24px in font size. See the example below.

span {
  display: block;
  text-align: center;
  font-size: 24px;
  letter-spacing: 1.5px;
  font-weight: 400;
}

After adding the title, we should have something close to this.

Output title

Step 3: Set up the joke viewing zone

Moving on to the third task, we will create an area to load all our jokes. This will be made possible by using <p> tags.

There is no need for a specific height and its size will be automatically determined based on the size of the content in it. It will have opacity set to 0 to visually hide everything in this section.

<div id="joke-section"></div>

p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  word-wrap: break-word;
  line-height: 35px;
  margin: 30px 0;
  opacity: 0;
}

Using .content-fade we will set the opacity to 1 which essentially means when the class .content-fade is effective we should be able to view our content.

.content-fade {
  opacity: 1;
  transition: opacity 0.1s;
}

So far, we should have the following, as displayed below.

Output joke container

Step 4: Set up the generate joke button

This button will help us generate random jokes when clicked. We will design the button using the code snippet below.

<input type="submit" id="btn" value="Generate Jokes" />

#btn {
  display: block;
  background-color: #0354ab;
  border: none;
  padding: 5px;
  font-size: 17px;
  color: #ececec;
  padding: 12px 25px;
  margin: 0 auto;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

Below is the output after adding the button.

Output button

Step 5: Activating the button

Since we have the required layout, it's time to implement this example with the help of javaScript. First, we must get the joke container and then generate joke button, as shown below.

// get the joke section container
let jokeSection = document.querySelector("#joke-section");
// get the generate joke button
let generateBtn = document.querySelector("#btn");

The next thing we have to do is include an API in our project to fetch content from other websites. Refer to the following code snippet.

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

Next, we will code a method and name it acquireJoke. This method will be ideal since it will help us achieve the following:

First, we will eliminate class .content-fade, ensuring that nothing can be viewed with the help of classList.remove.
The data obtained from the API using the fetch method will be arranged to display with the help of textContent.
We will create a display using paragraph tags and add class .content-fade using classList. As a result, our text will be seen in the display.

// method
function acquireJoke() {
  // remove content-fade class
  jokeSection.classList.remove("content-fade");
  // fetch joke from the API
  fetch(api)
    .then((info) => info.json())
    .then((item) => {
      jokeSection.textContent = `${item.joke}`;
      // add the content-fade class
      jokeSection.classList.add("content-fade");
    });
}

The last part is to assign the method we just created to display a joke whenever our button is clicked. The script will contain the code below.

generateBtn.addEventListener("click", acquireJoke);

Output joke

Conclusion

We have covered using API links to bring material from another website to your website and develop a random joke generator in javaScript.

You can access and download the complete source code for this practice project here.

Happy Coding!

Peer Review Contributions by: Briana Nzivu

Published on: Jan 27, 2022

Updated on: Jul 12, 2024

Random Joke Generator in Javascript

Table of contents #

Prerequisites #

Objectives #

Random joke enerator project example #

Step 1: Basic structure of the joke generator #

Step 2: Adding a title #

Step 3: Set up the joke viewing zone #

Step 4: Set up the generate joke button #

Step 5: Activating the button #

Conclusion #

Further reading #

Happy Coding! #

Start your journey with Cloudzilla

Table of contents