ADVERTISEMENT

Random Joke Generator API Project Using HTML & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Random Joke Generator API Project Using HTML & JavaScript

Welcome to Code With Random blog. In this blog, we learn how to create Random Joke Generator Using JavaScript. We use HTML, CSS, and JavaScript for this Random Jokes Generator.

ADVERTISEMENT

ADVERTISEMENT

Hope you enjoy our blog so let’s start with a basic HTML Structure for Random Joke Generator.

HTML Code for Joke Generator 

<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>
</body>

There is all the HTML Code for the Jokes Generator. Now, you can see output without CSS and JS. then we write CSS For Styling Joke Generator App and Use JavaScript for Getting Jokes and Showing in HTML Content Through icanhazdadjoke API.

ADVERTISEMENT

50+ Html, Css & Javascript Projects With Source Code

ADVERTISEMENT

 

Joke Generator Using JavaScript
Joke Generator Using JavaScript

 

CSS for Joke Generator 

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

Now we have completed our CSS section for Joke Generator,  Here is our updated output HTML + CSS.

ADVERTISEMENT

Joke Generator Using JavaScript
Joke Generator Using JavaScript

 

Now Add Javascript For The Main Functionality In Jokes Generator. We Get A Joke Api Then Connect To Database And Then Get Joke Form Joke API. After Getting The Joke We Show That Joke In Our Joke Generator App.

File Upload with Progress Bar HTML, CSS & JavaScript

ADVERTISEMENT

JavaScript Code for Jokes Generator

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

Now we have completed our Joke Generator,  Here is our updated output with Html, Css, and JavaScript. Hope you like Random Jokes Generator, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.\

ADVERTISEMENT

10+ Javascript Projects For Beginners With Source Code

Thank you!

Joke Generator Using JavaScript
Joke Generator Using JavaScript

 

Joke Generator Using JavaScript
Joke Generator Using JavaScript

 

In this post, we learn how to create a Random Jokes Generator using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

ADVERTISEMENT

In this article, We’ll provide you Random Joke Generator Using JavaScript (Source Code) with complete source code ready to implement with your project made with your own ideas.

ADVERTISEMENT

Thank You And Keep Learning!!!

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

1 thought on “Random Joke Generator API Project Using HTML & JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT