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;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,13 @@ @@
 +document.getElementById("btn").addEventListener("click",joke);
++
 +asyncfunctionjoke(){
 +letconfig={
 +headers: {
 +Accept: "application/json",
 +},
 +};
++
 +leta=awaitfetch("https://icanhazdadjoke.com/",config);
 +letb=awaita.json();
 +document.getElementById("content").innerHTML=b.joke;
 +}
-Original file line number
+Diff line change
@@ @@ -0,0 +1,18 @@ @@
 +<htmllang="en">
 +<head>
 +<metacharset="UTF-8" />
 +<metahttp-equiv="X-UA-Compatible" content="IE=edge" />
 +<metaname="viewport" content="width=device-width, initial-scale=1.0" />
 +<title>Dad Jokes</title>
 +<linkrel="stylesheet" href="style.css" />
 +</head>
 +<body>
 +<divid="container">
 +<h1>Dad Jokes 😜</h1>
 +<buttonid="btn" class="btn">Joke</button>
 +<divid="content"></div>
 +</div>
++
 +<scriptsrc="app.js"></script>
 +</body>
 +</html>