HomeJavascriptRandom Joke Generator Javascript

Random Joke Generator Javascript

Welcome to today’s tutorial. Today we are going to create a random joke generator. For this, we are going to use HTML, CSS and Javascript. We use a Joke API in this tutorial.

The joke generator displays a random joke on every button click. You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project.

Video Tutorial:

If you prefer to code along with me, do check out the video tutorial below. Also, if you like the tutorial subscribe to my youtube channel. I post a new video tutorial every alternate day. 

 

Folder Structure:

Now before we move to the actual code let us first set up the project folder. We create a project folder Random Joke Generator. This folder consists of three files. The first is the HTML file index.html. Next one is the stylesheet style.css and the last one is the javascript file script.js.

HTML:

We start with the HTML section. First copy the code provided below into your HTML file.

The HTML code consists of a wrapper that encloses other elements. Inside the wrapper, we have, a laughing emoji. I have used the Unicode of laughing emoji – &128514 This emoji is wrapper inside a span element. Following the span is the p element where the joke is displayed. Lastly, we add a button with the id btn. The button consists of text – ‘Get Random Joke’.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Joke Generator</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <span>&#128514;</span>
        <p id="joke"></p>
        <button id="btn">Get Random Joke</button>
    </div>

    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>

CSS:

Next, we add styles to our generator. Copy the code below and paste it into your stylesheet style.css.

The CSS styles used here are pretty basic and self-explanatory. We make the usual CSS reset to remove the unwanted paddings and margins. For the background color with use #fab22e. We add dimensions to the wrapper. The wrapper is made 80vmin wide. Using the absolute position and translate we centre the wrapper. To make it stand out even more we add some box shadow to it.

We increase the font size of emoji and set it to 100px. Next, we style the paragraph text by adding line height and font size to the text.

We create a fade class that adds a fade-in animation to text. Next, We use javascript to add this effect to the text every time a new joke is displayed. Also add black background color to the button along with some padding.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik",sans-serif;
}
body{
    background-color: #fab22e;
}
.wrapper{
    width: 80vmin;
    padding: 50px 40px;
    background-color: #15161a;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    box-shadow: 20px 20px 40px rgba(97,63,0,0.4);
}
span{
    display: block;
    text-align: center;
    font-size: 100px;
}
p{
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
    word-wrap: break-word;
    line-height: 35px;
    margin: 30px 0;
    opacity: 0;
}
.fade{
    opacity: 1;
    transition: opacity 1.5s;
}
button{
    display: block;
    background-color: #fab22e;
    border: none;
    padding: 5px;
    font-size: 18px;
    color: #171721;
    font-weight: 600;
    padding: 12px 25px;
    margin: 0 auto;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

Javascript:

Next, we add functionality to this generator using Javascript. Now copy the code below and paste it into your javascript file.

We get the button and paragraph button and assign them to variables. Next, we create a constant and the API URL to it. I am using the Joke API by Sv443. We fetch and get a JSON response. This response is a JSON object. We need the joke key from this object. We extract the value of the joke key and display it in the p element.

Next, we add a click event to the button so that the getJoke function is run on every button click. And that’s it. Your joke generator is now ready. Go ahead and customize it the way you want.

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

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

 

RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

16 − twelve =

Most Popular

Dynamic color changer

Fruit Fall Game Javascript

Butterfly CSS Art