Table of Contents
Random Jokes Generator javascript | Joke Generator html,css,javascript
HTML code for Random Jokes 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>
There is all HTML code for the Random Jokes Generator. Now, you can see output without CSS, then we write CSS for our Random Jokes Generator.
CSS for Random Jokes 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, Here is our updated output CSS.
Now add javascript for the Random Jokes Generator!
Javascript for Random 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 javascript section, Here is our updated output with javascript. Hope you like Random Jokes Generator, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
Check it more
HTML – CSS project ideas by Code With Random
calculator Html javascript | calculator javascript code
bootstrap navbar – responsive bootstrap navbar
notification CSS style | Html top bar slide down notification CSS
CSS responsive menu | CSS animated Menu
countdown timer HTML javascript | free countdown timer
A Custom checkbox in CSS? | Create a custom checkbox using CSS?
In this post, we learn how to create a Random Jokes Generator using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
This Code Is Not Running,……..