Hey guys in this post, we will create a Javascript random Joke project for Beginners. Follow this tutorial till the end to understand the javascript concepts. we will create this project step by step. The final version of the app is live on the internet.
Table of Contents
Topics covered
This application involves the following topics –
- JavaScript XMLHttpRequest Constructor
- JavaScript CSS Manipulation
- JavaScript DOM Manipulation
Complete source code
The below image shows you the project structure –
Add styles to the application
Create a style.css file and add the following content –
body{
text-align:center;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
line-height: 2;
font-size: 2em;
width: 800px;
margin: 50px auto;
}
img{
width: 10%;
height: auto;
}
button{
font-size: .8em;
border-radius: 5px;
background-color: orange;
padding: 5px;
cursor:pointer;
}
Add scripts to the application
Create an app.js file and add the following content –
const image = document.querySelector('img');
const jokeDIV = document.querySelector('#display-joke');
const button = document.querySelector('#get-joke');
button.addEventListener('click', function(){
getRandomJoke();
})
function getRandomJoke(){
const ajax = new XMLHttpRequest;
const url = 'https://api.chucknorris.io/jokes/random'
ajax.open('GET', url, true);
ajax.onreadystatechange = function(){
if(this.status === 200 && this.readyState === 4){
console.log(this.responseText);
let data = JSON.parse(this.responseText);
jokeDIV.innerHTML = `${data.value}`
} else {
this.onerror = onerror();
}
}
ajax.send();
}
function onerror(){
jokeDIV.textContent = 'There was an error!';
}
Add HTML to the application
Create an index.html file and add the following content –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Chuck Norris Random Joke AJAX Project</title>
</head>
<body>
<img src='https://assets.chucknorris.host/img/avatar/chuck-norris.png'>
<div id="display-joke">Display the button below to retrieve a random Chuck Norris Joke!</div>
<button id="get-joke">Get Joke!</button>
<script src="app.js"></script>
</body>
</html>
Screenshots
Download the complete source code from github repository
Original source https://jsbeginners.com/random-joke-javascript-ajax-project/
That’s it for this post. Hope you liked it, if you did then please share this with your friends and colleagues. Also, share this post in your social media profiles. Thanks, I will see you in the next post.
