Shows a Random Joke in a Web Page. Joke is fetched from Public API using JavaScript and jQuery
You can show a random joke to the user in your website by fetching the joke from a Public API. You can do this by making an AJAX request call to the API in JavaScript
or jQuery. Just add a div element to your web page where you want the Joke to appear.
The API URL is - https://api.icndb.com/jokes/random
Add a div to your page:
<div class="joke"></div>
Now add the JavaScript code for making AJAX request:
<script>
const request = new XMLHttpRequest();
request.open('GET', 'https://api.icndb.com/jokes/random');
request.send();
request.onload = () => {
if (request.status === 200) {
console.log("Success");
//Extracting data
var joke = JSON.parse(request.response).value.joke;
//Showing the joke in the table
document.getElementById("joke").innerHTML = joke;
}
};
request.onerror = () => {
console.log("error")
};
</script>
The jQuery AJAX code form making the AJAX request is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "https://api.icndb.com/jokes/random",
dataType: "json",
success: function (msg) {
$("#joke").html(msg.value.joke);
},
error: function (req, status, error) {
alert(req + " " + status + " " + error);
}
});
});
</script>
If you find it useful then support this Project. Thank you.
Have Fun!