JOKE GENERATOR USING HTML,CSS and Javscript? random joke generator javascript
.png "JOKE GENERATOR USING HTML,CSS and Javscript? random joke generator javascript")
Welcome to today’s tutorial. Today we are going to create a random joke generator. For this, we are going to use HTML, CSS and Javascript. We use a Joke API(application Programming Interface) in this tutorial.
The joke generator displays a random joke on every button click. You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project.
LIVE SERVER:-
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
Folder Structure:
Now before we move to the actual code let us first set up the project folder. We create a project folder Random Joke Generator. This folder consists of three files. The first is the HTML file index.html. Next one is the stylesheet style.css and the last one is the javascript file script.js.
HTML:
We start with the HTML section. First copy the code provided below into your HTML file.
The HTML code consists of a wrapper that encloses other elements. Inside the wrapper, we have, a laughing emoji. I have used the Unicode of laughing emoji – &128514 This emoji is wrapper inside a span element. Following the span is the p element where the joke is displayed. Lastly, we add a button with the id btn. The button consists of text – ‘Get Random Joke’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Joke Generator</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<span>😂</span>
<p id="joke"></p>
<button id="btn">Get Random Joke</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we add styles to our generator. Copy the code below and paste it into your stylesheet style.css.
The CSS styles used here are pretty basic and self-explanatory. We make the usual CSS reset to remove the unwanted paddings and margins. For the background color with use #fab22e. We add dimensions to the wrapper. The wrapper is made 80vmin wide. Using the absolute position and translate we centre the wrapper. To make it stand out even more we add some box shadow to it.
We increase the font size of emoji and set it to 100px. Next, we style the paragraph text by adding line height and font size to the text.
We create a fade class that adds a fade-in animation to text. Next, We use javascript to add this effect to the text every time a new joke is displayed. Also add black background color to the button along with some padding.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik",sans-serif;
}
body{
background-color:rgb(124, 238, 248);
}
.wrapper{
width: 80vmin;
padding: 50px 40px;
background-color: #15161a;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 5px;
box-shadow: 20px 20px 40px rgba(97,63,0,0.4);
}
span{
display: block;
text-align: center;
font-size: 100px;
}
p{
font-size: 16px;
color: #ffffff;
font-weight: 400;
text-align: center;
word-wrap: break-word;
line-height: 35px;
margin: 30px 0;
opacity: 0;
}
.fade{
opacity: 1;
transition: opacity 1.5s;
}
button{
display: block;
background-color:rgb(124, 238, 248);
border: none;
padding: 5px;
font-size: 18px;
color: #171721;
font-weight: 600;
padding: 12px 25px;
margin: 0 auto;
border-radius: 5px;
cursor: pointer;
outline: none;
}
Javascript:
Next, we add functionality to this generator using Javascript. Now copy the code below and paste it into your javascript file.
We get the button and paragraph button and assign them to variables. Next, we create a constant and the API URL to it. I am using the Joke API by Sv443. We fetch and get a JSON response. This response is a JSON object. We need the joke key from this object. We extract the value of the joke key and display it in the p element.
We add a click event to the button so that the getJoke function is run on every button click. And that’s it. Your joke generator is now ready. Go ahead and customize it the way you want.
const jokeContainer = document.getElementById("joke");
const btn = document.getElementById("btn");
const url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";
let getJoke = () => {
jokeContainer.classList.remove("fade");
fetch(url)
.then(data => data.json())
.then(item =>{
jokeContainer.textContent = `${item.joke}`;
jokeContainer.classList.add("fade");
});
}
btn.addEventListener("click",getJoke);
getJoke(); I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.
