Skip to content

Commit 2fe95a2

Browse files
cindyliu923cindyliu923
authored
Merge pull request #17 from cindyliu923/cindy/add-day-3
Add day 3 chick
2 parents 7c78018 + 9c1df8c commit 2fe95a2

File tree

7 files changed

+138
-1
lines changed

7 files changed

+138
-1
lines changed

cindy/Day2-clock/index.html renamed to Cindy/Day2 - clock/index.html

File renamed without changes.

cindy/Day2-clock/main.js renamed to Cindy/Day2 - clock/main.js

File renamed without changes.

cindy/Day2-clock/style.css renamed to Cindy/Day2 - clock/style.css

File renamed without changes.

‎Cindy/Day3 - CSS variable/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>JS + CSS variable</title>
7+
<link rel="stylesheet" type="text/css" href="./style.css">
8+
</head>
9+
<body>
10+
<label for="position">位置:</label>
11+
<input id="position" type="range" name="position" min="0" max="100" value="0" data-sizing="vw">
12+
13+
<label for="size">大小:</label>
14+
<input id="size" type="range" name="size" min="0" max="100" value="0" data-sizing="vw">
15+
16+
<label for="color">顏色</label>
17+
<input id="color" type="color" name="color" value="#ffc600">
18+
<div class="chick">
19+
<div class="eyes eyes-left"></div>
20+
<div class="eyes eyes-right"></div>
21+
<div class="mouth"></div>
22+
<div class="wing wing-left left-up"></div>
23+
<div class="wing wing-left left-middle"></div>
24+
<div class="wing wing-left left-down"></div>
25+
<div class="wing wing-right right-up"></div>
26+
<div class="wing wing-right right-middle"></div>
27+
<div class="wing wing-right right-down"></div>
28+
</div>
29+
<script src="./main.js"></script>
30+
</body>
31+
</html>

‎Cindy/Day3 - CSS variable/main.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const inputs = document.querySelectorAll('input');
2+
3+
// 如果 handleUpdate 用 ES6 的箭頭方程式的話 this 會是 window
4+
function handleUpdate () {
5+
const suffix = this.dataset.sizing || '';
6+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
7+
}
8+
9+
inputs.forEach(input => input.addEventListener('input', handleUpdate));

‎Cindy/Day3 - CSS variable/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
body {
2+
text-align: center;
3+
font-family: 'PMingLiU';
4+
font-weight: 100;
5+
font-size: 50px;
6+
}
7+
8+
:root {
9+
--position: 0px;
10+
--size: 0px;
11+
--color: #ffc600;
12+
}
13+
14+
.chick {
15+
background-color: var(--color);
16+
border-radius: 50%;
17+
height: var(--size);
18+
left: var(--position);
19+
padding: 2rem;
20+
position: relative;
21+
width: var(--size);
22+
}
23+
24+
.eyes {
25+
background-color: black;
26+
border-radius: 50%;
27+
height: 20%;
28+
position: absolute;
29+
top: 20%;
30+
width: 20%;
31+
}
32+
33+
.eyes-left {
34+
left: 20%;
35+
}
36+
37+
.eyes-right {
38+
right: 20%;
39+
}
40+
41+
.mouth {
42+
background-color: red;
43+
border-radius: 50%;
44+
height: 10%;
45+
left: 45%;
46+
position: absolute;
47+
top: 50%;
48+
width: 10%;
49+
}
50+
51+
.wing {
52+
background-color: var(--color);
53+
height: 100px;
54+
position: absolute;
55+
width: 40px;
56+
}
57+
58+
.wing-left {
59+
border-radius: 100px 25px 100px 25px;
60+
transform: rotate(100deg);
61+
}
62+
63+
.left-up {
64+
left: -30px;
65+
top: 50%;
66+
}
67+
68+
.left-middle {
69+
left: -15px;
70+
top: 55%;
71+
}
72+
73+
.left-down {
74+
left: 5px;
75+
top: 60%;
76+
}
77+
78+
.wing-right {
79+
border-radius: 25px 100px 25px 100px;
80+
transform: rotate(-100deg);
81+
}
82+
83+
.right-up {
84+
right: -30px;
85+
top: 50%;
86+
}
87+
88+
.right-middle {
89+
right: -15px;
90+
top: 55%;
91+
}
92+
93+
.right-down {
94+
right: 5px;
95+
top: 60%;
96+
}

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,13 @@ <h1>慶祝蛋炒飯成功 :D</h1>
4141
<a class="nav-link hover-border" href="./Liz/Day2 - clock/index.html">栗子 der 時鐘</a>
4242
<a class="nav-link hover-border" href="./Debby/Day-2-clock/index.html">Debby der 時鐘</a>
4343
<a class="nav-link hover-border" href="./pastleo/day-2-clock/index.html">PastLeo der 時鐘</a>
44-
<a class="nav-link hover-border" href="./cindy/Day2-clock/index.html">Cindy der 時鐘</a>
44+
<a class="nav-link hover-border" href="./Cindy/Day2 - clock/index.html">Cindy der 時鐘</a>
4545
</nav>
4646
</div>
4747
<div class="content-border d-flex justify-content-center">
4848
<nav class="nav flex-column my-4">
4949
<a class="nav-link hover-border" href="./Etrex/Day3 - CSS variable/index.html">卡米 der 怕爆</a>
50+
<a class="nav-link hover-border" href="./Cindy/Day3 - CSS variable/index.html">Cindy der 小雞</a>
5051
</nav>
5152
</div>
5253
</div>

0 commit comments

Comments
 (0)