TikTok Tutorial #20 - How to create a Random Bad Jokes Generator in CSS and JavaScript

Learn with us how to create a random bad jokes generator in CSS and Javascript!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim Bad jokes? Find the full code in bio 🤩 #webdevelopment #programmingexercises #javascriptprogramming #csscoding ♬ original sound - Creative Tim

Contents:
1. HTML Code
2. CSS Code
3. Javascript Code

Get your code ⬇️

1. HTML Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <title>Bad Jokes</title>
  </head>
  <body>
  
      <!-- container -->
      <div class="container">
        <!-- heading -->
        <h1>Bad Jokes 😆</h1>
        <!-- joke text -->
        <p class="joke-text">
          Joke Text Goes In Here...
        </p>
        <!-- buttons -->
        <div class="buttons">
          <!-- .new-joke Button -->
          <button class="btn new-joke-btn">New Joke</button>
          <!-- .tweet Button (actually a link). No href initially -->
          <a href="" class="btn tweet-btn" target="_blank" rel="noopener noreferrer">Share</a>
        </div>
      </div>
      
    
    <script type="text/javascript" src="./script.js"></script>
  </body>
</html>

2. CSS Code

/* common styles */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: #111;
  text-decoration: none;
}

.btn {
  padding: 10px 20px; /* top-bottom left-right */
  margin: 0 5px; /* top-bottom left-right */
  font-size: 0.99rem;
  border-radius: 3px;
  outline: none;
  border: none;
  color: #fff;
  background-color: blue; /* default color */
}

.btn:hover {
  cursor: pointer; /* hand symbol */
}

/* body */
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #1D3354;
  font-family: sans-serif;
  display: flex;
  justify-content: center; /* horizontally center */
  align-items: center; /* vertically center */
  text-align: center;
}

/* container */
.container {
  width: 450px;
  padding: 50px 20px; /* top-bottom left-right */
  background-color: #fff;
  border-radius: 5px;
}

/* h1 */
h1 {
  font-size: 1.1rem;
  color: #888;
  margin-bottom: 20px;
  text-decoration: underline;
}

/* .joke-text */
.joke-text {
  font-size: 1.8rem;
  margin-bottom: 30px;
  font-family: monospace;
}

/* .new-joke-btn */
.new-joke-btn {
  background-color: #3587A4;
}

/* .tweet-btn link */
.tweet-btn {
  background-color: #C1DFF0;
}

3. Javascript Code

// grab a reference for necessary HTML elements
// .joke-text
const jokeText = document.querySelector('.joke-text');
// .new-joke-btn 
const newJokeBtn = document.querySelector('.new-joke-btn');
// .tweet-btn (link)
const tweetBtn = document.querySelector('.tweet-btn');

// add 'click' eventListener to .new-joke-btn
newJokeBtn.addEventListener('click', getJoke);

// immediately call getJoke()
getJoke();

// getJoke() function definition
function getJoke() {
  // make an API request to https://icanhazdadjoke.com/'
  fetch('https://icanhazdadjoke.com/', {
    headers: {
      'Accept': 'application/json'
    }
  }).then(function(response) {
    /* convert Stringified JSON response to Javascript Object */
    return response.json();
  }).then(function(data) {
    /* replace innerText of .joke-text with data.joke */
    // extract the joke text
    const joke = data.joke;
    // do the replacement
    jokeText.innerText = joke;

    /* make the tweetBtn(.tweet-btn link) work by setting href */
    // create tweet link with joke
    const tweetLink = `https://twitter.com/share?text=${joke}`;
    // set the href
    tweetBtn.setAttribute('href', tweetLink);
  }).catch(function(error) {
    // if some error occured
    jokeText.innerText = 'Oops! Some error happened :(';
    // removes the old href from .tweet-btn if found any
    tweetBtn.removeAttribute('href');
    // console log the error
    console.log(error);
  });
}

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources:

Alexandra Murtaza

Alexandra Murtaza