Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 65b1889

Browse files
update the dad jokes generator project part2
1 parent 8371c43 commit 65b1889

File tree

3 files changed

+64
-68
lines changed

3 files changed

+64
-68
lines changed

‎projects/dad-jokes-generator/index.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8"/>
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Dad Jokes Generator</title>
8-
<link rel="stylesheet" href="style.css"/>
9-
</head>
10-
<body>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
1111
<div class="container">
12-
<h1 class="heading">Dad Jokes Generator</h1>
13-
<h2 class="joke" id="joke">Dad Jokes</h2>
14-
<button class="btn" id="btn">Tell me a joke</button>
12+
<h1 class="heading">Dad Joke Generator</h1>
13+
<p class="joke" id="joke">Dad Joke</p>
14+
<button class="btn" id="btn">Tell me a joke</button>
1515
</div>
1616
<script src="index.js"></script>
17-
</body>
18-
</html>
17+
</body>
18+
</html>

‎projects/dad-jokes-generator/index.js

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const btnEl = document.getElementById("btn");
22
const jokeEl = document.getElementById("joke");
33

4-
const apiKey = "SAXb3lrT9IIorMjQkAFWBg==KCDQCZgWgcoAU4ai";
4+
const apiKey = "4kqGcJx8uDXo3XIskcbzokAz7rN8nWJs3PL9Mcll";
55

66
const options = {
77
method: "GET",
@@ -10,28 +10,26 @@ const options = {
1010
},
1111
};
1212

13-
const apiURL = `https://api.api-ninjas.com/v1/dadjokes?limit=1`;
13+
const apiURL = "https://api.api-ninjas.com/v1/dadjokes?limit=1";
1414

1515
async function getJoke() {
1616
try {
17-
btnEl.innerText = "Loading...";
18-
btnEl.disabled = true;
1917
jokeEl.innerText = "Updating...";
18+
btnEl.disabled = true;
19+
btnEl.innerText = "Loading...";
2020
const response = await fetch(apiURL, options);
2121
const data = await response.json();
22-
const jokeContent = data[0].joke;
23-
jokeEl.innerText = jokeContent;
24-
btnEl.innerText = "Tell me a joke";
22+
2523
btnEl.disabled = false;
26-
console.log(data);
24+
btnEl.innerText = "Tell me a joke";
25+
26+
jokeEl.innerText = data[0].joke;
2727
} catch (error) {
28-
console.log(error);
2928
jokeEl.innerText = "An error happened, try again later";
30-
btnEl.innerText = "Tell me a joke";
3129
btnEl.disabled = false;
30+
btnEl.innerText = "Tell me a joke";
31+
console.log(error);
3232
}
3333
}
3434

35-
getJoke();
36-
3735
btnEl.addEventListener("click", getJoke);

‎projects/dad-jokes-generator/style.css

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,52 @@
1-
body{
2-
margin: 0;
3-
display: flex;
4-
min-height: 100vh;
5-
justify-content: center;
6-
align-items: center;
7-
font-family: monospace;
8-
background:linear-gradient(to left bottom, lightblue, lightpink, lightblue);
1+
body{
2+
margin: 0;
3+
background:linear-gradient(to left bottom, lightblue, lightpink, lightblue);
4+
min-height: 100vh;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: monospace;
99
}
1010

11-
.container{
12-
background-color: rgba(255,255,255,0.3);
13-
box-shadow:06px10pxrgba(0,0,0,0.3);
14-
padding:20px;
15-
border-radius: 15px;
16-
width: 85%;
17-
text-align: center;
18-
color: darkgreen;
11+
.container{
12+
background-color: rgba(255,255,255,.3);
13+
padding:20px;
14+
box-shadow:06px10pxrgba(0,0,0,.3);
15+
border-radius: 15px;
16+
width: 85%;
17+
text-align: center;
18+
color: darkgreen;
1919
}
2020

21-
.heading {
22-
font-size: 35px;
23-
font-weight: 200;
24-
font-family: Impact;
25-
letter-spacing: 2px;
26-
27-
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
21+
.heading{
22+
font-size: 35px;
23+
font-weight: 200;
24+
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
25+
text-shadow: 5px 5px 2px rgba(0,0,0,.3);
26+
letter-spacing: 2px;
2827
}
2928

30-
.joke{
31-
font-size: 25px;
32-
font-weight: 500;
33-
margin: 40px;
29+
.joke{
30+
font-size: 25px;
31+
font-weight: 500;
32+
margin: 40px
3433
}
3534

36-
.btn {
37-
font-size: 18px;
38-
font-weight: 700;
39-
border-radius: 5px;
40-
cursor: pointer;
41-
padding: 10px;
42-
margin-top: 15px;
43-
background-color: rgba(255, 255, 255, 0.3);
44-
border-color: rgba(255, 255, 255, 0.6);
45-
text-transform: uppercase;
46-
width: 300px;
47-
color: darkgreen;
35+
.btn{
36+
font-size: 18px;
37+
font-weight: 700;
38+
border-radius: 5px;
39+
cursor: pointer;
40+
padding: 10px;
41+
background-color: rgba(255,255,255,.3);
42+
border-color: rgba(255,255,255,.6);
43+
text-transform: uppercase;
44+
width: 300px;
45+
color: darkgreen;
4846
}
4947

50-
.btn:hover{
51-
background-color: rgba(255,255,255,0.5);
52-
box-shadow: 0 4px 4px rgba(0,0,0,0.3);
53-
transition: all 300ms ease;
54-
}
48+
.btn:hover{
49+
background-color: rgba(255,255,255,.5);
50+
box-shadow: 0 4px 4px rgba(0,0,0,.3);
51+
transition: all 300ms ease;
52+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /