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

-Original file line number
+Diff line change
@@ @@ -0,0 +1,25 @@ @@
 +constdisplayJoke=document.getElementById("display-joke");
 +constbutton=document.getElementById("getJoke");
++
 +button.addEventListener("click",getRandomJoke);
++
 +functiongetRandomJoke(){
 +constajax=newXMLHttpRequest();
 +consturl="https://api.chucknorris.io/jokes/random";
 +ajax.open("GET",url,true);
++
 +ajax.onreadystatechange=()=>{
 +if(ajax.status===200&&ajax.readyState===4){
 +letdata=JSON.parse(ajax.responseText);
 +displayJoke.innerHTML=`${data.value}`;
 +}else{
 +ajax.onerror=onerror();
 +}
 +};
++
 +ajax.send();
 +}
++
 +functiononerror(){
 +displayJoke.textContent=`Something Went Wrong :(`;
 +}
-Original file line number
+Diff line change
@@ @@ -0,0 +1,17 @@ @@
 +<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>Chunk Norris</title>
 +<linkrel="stylesheet" href="style.css" />
 +</head>
 +<body>
 +<sectionclass="container">
 +<divid="display-joke">Click the button to get a new joke</div>
 +<buttonclass="btn" id="getJoke">Get Joke</button>
 +</section>
++
 +<scriptsrc="app.js"></script>
 +</body>
 +</html>