Dad Jokes API Project HTML, CSS and JavaScript

HuXn-WebDev · HuXn-WebDev · commit e48ffdf43bf2 · 2022-09-28T05:51:05.000-07:00
diff --git a/78. Dad Jokes/app.js b/78. Dad Jokes/app.js
@@ -0,0 +1,13 @@
+document.getElementById("btn").addEventListener("click", joke);
+
+async function joke() {
+  let config = {
+    headers: {
+      Accept: "application/json",
+    },
+  };
+
+  let a = await fetch("https://icanhazdadjoke.com/", config);
+  let b = await a.json();
+  document.getElementById("content").innerHTML = b.joke;
+}
diff --git a/78. Dad Jokes/index.html b/78. Dad Jokes/index.html
@@ -0,0 +1,18 @@
+<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>Dad Jokes</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div id="container">
+      <h1>Dad Jokes 😜</h1>
+      <button id="btn" class="btn">Joke</button>
+      <div id="content"></div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/78. Dad Jokes/style.css b/78. Dad Jokes/style.css
@@ -0,0 +1,35 @@
+body {
+  background: #77bfa1;
+}
+
+h1 {
+  margin: auto;
+  font-size: 10vh;
+}
+
+#container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: sans-serif;
+}
+
+#btn {
+  margin-top: 20vh;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: white;
+  border: 2px solid white;
+  padding: 10px 50px;
+  cursor: pointer;
+}
+
+#content {
+  margin: auto;
+  padding: 4vh;
+  font-size: 1.2rem;
+  max-width: 700px;
+  margin-top: 20px;
+}
