Recently I have implemented a simple beginner level project where you will get random jokes according to the number you put. I used Ajax in this project.

Let me jump to the codes.

HTML codes of "index.html" file

    Jokes





Feeling bored ? Get some random jokes using AJAX !!!

          Get Jokes!

JS codes of "script.js" file

document.getElementById('get-data').addEventListener('click', loadJokes);


function loadJokes (){
  let number = document.getElementById('numberJokes').value;

  let xhr = new XMLHttpRequest();

  xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

  xhr.onprogress = function(){
    document.getElementById('output').innerHTML = '
Loading.......';
  }

  xhr.onload = function(){
    if (this.status === 200){
      let data = JSON.parse(this.responseText);
      let jokes = data.value;
      let output = '
';

      jokes.forEach(function(item){
        output += `
${item.joke}`;
      });

      output += '';
      document.getElementById('output').innerHTML = output;
    }
  }
  xhr.send()
}

Output

[IMAGE: https://images.hive.blog/DQmPZbLD9CnTwJumZJKUTb3Ytb7FUgMNP3A17fje6H5CLkW/image.png]

• You will get the number of jokes according to the number you provided. I have used "Chuck Norris" API here.

Thank You