Skip to content

Commit 65b1889

Browse files
sahandghavidelsahandghavidel
committed
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

+12-12
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

+10-12
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

+42-44
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: 0 6px 10px rgba(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: 0 6px 10px rgba(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)