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

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: 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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy