Chuck Norris API Project

HuXn-WebDev · HuXn-WebDev · commit cac7c709a394 · 2022-09-26T04:43:49.000-07:00
diff --git a/76. Chuck Norris/app.js b/76. Chuck Norris/app.js
@@ -0,0 +1,25 @@
+const displayJoke = document.getElementById("display-joke");
+const button = document.getElementById("getJoke");
+
+button.addEventListener("click", getRandomJoke);
+
+function getRandomJoke() {
+  const ajax = new XMLHttpRequest();
+  const url = "https://api.chucknorris.io/jokes/random";
+  ajax.open("GET", url, true);
+
+  ajax.onreadystatechange = () => {
+    if (ajax.status === 200 && ajax.readyState === 4) {
+      let data = JSON.parse(ajax.responseText);
+      displayJoke.innerHTML = `${data.value}`;
+    } else {
+      ajax.onerror = onerror();
+    }
+  };
+
+  ajax.send();
+}
+
+function onerror() {
+  displayJoke.textContent = `Something Went Wrong :(`;
+}
diff --git a/76. Chuck Norris/index.html b/76. Chuck Norris/index.html
@@ -0,0 +1,17 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chunk Norris</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section class="container">
+      <div id="display-joke">Click the button to get a new joke</div>
+      <button class="btn" id="getJoke">Get Joke</button>
+    </section>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/76. Chuck Norris/style.css b/76. Chuck Norris/style.css
@@ -0,0 +1,28 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap");
+
+body {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  width: 800px;
+}
+
+#display-joke {
+  font-size: 4rem;
+  font-family: "Playfair Display", serif;
+}
+
+.btn {
+  padding: 10px;
+  margin-top: 40px;
+  border: none;
+  background: transparent;
+  border-bottom: 1px solid crimson;
+  color: crimson;
+  cursor: pointer;
+}
