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.
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.
50+ Html, Css & Javascript Projects With Source Code
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.
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
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.\
10+ Javascript Projects For Beginners With Source Code
Thank you!
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.
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.
Thank You And Keep Learning!!!
Written by – Code With Random/Anki
This Code Is Not Running,……..