Random Joke Generator using JavaScript

Here I have shown you how to create Random Joke Generator using JavaScript. This project may generate random jokes using API links. For this you need to have a basic idea about HTML CSS and JavaScript.

Watch its live demo to learn how it works. First I made a box on the web page. Then I added a title here. Then here we have created an area in which all the joke generators can be seen. Below is a generate button that will generate a different joke each time you click on it.

Here I did not use any text manually. Here we have used API link which will collect all the information from other places with the help of fetch method and then display it in the webpage with the help of textContent.

Here I have shared step-by-step tutorial. First you create the HTML and CSS files then follow the steps below. If you want to download the source code, you can use the download link below the article.

HTML Code for Joke Generator

The code below is basically the HTML code needed to create this project. Here I have used a very small amount of HTML code.

First I added a heading then created a display using paragraphs. I created a button to generate joke.

<div class="wrapper">

  <!-- heading -->
     <span>Random Joke Generator</span>

  <!-- display -->
     <p id="joke"></p>

  <!-- generate button -->
     <button id="btn">Generate Joke</button>
</div>

CSS Code for Random Joke Generator

Now I have designed the basic structure of this Joke Generator using CSS codes.

Webpages have been designed using a small amount of CSS code. Here the background color of the web page is blue.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik",sans-serif;
}

body{
    background-color: #0772a7;
}

I have created the basic structure of this project using the following codes. Box width: 400px and its background color is white. With this we have created a box-shadow around here.

.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);
}

Now I have designed the heading. In the meantime I have added all the information for the heading. I have used font-size: 25px to increase the text size a bit and the color blue has been used

span{
    display: block;
    text-align: center;
    margin-top: -30px;
    color:#063f63;
    font-size: 25px;
    font-family: sans-serif;
    font-weight: 500;
}

Now I have designed the display. All content will be displayed in this display, meaning that the joke generated will be displayed in this paragraph tag. So no specific height is given here it will determine its own size based on the amount of content.

Here opacity: 0 is used. You may be wondering why opacity: 0 has been used here.

Optical Zero will help to hide all the information that is here under normal conditions.

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" we have used opacity: 1 which will help to show all the information in the display. This ".fade" will work when you click on the Generate button.

This means that when you click on the Generate button, a new joke will be generated and will be displayed on the display.

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

Now I have designed the generate button here. I have used font-size: 18px to increase the size of the text inside the button. Padding: 12px 25px helped to determine the size of the button.

button{
    display: block;
    font-size: 18px;
    color: #e7e7ec;
    font-weight: 500;
    padding: 12px 25px;
    margin: 0 auto;
    border-radius: 5px;
    background-color: #0354ab;
    border: none;
    padding: 5px;
    cursor: pointer;
    outline: none;
}

JavaScript of Random Joke Generator

Now is the time to fully implement this project with the help of JavaScript. As I said before, the API link here has helped to bring all this content from somewhere else.

First I set the constants to one of the two ID functions. The global constant is determined by the ID of the display that we first created using the paragraph and the ID of the button.

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

Now I have used the API link from which all the information will be collected.

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

First I have collected all the information from the URL using fetch method. Then I have arranged to show it in display through textContent.

I have instructed you to add "fade" to it so that you can see all that information.

let getJoke = () => {
    jokeContainer.classList.remove("fade");
    fetch(url)
    .then(data => data.json())
    .then(item =>{
        jokeContainer.textContent = `${item.joke}`;
        jokeContainer.classList.add("fade");
    });
}

Now it's time to activate the generate button. That calculation will be executed with the help of 'click'.

As a result, this calculation will work when you click on the button. This will generate a new joke and it will be seen in the display.

btn.addEventListener("click",getJoke);
getJoke();

`
Hope you know how I created the JavaScript Random Joke Generator project. If you have any questions, please let me know in the comments.

If you like this project, you must like the article. You can use this link to download the required source code.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/