https://github.com/yogyogi/joke-api

Shows a Random Joke in a Web Page. Joke is fetched from Public API using JavaScript and jQuery
https://github.com/yogyogi/joke-api

api html javascipt jquery web-api

Last synced: 11 days ago
JSON representation

Shows a Random Joke in a Web Page. Joke is fetched from Public API using JavaScript and jQuery

• Host: GitHub
• URL: https://github.com/yogyogi/joke-api
• Owner: yogyogi
• License: mit
• Created: 2018-08-19T16:17:21.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-14T13:00:51.000Z (9 months ago)
• Last Synced: 2024-02-14T14:25:42.557Z (9 months ago)
• Topics: api, html, javascipt, jquery, web-api
• Language: HTML
• Homepage: https://www.yogihosting.com/jquery-ajax/
• Size: 66.4 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Joke-API

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

# This is how the joke will appear in your web page

![joke api](image.png "Joke API")

Add a div to your page:

```



```


# JavaScript Code:

Now add the JavaScript code for making AJAX request:

```

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")

}; 

```

# jQuery Code:

The [jQuery AJAX](https://www.yogihosting.com/jquery-ajax/) code form making the AJAX request is:

```

$(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);

        }

    });

});

```

## Support

If you find it useful then support this Project. Thank you.





Have Fun!