By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
Notification Show More
Latest News
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Create a Non-duplicated Collection
JavaScript Problem: Using Set to Create a Non-duplicated Collection
JavaScript
Aa
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > JavaScript > How To Make Random Joke Generator Using JavaScript Fetch API
JavaScript

How To Make Random Joke Generator Using JavaScript Fetch API

Admin
Last updated: 2022/11/30 at 4:29 AM
Admin
Share
9 Min Read
Random Joke Generator Using JavaScript

In this article, we are going to make random joke generator using JavaScript Fetch API, so in this we are having a joke here, and also we have the button whenever we will click this button we will generate a new joke for this we are going to see how we can fetch an API and get the data, and we can use it.

Contents
Pre-requisites To Make Random Joke Generator Using JavaScript Fetch APIAdjusting Default ValuesCustomizing The Joke ContainerCustomizing The ButtonAdding Functionality To Button & APIFull Source Code Of Random Joke Generator Using JavaScript Fetch APIindex.htmlstyle.cssmain.jsOutputYou may also like:

Pre-requisites To Make Random Joke Generator Using JavaScript Fetch API

  • Basic knowledge of HTML.
  • Good knowledge of CSS & CSS3.
  • Good knowledge of JavaScript.
View Demo

Adjusting Default Values

<body>
  <section>
    <h1 class="title">Random Dad Jokes Generator</h1>
    <div class="container">
      <div class="joke">
        <p></p>
      </div>
      <button>Get a Dad Joke</button>
    </div>
  </section>
	<script src ="main.js"></script>
</body>

So first of all we need to create the layout, so here let’s say that in the body we will have a section and in the section first of all let’s say that we will have div with a class of container so now and in the container we will have a div with a class of joke, and also we will have a button so which will basically generate the jokes, and let’s actually also link our style sheet so link CSS and also link the script tag here.

@import url("<https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap>");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-family: "Montserrat";
  font-size: 10px;
}
body {
  background-color: rgb(37, 38, 39);
  color: white;
}
section {
  min-height: 100vh;
  width: 100%;
  padding: 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

In our style.css, we need the font, so we already selected the font we are going to use Montserrat and also 300 and 700 you can get the font from the Google fonts.com, after that lets get the basic style which is margin 0 and padding 0 and also say that box sizing will be the border box and after that lets come to the HTML and say that font size will be 10 pixels and also said that font family I want is the Montserrat.

Let’s come to the body and give the background color it will be a dark color after that let’s say that the color we want is the white, after that lets come to the section the min height will be 100vh and also say that width will be 100% and padding will be 100 pixels and 0 also let’s make a display flex and align item center and justify content also center.

Random Joke Generator Using JavaScript

Customizing The Joke Container

.title {
  position: absolute;
  top: 50px;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  background-color: rgb(51, 55, 59);
  border-radius: 8px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
}
.container p {
  font-size: 2rem;
  font-weight: 300;
  line-height: 3rem;
  text-align: justify;
  color: aqua;
}

After that lets come to the container, let’s say that width will be 90% and also say that max width will be something like 500 pixels now we need the margin 0 and auto, let’s have a background color like rgb (51, 55, 59) after that let’s have a border radius to 8 pixels also let’s have a padding of 3rem and display flex with flex direction to column.

Let’s style the paragraph element, let’s say that the font size will be something like 2 rem and font weight 300 and also say that line height is 3rem after that lets have a text alignment to justify with color aqua, so it will look good.

Now for title, let’s set position to absolute with top 50 pixels now let’s add font size 3rem and font weight to 700 also text alignment to center.

Random Joke Generator Using JavaScript

Customizing The Button

button {
  margin-top: 40px;
  width: fit-content;
  padding: 2rem;
  font-size: 2rem;
  background-color: rgb(25, 28, 29);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-end;
}

Let’s extend the button here, so button will be emerging top will be something like 40px, and width will be fit content and also say that padding is 2rem now let’s increase the font size, so font size will be 2rem and also background color we want a dark color also let us make the white color for the text looking good and let’s have border none and also border radius the border area should be 4 pixels, and cursor to pointer now align-self will be the flex end.

Random Joke Generator Using JavaScript

Adding Functionality To Button & API

const button = document.querySelector(".container button");
const jokeDiv = document.querySelector(".container .joke p");

document.addEventListener("DOMContentLoaded", getJock);

button.addEventListener("click", getJock);

async function getJock() {
  const jokeData = await fetch("<https://icanhazdadjoke.com/>", {
    headers: {
      Accept: "application/json"
    }
  });
  const jokeObj = await jokeData.json();
  jokeDiv.innerHTML = jokeObj.joke;
  console.log(jokeData);
}

Let’s fetch the API so in our main.js, we need to grab the button here so button to the document.queryselector(”.container button”) and also let’s say that constant joke div to document.queryselector(”.container .joke p”) now let’s add event listener with DOM content loaded with this if we load the project then getJock function will be called, after that we will add event listener on button so if we click on button then getJock function will be called again, and we’ll get new joke.

Now let’s define the function getJock, here let’s fetch API here we have used this https://icanhazdadjoke.com/ with header accept we will use here application/JSON format.

Now let’s const jokeObj we will fetch jokeData in JSON format, after that lets do innerHTML to jokeDiv.

Full Source Code Of Random Joke Generator Using JavaScript Fetch API

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dank Jokes</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
      <h1 class="title">Random Dank Jokes Generator</h1>
      <div class="container">
        <div class="joke">
          <p></p>
        </div>
        <button>Get a Dank Joke</button>
      </div>
    </section>
    <script src="main.js"></script>
</body>
</html>

style.css

@import url("<https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap>");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-family: "Montserrat";
  font-size: 10px;
}
body {
  background-color: rgb(37, 38, 39);
  color: white;
}
section {
  min-height: 100vh;
  width: 100%;
  padding: 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  position: absolute;
  top: 50px;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  background-color: rgb(51, 55, 59);
  border-radius: 8px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
}
.container p {
  font-size: 2rem;
  font-weight: 300;
  line-height: 3rem;
  text-align: justify;
  color: aqua;
}
button {
  margin-top: 40px;
  width: fit-content;
  padding: 2rem;
  font-size: 2rem;
  background-color: rgb(25, 28, 29);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-end;
}

main.js

const button = document.querySelector(".container button");
const jokeDiv = document.querySelector(".container .joke p");

document.addEventListener("DOMContentLoaded", getJock);

button.addEventListener("click", getJock);

async function getJock() {
  const jokeData = await fetch("<https://icanhazdadjoke.com/>", {
    headers: {
      Accept: "application/json"
    }
  });
  const jokeObj = await jokeData.json();
  jokeDiv.innerHTML = jokeObj.joke;
  console.log(jokeData);
}

Output

Random Joke Generator Using JavaScript
View Demo
Download Code

You may also like:

  • How To Make Number Guessing Game JavaScript
  • Build a Simple Number Memorising Game In JavaScript
  • Build a Simple Digital Clock In JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Random Joke Generator
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article iPhone 12 3D Cube with HTML CSS How To Make iPhone 12 3D Cube with JavaScript
Next Article BICYCLE USING HTML AND CSS HOW TO MAKE BICYCLE USING HTML AND CSS
Leave a comment Leave a comment

Leave a Reply Cancel reply

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

- Advertisement -

You Might Also Like

Passing a JavaScript Value Between HTML Pages

Passing a JavaScript Value Between HTML Pages

February 3, 2023
Compare Objects in an Array

JavaScript Problem: Compare Objects in an Array

January 30, 2023
Switching Name Order Using Capturing Groups in Regular Expressions

Switching Name Order Using Capturing Groups in Regular Expressions

January 29, 2023
Shuffling an Array

JavaScript Problem: How to Perform Shuffling an Array

January 27, 2023
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?