Random Joke Generator using JavaScript
Hello Guys! In this blog, I'm going to explain to you how to make a Joke Generator using JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.
Let's cover the HTML part
HTML is a markup language. We use HTML to make the skeleton of a website.
Now let's import the font awesome CDN in our HTML head tag. fontawesome is a library that is used for icons in a website.
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in head tag.
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">Now let's design the container in our <body> tag. In the below HTML code, we have created a container that contains the <h1> tag for the heading. Then <p> tag with id 'joke' that holds our joke text. We are using id to uniquely grab the tag using JavaScript. Finally a <button> with type 'submit' and onclick event listener to fetch a new joke every time we click on the button.
<div class="container">
<h1>Random Joke Generator</h1>
<p> id="joke">
You can get up to half a million dollars on the black market if you possess an authentic Chuck Norris pube.
</p>
<button> type="submit" class="btn" onclick="fetchJoke()">New joke</button>
</div>Here is the Final HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Random Joke Generator - @code.scientist x @codingtorque</title>
</head>
<body>
<div class="container">
<h1>Random Joke Generator</h1>
<p> id="joke">
You can get up to half a million dollars on the black market if you possess an authentic Chuck Norris pube.
</p>
<button> type="submit" class="btn" onclick="fetchJoke()">New joke</button>
</div>
</body>
</html>Output Till Now
Let's understand CSS Part
In the below CSS code,
- We declare a * selectors to set the font Poppins that we have imported in our head tag.
- Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
- Finally a container that contains all the elements that are heading, text(Joke), and button to generate a new joke.
* {
font-family: 'Poppins', sans-serif;
}
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid deepskyblue;
padding: 40px;
border-radius: 20px;
width: 30rem;
}
#joke {
font-style: italic;
}
.btn {
height: 3rem;
width: 8rem;
border: 2px solid deepskyblue;
background: deepskyblue;
color: white;
font-size: 16px;
border-radius: 7px;
padding: 8px;
margin-top: 30px;
cursor: pointer;
}Output Till Now
Finally a JavaScript Part
In the below javascript code, we just have a function that generates a new joke whenever it is called.
In the fetchJoke() function we use fetch API to get the response from the API and stored it inside the response variable. Later we convert the response into a JSON object which consists of our joke. And finally, we grab the element with an id 'joke' and set the joke to the element using DOM Manipulation.
const fetchJoke = async () => {
let response = await fetch("https://api.chucknorris.io/jokes/random");
let data = await response.json()
document.getElementById("joke").innerText = data.value;
}