How to Create a Random Joke Generator

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.

Leave a Comment

Your email address will not be published. Required fields are marked *