Skip to content

Commit b7793d0

Browse files
AsjasAsjas
committed
create starter and finished files for video 76
1 parent d1354e6 commit b7793d0

File tree

2 files changed

+85
-53
lines changed

2 files changed

+85
-53
lines changed

‎exercises/76 - Dad Jokes/index-FINISHED.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Dad Jokes</title>
8+
<link rel="stylesheet" href="../../base.css">
9+
<style>
10+
html {
11+
--size: 20px;
12+
}
13+
14+
.wrapper {
15+
text-align: center;
16+
}
17+
18+
.joke {
19+
font-size: 5rem;
20+
font-weight: 900;
21+
}
22+
23+
.lds-ripple {
24+
display: inline-block;
25+
position: relative;
26+
27+
width: var(--size);
28+
height: var(--size);
29+
}
30+
31+
.lds-ripple div {
32+
position: absolute;
33+
border: 4px solid white;
34+
opacity: 1;
35+
border-radius: 50%;
36+
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
37+
}
38+
39+
.lds-ripple div:nth-child(2) {
40+
animation-delay: -0.5s;
41+
}
42+
43+
@keyframes lds-ripple {
44+
0% {
45+
top: calc(var(--size) / 2);
46+
left: calc(var(--size) / 2);
47+
width: 0;
48+
height: 0;
49+
opacity: 1;
50+
}
51+
52+
100% {
53+
top: 0px;
54+
left: 0px;
55+
width: calc(var(--size) * 0.9);
56+
height: calc(var(--size) * 0.9);
57+
opacity: 0;
58+
}
59+
}
60+
61+
.hidden {
62+
display: none;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<div class="wrapper">
69+
<div class="joke">
70+
<p>Dad Jokes.</p>
71+
</div>
72+
<button class="getJoke">
73+
<span class="jokeText">Get A Joke</span>
74+
<div class="lds-ripple loader hidden">
75+
<div></div>
76+
<div></div>
77+
</div>
78+
</button>
79+
</div>
80+
81+
<script src="./jokes.js"></script>
82+
</body>
83+
84+
</html>

‎exercises/76 - Dad Jokes/index.html‎

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@
77
<title>Dad Jokes</title>
88
<link rel="stylesheet" href="../../base.css">
99
<style>
10-
html {
11-
--size: 20px;
12-
}
13-
1410
.wrapper {
1511
text-align: center;
1612
}
@@ -19,48 +15,6 @@
1915
font-size: 5rem;
2016
font-weight: 900;
2117
}
22-
23-
.lds-ripple {
24-
display: inline-block;
25-
position: relative;
26-
27-
width: var(--size);
28-
height: var(--size);
29-
}
30-
31-
.lds-ripple div {
32-
position: absolute;
33-
border: 4px solid white;
34-
opacity: 1;
35-
border-radius: 50%;
36-
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
37-
}
38-
39-
.lds-ripple div:nth-child(2) {
40-
animation-delay: -0.5s;
41-
}
42-
43-
@keyframes lds-ripple {
44-
0% {
45-
top: calc(var(--size) / 2);
46-
left: calc(var(--size) / 2);
47-
width: 0;
48-
height: 0;
49-
opacity: 1;
50-
}
51-
52-
100% {
53-
top: 0px;
54-
left: 0px;
55-
width: calc(var(--size) * 0.9);
56-
height: calc(var(--size) * 0.9);
57-
opacity: 0;
58-
}
59-
}
60-
61-
.hidden {
62-
display: none;
63-
}
6418
</style>
6519
</head>
6620

@@ -69,13 +23,7 @@
6923
<div class="joke">
7024
<p>Dad Jokes.</p>
7125
</div>
72-
<button class="getJoke">
73-
<span class="jokeText">Get A Joke</span>
74-
<div class="lds-ripple loader hidden">
75-
<div></div>
76-
<div></div>
77-
</div>
78-
</button>
26+
<button class="getJoke">Get A Joke</button>
7927
</div>
8028

8129
<script src="./jokes.js"></script>

0 commit comments

Comments
 (0)