Random Joke Generator Using JavaScript (Source Code)
Welcome to the Code With Random blog. This blog teaches us how to create a Random Joke Generator Using JavaScript. We use HTML, CSS, and Javascript for the Random Joke Generator Javascript. I hope you enjoy our blog, so let’s start with a basic HTML structure for the Random Joke Generator Javascript.
An API for the jokes is required in order 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 we’ll also make a button for tweeting.
50+ HTML, CSS & JavaScript Projects With Source Code
HTML Code For Random Joke Generator
<!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 Joke 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 Joke Generator Javascript. Now, you can see an output with a Random Joke Generator Javascript then we write javascript for the Random Joke Generator Javascript.
Output
Gym Website Using HTML and CSS With Source Code
CSS Code For Random Joke 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
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
Final output Of Random Joke Generator Using JavaScript:-
Codepen Preview Of Random Joke Generator:
Now that we have completed our javascript section, Hope you like the Random Joke Generator Javascript. you can see 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
ADVERTISEMENT
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.
http://xyz.api-example.com/api/odata/businessobject/incidents?$search=Printer
ADVERTISEMENT
Which function is used collect data from API?
We use fetch method to fetch the data using the API’s
ADVERTISEMENT
