Skip to content

Commit cac7c70

Browse files
HuXn-WebDevHuXn-WebDev
committed
Chuck Norris API Project
1 parent 1dc4518 commit cac7c70

File tree

3 files changed

+70
-0
lines changed

3 files changed

+70
-0
lines changed

‎76. Chuck Norris/app.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const displayJoke = document.getElementById("display-joke");
2+
const button = document.getElementById("getJoke");
3+
4+
button.addEventListener("click", getRandomJoke);
5+
6+
function getRandomJoke() {
7+
const ajax = new XMLHttpRequest();
8+
const url = "https://api.chucknorris.io/jokes/random";
9+
ajax.open("GET", url, true);
10+
11+
ajax.onreadystatechange = () => {
12+
if (ajax.status === 200 && ajax.readyState === 4) {
13+
let data = JSON.parse(ajax.responseText);
14+
displayJoke.innerHTML = `${data.value}`;
15+
} else {
16+
ajax.onerror = onerror();
17+
}
18+
};
19+
20+
ajax.send();
21+
}
22+
23+
function onerror() {
24+
displayJoke.textContent = `Something Went Wrong :(`;
25+
}

‎76. Chuck Norris/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Chunk Norris</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<div id="display-joke">Click the button to get a new joke</div>
12+
<button class="btn" id="getJoke">Get Joke</button>
13+
</section>
14+
15+
<script src="app.js"></script>
16+
</body>
17+
</html>

‎76. Chuck Norris/style.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap");
2+
3+
body {
4+
height: 100vh;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: center;
8+
align-items: center;
9+
}
10+
11+
.container {
12+
width: 800px;
13+
}
14+
15+
#display-joke {
16+
font-size: 4rem;
17+
font-family: "Playfair Display", serif;
18+
}
19+
20+
.btn {
21+
padding: 10px;
22+
margin-top: 40px;
23+
border: none;
24+
background: transparent;
25+
border-bottom: 1px solid crimson;
26+
color: crimson;
27+
cursor: pointer;
28+
}

0 commit comments

Comments
 (0)