Free Coding Ebook 👉 Get Now

Random Joke Generator Using JavaScript (Source Code)

Welcome to the Code With Random blog. This blog teaches us how to create a Random Joke Generator Using 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.

Random Joke Generator Using JavaScript

An API for the jokes is required in order to build a joke generator. In this case, we’ve used the Dad API to generate new jokes. Whenever a user taps on one of the new jokes, we’ll ask the API to produce more jokes, and we’ll also make a button for tweeting.

50+ HTML, CSS & JavaScript Projects With Source Code

HTML Code For Random Joke Generator

<!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>

The structure for our joke generator will first be created using HTML, using the div element with the class container, the h1 tag to add the heading, and the p tag to add some eye-catching text inside our joke generator.

Simple Portfolio Website Using Html And Css With Source Code

Next, we’ll create the buttons for our joke generator and for the tweet using the div tag. To do so, use the a and button tags to make the button for joke generation.

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 Using JavaScript

Gym Website Using HTML and CSS With Source Code

CSS Code For Random Joke Generator

/* 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;
}

Step1:First, we will use the universal selector to add some standard styling to our project. Instead of using the browser’s default margin and padding, we will change the padding and margin to “zero”. We will also set the box dimension to “border-box” using the box-sizing property.

10+ HTML CSS Projects For Beginners (Source Code)

The font color will now be set to “black” using the a>, and the text ornament will be set to “none” using the text-decoration property. We will also set the font size to 0.99 rem using the class selector (.btn), and we will set the button’s background hue to blue using the background property.

/* 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 */
}

Step2:We are now going to style the substance of our joke generator. In addition to setting the background property to “purple” and the display property to “flex,” the breadth and height are set to 100 vw and 100 vh respectively.

In our project for the text, we will now style the button and the humorous text. We’ll use the font size property to fix the font size to 1.8 rem, and the margin bottom property to add a 30 px bottom margin.

Responsive Resume/CV Website Using HTML & CSS

The backdrop will be set to “red” using the background property, and a light blue background will be added for the tweeter button.

/* 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;
}

HTML + Css Updated output

Random Joke Generator Using JavaScript

JavaScript Code For Random Joke Generator

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

Inside javascript, first of all, using the document queryselector method, we will first select all the HTML elements we require in our joke generator, and then using the function getjoke(), we will fetch the jokes using the dad joke api link, collecting the response, and displaying it to the user. The tweet link will also be provided, or if there is an issue, an error message will be printed.

Restaurant Website Using HTML and CSS

Final output Of Random Joke Generator Using JavaScript:-

random html code generator

Codepen Preview Of Random Joke Generator:

<br /> See the Pen <a href="https://codepen.io/arun020/pen/bGxLrBp" target="_blank" rel="noopener"><br /> Untitled</a> by Arun (<a href="https://codepen.io/arun020" target="_blank" rel="noopener">@arun020</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

Now that we have completed our javascript section, 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!

Written by – Code With Random/Anki

Code By – thecodingpie

What is API?

API stands for application programming interface, which is a set of definitions and protocols for building and integrating application software. APIs are used to ease the work.
http://xyz.api-example.com/api/odata/businessobject/incidents?$search=Printer

Which function is used collect data from API?

We use fetch method to fetch the data using the API’s