Random Joke Generator Javascript | Html Css Joke Generator







Random Joke Generator Javascript | Html Css Joke Generator

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Random Joke Generator Javascript. We use HTML, Css, and javascript for the Random Joke Generator Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Random Joke Generator Javascript. 

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>Random Joke Generator</title>
  </head>
  <body>
  
      <!-- container -->
      <div class="container">
        <!-- heading -->
        <h1>Dad 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">Tweet!!</a>
        </div>
      </div>          
    <script type="text/javascript" src="./script.js"></script>
  </body>
</html>

There is all the HTML code for the Random Joke Generator Javascript. Now, you can see an output with a Random Joke Generator Javascript then we write javascript for the Random Joke Generator Javascript.

Output




random joke generator javascript

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: #6B2A7E;
  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: #FF0000;
}

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

Css Updated output

css jokes

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);
  });
}

Final output

random html code generator

Now that we have completed our javascript section, our updated output with javascript. Hope you like the Random Joke Generator Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
This post teaches us how to create a Random Joke Generator Javascript using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – thecodingpie

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript

Share on:

Leave a Comment