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 Spring Boot

Java Spring Boot: A Comprehensive Introduction to Microservices

Introduction to Java Spring Boot and Microservices Java Spring Boot has emerged as an important...
Read More
Fundamentals of Scala Programming

Mastering the Fundamentals of Scala Programming: A Complete Guide to Functional Programming

Introduction to Scala Programming Scala programming has gained immense popularity in recent years thanks to...
Read More
Java Programming

Java Basics for Beginners: A Step-by-Step Guide to Mastering Java Programming

Introduction to Java programming Java, a versatile and extensively utilised programming language, is popular among...
Read More