
This week, I intend to become more familiar with using APIs. My first API project is to build a Random Joke Generator that utilizes a joke API.
To begin, opened my terminal and created my project folder and files. In my JokeGenerator folder, I created index.html, style.css, app.js, and an img folder to contain any images that I might use.
Here is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke Generator</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
<div class="main_container">
<h3 class="page_title">Dad Jokes</h3>
<button class="btn" id="get_joke">Joke Button</button>
<div class="joke" id="joke">The Joke:</div>
</div>
<script src="app.js"></script>
</body>
</html>
Basically, I utilized the boiler plate html in VSCode, adding my title and link tags to connect my “style.css” and font-awesome for incorporating my images. Also, I added everything in the body element, which includes my div that contains the page title, button, and joke text element.

Next, I moved on to my JavaScript file: app.js:
// Declare variables
const jokeEl = document.getElementById('joke');
const get_joke = document.getElementById('get_joke');
const body = document.body;
// Array of background images
const backgroundImages = [
'url(img/smiley-4836178_1280.png)',
'url(img/smiley-4836191_1280.png)',
'url(img/tomato-8859478_1280.png)'
];
// Add EventListener to the button
get_joke.addEventListener('click', generateJoke);
// Generate joke function
async function generateJoke() {
// Call Icanhaz API
const jokeRes = await fetch('https://icanhazdadjoke.com/', {
headers: {
accept: 'application/json'
}
});
const joke =await jokeRes.json();
console.log(joke);
// Set Random Jokes
jokeEl.innerHTML = joke.joke;
// Set Random Background Image
const randomIndex = Math.floor(Math.random() * backgroundImages.length);
body.style.backgroundImage = backgroundImages[randomIndex];
body.style.backgroundSize = "cover";
body.style.backgroundPosition = "center";
body.style.transition = "background 0.5s ease-in-out";
}
First, I focused on fetching the jokes. I declared both “jokeEl” and “get_joke,” which are accessed by getElementById.
Then, I added an Event Listener to the click of the button to generate a joke, which references a function that I made to fetch the jokes from https://icanhazdadjoke.com and returned a json object.
In addition to the API call, I wanted to provide random background images when the button was clicked for another joke. I instantiated the variable “body”, an array containing my images, and a randomIndex variable that would randomly selected from the images, along with some css styling.

Finally, I built out my style.css:
.main_container {
background-color: white;
opacity: 50%;
}
.page_title {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.joke {
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 10px;
}
.btn {
position: relative;
background-color: greenyellow;
border-radius: 10px;
border: 0;
padding: 5px 10px;
font-size: 10px;
width: 50px;
box-shadow: 0 5px 15px;
}
.btn:active {
transform: scale(.9);
}
Here I used just some simple styling. I created a white, opaque box that contained the page’s text and button. I wanted the user to see the background image and button clearly, while comfortable able to read the jokes.
After building two of these random joke generators today, I feel that I have a little better grasp of how to access an API for my applications. And, I look forward to building various applications this week to strengthen my familiarity with incorporating them into my future projects.