Learn with us how to create a random bad jokes generator in CSS and Javascript!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Bad jokes? Find the full code in bio 🤩 #webdevelopment #programmingexercises #javascriptprogramming #csscoding ♬ original sound - Creative Tim
Contents:
1. HTML Code
2. CSS Code
3. Javascript Code
Get your code ⬇️
1. HTML Code
<!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>Bad Jokes</title>
</head>
<body>
<!-- container -->
<div class="container">
<!-- heading -->
<h1>Bad 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">Share</a>
</div>
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
2. CSS Code
/* 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: #1D3354;
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: #3587A4;
}
/* .tweet-btn link */
.tweet-btn {
background-color: #C1DFF0;
}
3. Javascript Code
// 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);
});
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
