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>