How to Create a Random Joke Generator Application using HTML, CSS, and JavaScript

Published on Apr 19, 2024

Today we will create a Random Joke Generator app! Let’s take a look at the code for this app

We start with the document type declaration, which tells the browser that this is an HTML5 document.

Moving on to the opening of the <html> tag, we specify the language attribute as English with lang=”en”.

Within the <head> section, we have the character set meta tag specifying UTF-8 encoding for proper character rendering. The viewport meta tag ensures the page is scaled correctly on different devices. The <title> tag sets the title of the webpage to ‘Random Joke Generator’.

In the <body> section, we have a <div> element with a class of ‘container’ to hold the main content. Inside the div, there’s an <h1> heading element displaying ‘Random Joke Generator’ as the title. Following that, there’s a paragraph <p> with the id ‘joke’, displaying the message ‘Click the button below to generate a joke!’.

Lastly, we have a button element with the id ‘generate-btn’ and the text ‘Generate Joke’ as the button label.

And that’s the HTML code for our Random Joke Generator app!

Alright, now let’s dive into the CSS styling for our Random Joke Generator app. Here’s a breakdown of the CSS code:

First, the body selector applies styles to the entire page. We’ve set the font family to Arial, Helvetica, sans-serif for the text, removed any margin and padding around the body, and used flexbox to vertically and horizontally centre the content. The height property is set to 100vh to make sure the container fills the entire viewport, and the background-color is a light shade of grey.

The .container class styles our main content area. It has a white background, some padding, rounded corners, and a subtle box shadow to give it a raised appearance. The text within this container is centred.

The h1 tag inside the container has some bottom margin to create space below it.

The #joke ID targets the paragraph inside the container and gives it a maximum width of 500 pixels, a font size of 20 pixels, and some bottom margin for spacing.

Lastly, the #generate-btn ID styles the button. It has a green background colour, white text, padding for the inside spacing, borderless design, and rounded corners. The cursor changes to a pointer on hover, and there’s a smooth transition when the background colour changes.

That covers the CSS styling for our Random Joke Generator app!

Let’s explore the JavaScript code for our Random Joke Generator app

We have a <script> block that contains the functionality for generating a random joke when the button is clicked. Here’s the breakdown:

We first use document.getElementById(“generate-btn”) to target the ‘Generate Joke’ button, and then attach an event listener to it using addEventListener. This listener waits for a ‘click’ event on the button.

When the button is clicked, the function within the addEventListener block runs. It initiates a fetch request to the https://official-joke-api.appspot.com/random_joke API, which returns a random joke in JSON format.

The response from the API is handled with a promise. The first .then block converts the response to JSON format. The second .then block receives the JSON data and updates the content of the element with the ID ‘joke’ with the setup and punchline of the joke received from the API.

In case there’s an error during the fetch request, the .catch block logs the error to the console and updates the ‘joke’ element with a message indicating that the joke fetch has failed.

And that’s the JavaScript code for our Random Joke Generator app!

If you have any further questions or need additional details, feel free to ask in the Comment box!

Thanks for watching, and please subscribe to our channel for more updates.

 

Our Latest Blog

Java Programming

Introduction to Java Programming Getting Started with the Basics

Welcome to the innovative world of Java programming. Java is an important and powerful programming...
Read More
Reinforcement Learning

Future Trends in Reinforcement Learning Innovations and Opportunities

Reinforcement Learning (RL) is an important branch of artificial intelligence (AI) in which agents learn...
Read More
LSET's New Course

How LSET’s New Course Structure Enhances Your Learning Experience

LSET stands out for its commitment to nonstop enhancement in the ever-evolving geography of education....
Read More