Skip to content

Commit ce2f8d2

Browse files
elfgoddelfgodd
committed
Section 20: Styling and Wrapup
1 parent a6f9c79 commit ce2f8d2

3 files changed

Lines changed: 90 additions & 16 deletions

File tree

‎20-Drawing-Animations/02-timer-v2/index.html‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,37 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
10+
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
11+
crossorigin="anonymous"
12+
referrerpolicy="no-referrer"
13+
/>
14+
<link rel="stylesheet" href="./style.css" />
815
<title>Timer</title>
916
</head>
1017
<body>
11-
<svg height="400" width="400">
12-
<circle
13-
r="190"
14-
cx="200"
15-
cy="200"
16-
fill="transparent"
17-
stroke="blue"
18-
stroke-width="15"
19-
transform="rotate(-90, 200, 200)"
20-
/>
21-
</svg>
22-
<input id="duration" value="30" />
23-
<button id="start"><i class="fa-solid fa-play"></i></i></button>
24-
<button id="pause"><i class="fa-solid fa-pause"></i></i></button>
18+
<div class="timer">
19+
<div class="controls">
20+
<input id="duration" value="3" />
21+
<div>
22+
<button id="start"><i class="fa-solid fa-play"></i></button>
23+
<button id="pause"><i class="fa-solid fa-pause"></i></button>
24+
</div>
25+
</div>
26+
<svg class="dial">
27+
<circle
28+
fill="transparent"
29+
stroke="green"
30+
stroke-width="15"
31+
r="190"
32+
cx="0"
33+
cy="200"
34+
transform="rotate(-90 100 100)"
35+
/>
36+
</svg>
37+
</div>
2538
<script src="timer.js"></script>
2639
<script src="index.js"></script>
2740
</body>

‎20-Drawing-Animations/02-timer-v2/style.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.dial {
2+
height: 400px;
3+
width: 400px;
4+
}
5+
6+
.timer {
7+
position: relative;
8+
display: inline-block;
9+
}
10+
11+
* {
12+
font: inherit;
13+
}
14+
15+
body {
16+
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
17+
'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
18+
}
19+
20+
.timer input {
21+
display: block;
22+
border: none;
23+
width: 240px;
24+
font-size: 90px;
25+
text-align: center;
26+
}
27+
28+
.timer button {
29+
border: none;
30+
font-size: 36px;
31+
cursor: pointer;
32+
}
33+
34+
.timer button:focus {
35+
outline: none;
36+
}
37+
38+
.timer input:focus {
39+
outline: none;
40+
}
41+
42+
body {
43+
display: flex;
44+
justify-content: center;
45+
align-items: center;
46+
height: 100vh;
47+
}
48+
49+
.controls {
50+
position: absolute;
51+
top: 0;
52+
left: 0;
53+
right: 0;
54+
bottom: 0;
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
flex-direction: column;
59+
}

‎20-Drawing-Animations/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,4 +246,6 @@ The X axis increases from left to right and the Y axis increases from top to bot
246246

247247
## 15. 24 Adjusting by an Even Interval
248248

249-
## 16. 25 Using Icons
249+
## 16. 25 Using Icons
250+
251+
## 17. 26 Styling and Wrapup

0 commit comments

Comments
 (0)