Random Joke Generator Javascript

Random Joke Generator Using JavaScript (Source Code)

Introduction

Random Joke Generator Using JavaScript (Source Code)

Welcome to the Another  Code With Random blog. This blog teaches us how to create a Random Joke Generator Using JavaScript. We’ll use HTML, CSS, and Javascript to build the Random Joke Generator. In this tutorial, we’ll learn how to integrate APIs using JavaScript. I hope you enjoy our blog, so let’s start with a basic HTML structure for the Random Jokes Generator Javascript.

Random Joke Generator Using JavaScript

What are you going to build?

A simple website that generates random jokes to brighten your day. Get a chuckle with just a click! Quick description. The Random Joke Generator is a specialized Javascript that leverages the capabilities of APIs to generate jokes for users. An API for the jokes is required 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 make a button for tweeting.

What you’ll be learning today?

In this post, you will learn how to integrate APIs in JavaScript where you’ll become aware of the fetch function and will get in-depth knowledge of APIs. In case you want to learn more about APIs in javascript you can refer to this document.

50+ HTML, CSS & JavaScript Projects With Source Code

HTML Code For Random Joke Generator

Below is the code for HTML that will implement the structure of our Website. You can further enhance this as per your learning perspective.

Create a file name as an Index.html and Add the following 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 Jokes 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 Jokes Generator Javascript. Now, you can see an output with a Random Jokes Generator Javascript then we write javascript for the Random Jokes Generator Javascript.

HTML Code Output

Random Joke Generator Using JavaScript

Gym Website Using HTML and CSS With Source Code

CSS Code For Random Jokes 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

ADVERTISEMENT

Final output Of Random Joke Generator Using JavaScript:-

random html code generator

ADVERTISEMENT

ADVERTISEMENT

Codepen Preview Of Random Joke Generator:

Below is the Random Funny Jokes Generator Codepen Preview for better visualizing the concept and project we’ve created.

ADVERTISEMENT

ADVERTISEMENT

Now that we have completed our javascript section, Hope you like the Random Funny Jokes Generator Javascript. You can Visualize 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

FAQs Related to Article

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.
Learn more about APIs from here

Which function is used to collect data from API?

We use the fetch method to fetch the data using the APIs. Read more about Fetch APIs from here.



Tags: , ,

Leave a Reply