added jokes.html

3 years ago · 8698d3269e
1 changed files with 37 additions and 0 deletions
--- a/jokes.html
+++ b/jokes.html
@ -0,0 +1,37 @@
 <!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">
    <title>Document</title>
 </head>
 <body>
 <div style="text-align: center; font-size: 50px  ;">
    <button onclick="getRandomJoke()">Get Joke</button>
    <h2 id="jokearea" ></h2>
 </div>
 <script>
 var jokejson;
 var jokearea = document.getElementById("jokearea");
 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);
                jokejson = JSON.parse(this.responseText);
                jokearea.innerHTML = jokejson["value"];
            } else {
            jokearea.innerHTML ="error"
        }
    }
    ajax.send();
 }
 </script>
 </body>
 </html>