Movatterモバイル変換

[0]ホーム
URL:

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

Commit65b1889

Browse files
update the dad jokes generator project part2
1 parent8371c43 commit65b1889

File tree

3 files changed

+64
-68
lines changed

3 files changed

+64
-68
lines changed
Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<htmllang="en">
3-
<head>
4-
<metacharset="UTF-8"/>
5-
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6-
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
77
<title>Dad Jokes Generator</title>
8-
<linkrel="stylesheet"href="style.css"/>
9-
</head>
10-
<body>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
1111
<divclass="container">
12-
<h1class="heading">DadJokes Generator</h1>
13-
<h2class="joke"id="joke">DadJokes</h2>
14-
<buttonclass="btn"id="btn">Tell me a joke</button>
12+
<h1class="heading">DadJoke Generator</h1>
13+
<pclass="joke"id="joke">DadJoke</p>
14+
<buttonclass="btn"id="btn">Tell me a joke</button>
1515
</div>
1616
<scriptsrc="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
constbtnEl=document.getElementById("btn");
22
constjokeEl=document.getElementById("joke");
33

4-
constapiKey="SAXb3lrT9IIorMjQkAFWBg==KCDQCZgWgcoAU4ai";
4+
constapiKey="4kqGcJx8uDXo3XIskcbzokAz7rN8nWJs3PL9Mcll";
55

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

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

1515
asyncfunctiongetJoke(){
1616
try{
17-
btnEl.innerText="Loading...";
18-
btnEl.disabled=true;
1917
jokeEl.innerText="Updating...";
18+
btnEl.disabled=true;
19+
btnEl.innerText="Loading...";
2020
constresponse=awaitfetch(apiURL,options);
2121
constdata=awaitresponse.json();
22-
constjokeContent=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);
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:5px5px2pxrgba(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:5px5px2pxrgba(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:04px4pxrgba(0,0,0,0.3);
53-
transition: all300ms ease;
54-
}
48+
.btn:hover{
49+
background-color:rgba(255,255,255,.5);
50+
box-shadow:04px4pxrgba(0,0,0,.3);
51+
transition: all300ms ease;
52+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp