├── images ├── cindy.jpg ├── debby.jpg ├── kami.jpg ├── leo.jpg ├── lesley.jpg ├── liz.jpg └── steven.jpg ├── index.html ├── javascripts └── site.js ├── mission-team.html ├── style.css.map ├── stylesheets ├── _sass │ ├── config │ │ ├── basic.sass │ │ └── varibles.sass │ ├── pages │ │ ├── index.sass │ │ └── team_member.sass │ ├── share │ │ ├── navbar.sass │ │ └── team-member-avatar.sass │ └── style.sass └── style.css └── team ├── Cindy ├── Day2 - clock │ ├── index.html │ ├── main.js │ └── style.css ├── Day3 - CSS variable │ ├── index.html │ ├── main.js │ └── style.css ├── Day4 - Array Cardio Day 1 │ ├── index.html │ └── main.js ├── Day5 - Flex Chick │ └── index.html ├── Day6 - Type Ahead │ ├── index.html │ ├── main.js │ └── style.css ├── Day7 - Array Cardio Day 2 │ ├── index.html │ └── main.js └── Day8 - Canvas │ ├── images │ └── cindy.png │ ├── index.html │ └── main.js ├── Debby ├── Day-1-Dum_Kit │ ├── audio │ │ ├── boom.wav │ │ ├── clap.wav │ │ ├── hihat.wav │ │ ├── kick.wav │ │ ├── openhat.wav │ │ ├── ride.wav │ │ ├── snare.wav │ │ ├── tink.wav │ │ └── tom.wav │ ├── index.html │ ├── javascript │ │ └── all.js │ └── stylesheets │ │ ├── style.css │ │ └── style.sass ├── Day-2-clock │ ├── index.html │ ├── javascript │ │ └── all.js │ └── stylesheets │ │ └── style.css ├── Day-3-CSS_Variables │ ├── index.html │ ├── javascript │ │ └── all.js │ └── stylesheets │ │ └── style.css ├── Day-4-Array_Day_1 │ ├── Array_Cardio_Day_1.html │ ├── all.js │ └── index.html └── Day-7-Array_Day_2 │ ├── all.js │ └── index.html ├── Etrex ├── Day10 - multi check │ └── index.html ├── Day2 - clock │ ├── index.html │ ├── main.js │ └── style.css ├── Day3 - CSS variable │ └── index.html ├── Day5 - menu │ ├── images │ │ ├── 1.PNG │ │ ├── 2.PNG │ │ ├── 3.PNG │ │ ├── 4.PNG │ │ ├── 5.PNG │ │ ├── 6.PNG │ │ ├── 7.PNG │ │ └── 8.PNG │ └── index.html └── Day8 - canvas │ └── index.html ├── Liz ├── Day13 - Slide in on Scroll │ └── index.html ├── Day16 - Mouse Move Shadow │ └── index.html ├── Day2 - clock │ ├── index.html │ ├── main.js │ ├── style.css │ ├── style.css.map │ └── style.scss ├── Day3 - CSS Variables │ ├── index.html │ └── main.js ├── Day4 - Array Cardio Day 1 │ ├── index.html │ └── main.js ├── Day5 - Flex Panel Gallery │ └── index.html ├── Day6 - type ahead │ ├── index.html │ └── style.css ├── Day7 - Array Cardio Day 2 │ └── index.html └── Day8 - Canvas │ └── index.html ├── Steven ├── Day1 - Drum Kit │ ├── README.md │ ├── index-Steven.html │ ├── sounds │ │ ├── boom.wav │ │ ├── clap.wav │ │ ├── hihat.wav │ │ ├── kick.wav │ │ ├── openhat.wav │ │ ├── ride.wav │ │ ├── snare.wav │ │ ├── tink.wav │ │ └── tom.wav │ └── style.css ├── Day10 - Hold Shift and Check Checkboxes │ ├── index-Steven-with-Etrex.html │ └── index-Steven.html ├── Day14 - JavaScript Reference VS Copying │ ├── README.md │ └── index-Steven.html ├── Day16 - Mouse Move Shadow │ ├── README.md │ └── index-Steve.html ├── Day17 - Sort Without Articles │ ├── READ.md │ └── index-Steven.html ├── Day2 - Clock │ ├── README.md │ └── index-Steven.html ├── Day3 - CSS Variables │ ├── README.md │ └── index-Steven.html ├── Day4 - Array Cardio Day 1 │ ├── README.md │ └── index-Steven.html └── Day5 - Flex Panel Gallery │ ├── README.md │ └── index-Steven.html └── pastleo └── day-2-clock ├── index.html ├── main.js └── style.css /images/cindy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/images/cindy.jpg -------------------------------------------------------------------------------- /images/debby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/images/debby.jpg -------------------------------------------------------------------------------- /images/kami.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/images/kami.jpg -------------------------------------------------------------------------------- /images/leo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/images/leo.jpg -------------------------------------------------------------------------------- /images/lesley.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/images/lesley.jpg -------------------------------------------------------------------------------- /images/liz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/images/liz.jpg -------------------------------------------------------------------------------- /images/steven.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/images/steven.jpg -------------------------------------------------------------------------------- /javascripts/site.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/javascripts/site.js -------------------------------------------------------------------------------- /mission-team.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | 黑人問號 JS 社 15 | 16 | 17 | 18 | 19 |
20 | 44 |
45 | 46 |
47 |

MISSION Team

48 | 49 |
50 |
51 |
擺渡人
52 | 普渡 JS 苦手眾生 53 |
54 |
55 | 56 | 57 |
58 | 59 | 60 |
61 |
62 | MENTOR 63 |
64 |
65 | Kakami chu 66 |
67 |
68 |
69 |
卡米
70 |
Kakami chu
71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 |
83 |
84 |
85 |
86 |
87 |

志在普度眾人，行深般若波羅蜜多時，照見五蘊皆空，度一切苦厄的卡米狗之父，人稱廚神小當家卡米的卡米。

88 |
89 |
90 |
91 |
92 | 93 | 94 |
95 |
96 | MENTOR 97 | 98 |
99 |
100 | Shiow shi gua 102 |
103 |
104 |
105 |
小西瓜
106 |
Shiow shi gua
107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 |
118 |
119 |
120 |
121 | 122 |
123 |
124 |

外表看似型男的扛壩子工程師。

125 |
126 |
127 |
128 |
129 | 130 | 131 |
132 |
133 | MENTOR 134 | 135 |
136 |
137 | Shiow shi gua 139 |
140 |
141 |
142 |
Mindy
143 |
Mindy
144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 |
155 |
156 |
157 |
158 | 159 |
160 |
161 |

簡介

162 |
163 |
164 |
165 |
166 | 167 | 168 |
169 | 170 | 171 |
172 |
173 |
被擺渡的人
174 | 深陷在 JS 苦海的人們 175 |
176 | 177 | 178 |
179 |
180 | STUDENT 181 | 182 |
183 |
184 | Debby 185 |
186 |
187 |
188 |
Debby
189 |
UI Designer
190 |
191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |
201 |
202 |
203 |
204 | 205 |
206 |
207 |

美豔絕倫、豔冠四方，長得像標楷體的人都不可以入她的眼裡，人稱傳說中「 0.5 px 都不要想呼嚨我！」的設計師。黛比！

208 |
209 |
210 |
211 |
212 | 213 | 214 |
215 |
216 | STUDENT 217 | 218 |
219 |
220 | Liz 221 |
222 |
223 |
224 |
Liz
225 |
Project Manager
226 |
227 | 228 | 229 | 230 | 231 | 232 | 233 |
234 |
235 |
236 |
237 | 238 |
239 |
240 |

黑人問號社始祖之一。想放棄 JS 嗎？被 git 雷過嗎？相對路徑是什麼？歡迎有以上疑問的黑人問號潛力者入社！

241 |
242 |
243 |
244 |
245 | 246 | 247 |
248 |
249 | STUDENT 250 | 251 |
252 |
253 | Cindy 254 |
255 |
256 |
257 |
Cindy
258 |
Rails Master
259 |
260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 |
270 |
271 |
272 |
273 | 274 |
275 |
276 |

早餐可以吃一週、假動作「白飯攤平之術」的創作始祖，Cindy Liu！

277 |
278 |
279 |
280 |
281 | 282 | 283 |
284 |
285 | STUDENT 286 | 287 |
288 |
289 | Lesley 290 |
291 |
292 |
293 |
兆兆
294 |
Gaming Streamer
295 |
296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 |
306 |
307 |
308 |
309 | 310 |
311 |
312 |

「板橋美麗魅惑咖啡師」你看過嗎？沒看過？現在讓你看看！五倍最罩的兆兆

313 |
314 |
315 |
316 |
317 | 318 | 319 |
320 |
321 | STUDENT 322 | 323 |
324 |
325 | Lesley 327 |
328 |
329 |
330 |
佳蕙
331 |
Gaming Streamer
332 |
333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 |
343 |
344 |
345 |
346 | 347 |
348 |
349 |

觀自在菩薩，行深般若波羅蜜多時，照見五蘊皆空，度一切苦厄。

350 |
351 |
352 |
353 |
354 | 355 | 356 |
357 |
358 | STUDENT 359 | 360 |
361 |
362 | Lesley 364 |
365 |
366 |
367 |
政璇
368 |
JavaScript Master
369 |
370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 |
380 |
381 |
382 |
383 | 384 |
385 |
386 |

Don't rush him Ｔ恤的擁有者。公園單槓伯。

387 |
388 |
389 |
390 |
391 | 392 |
393 |
394 | STUDENT 395 | 396 |
397 |
398 | Lesley 399 |
400 |
401 |
402 |
Steven
403 |
Smack Talk Master
404 |
405 | 406 | 407 | 408 | 409 | 410 | 411 |
412 |
413 |
414 |
415 | 416 |
417 |
418 |

黑人問號 JS 社新社員。

419 |
420 |
421 |
422 |
423 |
424 |
425 | 426 | 433 | 434 | 435 | 436 | 439 | 442 | 445 | 446 | 447 | -------------------------------------------------------------------------------- /style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAUA,AAAA,IAAI,CAAC;EACH,WAAW,EAXiB,OAAO,EAAC,cAAc,EAAC,aAAa,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,kBAAkB;EAYxO,gBAAgB,EAPN,OAAO;EAQjB,KAAK,EAVG,OAAO;CAUA;;AAGjB,AAAA,KAAK;AACL,QAAQ;AACR,MAAM;AACN,GAAG;AACH,CAAC;AACD,MAAM,CAAC;EACL,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,IAAI;CAAG;;AAEjB,AAAA,MAAM,CAAC;EACL,MAAM,EAAE,OAAO;CAAG;;AAEpB,AAAA,MAAM,AAAA,eAAe,CAAC;EACpB,KAAK,EAAE,WAAW;EAClB,WAAW,EAAE,UAAU;CAAG;;AAE5B,AAAA,EAAE,CAAC,EAAE,CAAC;EACJ,UAAU,EAAE,IAAI;CAAG;;AACrB,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,KAAK;CAGgB;;AAJ9B,AAEE,CAFD,AAEE,MAAM,CAAC;EACN,KAAK,EAlCC,OAAO;EAmCb,eAAe,EAAE,IAAI;CAAG;;AAG5B,AAAA,cAAc,CAAC;EACb,gBAAgB,EAAE,uBAAsB;EACxC,aAAa,EAAE,GAAG;CAAG;;AAGvB,AAAA,KAAK,CAAC;EACJ,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,uBAAsB;EACxC,UAAU,EAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,OAAkB;EACjD,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;CAgBA;;AArBpB,AAME,KANG,CAMH,cAAc,CAAC;EACb,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,WAAW,EAAE,KAAK,CAAC,KAAK,CApDlB,OAAO;EAqDb,gBAAgB,EAAE,uBAAsB;CAAG;;AAV/C,AAWE,KAXG,CAWH,YAAY,CAAC;EACX,OAAO,EAAE,EAAE;CAAG;;AAZlB,AAaE,KAbG,CAaH,YAAY,AAAA,QAAQ,CAAC;EACnB,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,gBAAgB,EAAE,OAAO;CAAG;;AAjBhC,AAkBE,KAlBG,CAkBH,eAAe,CAAC;EACd,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,IAAI;CAAG;;AAGlB,AAAA,KAAK,CAAC;EACJ,QAAQ,EAAE,QAAQ;CAa6B;;AAdjD,AAEE,KAFG,CAEH,SAAS,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,KAAK;EACX,SAAS,EAAE,cAAc;EACzB,gBAAgB,EAAE,uBAAsB;CAAG;;AAP/C,AAQE,KARG,CAQH,aAAa,CAAC;EACZ,gBAAgB,EAAE,OAAO;EACzB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC,uBAAsB;EAC7C,YAAY,EAAE,GAAG,CAAC,KAAK,CAAC,uBAAsB;CAGH;;AAd/C,AAaM,KAbD,CAQH,aAAa,CAIX,YAAY,CACV,iBAAiB,CAAC;EAChB,aAAa,EAAE,iBAAiB;CAAG;;AAE3C,AAAA,UAAU,CAAC,SAAS,AAAA,OAAO,EAAE,UAAU,CAAC,KAAK,GAAC,SAAS,CAAC;EACpD,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,sBAAmB;CAAG;;AAG5C,AACE,WADS,CACT,UAAU,CAAC;EACT,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG;CAAG;;AAElB,AACE,cADY,CACZ,YAAY,EADd,cAAc,CACC,YAAY,CAAC;EACxB,MAAM,EAAE,GAAG;CAAG;;AAFlB,AAGE,cAHY,CAGZ,YAAY,CAAC;EACX,KAAK,EAAE,IAAI;CAAG;;AAJlB,AAKE,cALY,CAKZ,YAAY,CAAC;EACX,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,aAAa,CAAC;EACZ,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,uBAAuB;EACzC,UAAU,EAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,uBAAuB;CAAG;;AAMrD,AAAA,aAAa,CAAC;EACZ,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,uBAAsB;EACxC,gBAAgB,EAAE,OAAO;EACzB,aAAa,EAAE,GAAG;CAI6B;;AAPjD,AAIE,aAJW,CAIX,aAAa,CAAC;EACZ,gBAAgB,EAAE,uBAAsB;CAAG;;AAL/C,AAME,aANW,CAMX,SAAS,EANX,aAAa,CAMD,WAAW,CAAC;EACpB,gBAAgB,EAAE,uBAAsB;CAAG;;AAC/C,AAAA,aAAa,AAAA,MAAM,CAAC;EAClB,mBAAmB,EAAE,UAAU;EAC/B,mBAAmB,EAAE,GAAG;EACxB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,OAAkB;CAAG", 4 | "sources": [ 5 | "style.sass" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /stylesheets/_sass/config/basic.sass: -------------------------------------------------------------------------------- 1 | body 2 | font-family: $font-family-base 3 | background-color: $dark-blue 4 | color: $blue 5 | 6 | 7 | input, 8 | textarea, 9 | button, 10 | img, 11 | a, 12 | select 13 | outline: none !important 14 | border: none 15 | 16 | button 17 | cursor: pointer 18 | 19 | select:-moz-focusring 20 | color: transparent 21 | text-shadow: 0 0 0 #000 22 | 23 | ul li 24 | list-style: none 25 | ul,li 26 | margin: 0 27 | padding: 0 28 | 29 | a 30 | color: white 31 | transition: .2s all 32 | &:hover 33 | color: $blue 34 | text-decoration: none -------------------------------------------------------------------------------- /stylesheets/_sass/config/varibles.sass: -------------------------------------------------------------------------------- 1 | $font-family-sans-serif: 'Exo 2','Noto Sans TC',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default 2 | $font-family-base: $font-family-sans-serif !default 3 | 4 | $blue: #2BEEEE 5 | $yellow: #FFB82F 6 | $dark-blue: #161B2D !default 7 | 8 | $primary: #2BEEEE !default 9 | $dark: $dark-blue !default 10 | 11 | // text helper 12 | .text-primary 13 | color: $primary !important 14 | 15 | .text-yellow 16 | color: #FFB82F 17 | 18 | .bg-primary 19 | background-color: $primary 20 | 21 | .custom-alerts 22 | background-color: rgba(255, 184, 47, .1) 23 | color: $yellow 24 | border-radius: 4px 25 | 26 | -------------------------------------------------------------------------------- /stylesheets/_sass/pages/index.sass: -------------------------------------------------------------------------------- 1 | /* index */ 2 | 3 | // index alerts 4 | .rwd-close-mobile 5 | margin-top: 130px 6 | .custom-alerts 7 | display: inline-block 8 | margin: auto 0 9 | 10 | // index main 11 | .page-home 12 | position: relative 13 | .project-folders 14 | background-color: #191F33 15 | border: 1px solid rgba(43, 238, 238, .2) 16 | box-shadow: 10px 10px 0px 0px rgba(43,238,238,1) 17 | border-radius: 0px 18 | position: relative 19 | 20 | .project-folder-name 21 | border-left: 5.8px solid $primary 22 | background-color: rgba(43, 238, 238, .2) 23 | display: inline-block 24 | 25 | .project-list 26 | .col-4+.col-4 27 | border-left: 1px solid rgba(43, 238, 238, .2) 28 | .project-item 29 | margin-bottom: 1.2rem 30 | cursor: default 31 | li 32 | color: $primary 33 | padding: .5rem .7rem 34 | border-radius: 4px 35 | opacity: .4 36 | transition: .2s all 37 | span 38 | color: white 39 | 40 | a.project-item[href*="html"] 41 | cursor: pointer 42 | li 43 | opacity: 1 44 | &:hover 45 | background-color: rgba(43, 238, 238, 0.1) 46 | font-style: italic 47 | span 48 | color: $primary 49 | 50 | 51 | // index left part - team 52 | 53 | .sidebar-team 54 | position: relative 55 | 56 | .team-tag 57 | position: absolute 58 | top: 10% 59 | left: -38px 60 | transform: rotate(-90deg) 61 | background-color: rgba(43, 238, 238, .2) 62 | z-index: -1 63 | padding: 8px 20px 35px 15px 64 | border-radius: 5px 65 | 66 | &:after 67 | content: "" 68 | background: linear-gradient(180deg, #13192e 0%, rgba(22, 27, 45, 0.7) 70%,rgba(22, 27, 45, 0) 100%) 69 | position: absolute 70 | top: 0 71 | left: 15px 72 | height: 110px 73 | width: calc(100% - 30px) 74 | z-index: 1 75 | 76 | &:before 77 | content: "" 78 | background: linear-gradient(0deg, #13192e 0%, rgba(22, 27, 45, 0) 100%) 79 | position: absolute 80 | bottom: 0 81 | left: 0 82 | height: 80px 83 | width: 100% 84 | z-index: 2 85 | 86 | .team-member-list 87 | position: relative 88 | min-height: 800px 89 | height: calc(100vh - 56px) 90 | overflow: scroll 91 | background: linear-gradient(180deg, #161b2d 0%, #191f33 30%, #191f33 87%, #161b2d 100%) 92 | // background-color: #191F33 93 | z-index: 1 94 | border-left: 1px solid rgba(43, 238, 238, .2) 95 | border-right: 1px solid rgba(43, 238, 238, .2) 96 | box-shadow: 0px 0px 30px #0C1431 97 | padding: 70px 0px 50px 0px 98 | 99 | .team-member-item 100 | display: block 101 | align-items: center 102 | transition: .2s all 103 | opacity: .7 104 | 105 | &:hover 106 | opacity: 1 107 | p 108 | transform: translatey(0px) 109 | &:before 110 | transition: .2s all 111 | bottom: -5px 112 | opacity: 1 113 | .team-member-avatar 114 | transform: scale(1) 115 | box-shadow: 0 0 0 4px #ffc107a1, 0 0 0 15px #ffc10738 116 | 117 | .team-member-avatar 118 | margin: 0 auto 119 | display: block 120 | transition: .2s all 121 | transform: scale(.9) 122 | p 123 | display: inline-block 124 | position: relative 125 | transform: translatey(-3px) 126 | transition: .2s all 127 | &:before 128 | content: "" 129 | background-color: $yellow 130 | width: 100% 131 | height: 2px 132 | position: absolute 133 | bottom: 0px 134 | opacity: 0 135 | 136 | .active.team-member-item 137 | opacity: 1 138 | p 139 | color: $primary 140 | transform: translatey(0px) 141 | &:before 142 | bottom: -5px 143 | opacity: 1 144 | .team-member-avatar 145 | transform: scale(1) 146 | box-shadow: 0 0 0 4px #ffc107a1, 0 0 0 15px #ffc10738 147 | -------------------------------------------------------------------------------- /stylesheets/_sass/pages/team_member.sass: -------------------------------------------------------------------------------- 1 | /* Team member */ 2 | .team-title 3 | position: relative 4 | &:after 5 | content: "" 6 | position: absolute 7 | background-color: white 8 | height: 2px 9 | width: 50px 10 | bottom: 0 11 | left: 50% 12 | transform: translateX(-50%) 13 | 14 | .team-subtitle 15 | h5 16 | display: inline-block 17 | position: relative 18 | &:after 19 | content: "" 20 | position: absolute 21 | background-color: white 22 | height: 2px 23 | width: 100% 24 | left: 0 25 | bottom: 0 26 | 27 | 28 | // team member cards 29 | .member-card 30 | border: 1px solid rgba(43, 238, 238, .2) 31 | background-color: #191F33 32 | border-radius: 0px 33 | position: relative 34 | min-height: 100% 35 | transition: .2s all 36 | 37 | &:hover 38 | box-shadow: 5px 5px 0px 0px #2beeee 39 | transform: translate(-5px,-5px) 40 | 41 | .card-tag 42 | display: inline-block 43 | position: absolute 44 | right: 0 45 | top: 0 46 | 47 | .member-card-social 48 | a 49 | margin-right: 1.2rem 50 | &:hover 51 | color: $primary 52 | 53 | .card-tag,.card-content p 54 | background-color: rgba(43, 238, 238, .2) 55 | 56 | -------------------------------------------------------------------------------- /stylesheets/_sass/share/navbar.sass: -------------------------------------------------------------------------------- 1 | .navbar 2 | .navbar-brand 3 | &:hover 4 | color: white !important 5 | 6 | .navbar-toggler 7 | border: none 8 | font-size: 1.3rem 9 | 10 | .navbar-collapse.show 11 | margin-top: 10px 12 | padding-right: 14px 13 | .nav-item 14 | a 15 | text-align: right -------------------------------------------------------------------------------- /stylesheets/_sass/share/team-member-avatar.sass: -------------------------------------------------------------------------------- 1 | .team-member-avatar 2 | object-fit: cover 3 | object-position: center 4 | width: 100% 5 | box-shadow: 0 0 0 7px rgba(43, 238, 238, 0.12), 0 0 0 10px rgba(43, 238, 238, 0.15) 6 | -------------------------------------------------------------------------------- /stylesheets/_sass/style.sass: -------------------------------------------------------------------------------- 1 | /* config */ 2 | @import 'config/varibles.sass' 3 | @import 'config/basic.sass' 4 | 5 | /* share */ 6 | @import 'share/navbar.sass' 7 | @import 'share/team-member-avatar.sass' 8 | /* pages */ 9 | @import 'pages/index.sass' 10 | @import 'pages/team_member.sass' 11 | -------------------------------------------------------------------------------- /stylesheets/style.css: -------------------------------------------------------------------------------- 1 | /* config */ 2 | .text-primary { 3 | color: #2BEEEE !important; 4 | } 5 | 6 | .text-yellow { 7 | color: #FFB82F; 8 | } 9 | 10 | .bg-primary { 11 | background-color: #2BEEEE; 12 | } 13 | 14 | .custom-alerts { 15 | background-color: rgba(255, 184, 47, 0.1); 16 | color: #FFB82F; 17 | border-radius: 4px; 18 | } 19 | 20 | body { 21 | font-family: "Exo 2", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 22 | background-color: #161B2D; 23 | color: #2BEEEE; 24 | } 25 | 26 | input, 27 | textarea, 28 | button, 29 | img, 30 | a, 31 | select { 32 | outline: none !important; 33 | border: none; 34 | } 35 | 36 | button { 37 | cursor: pointer; 38 | } 39 | 40 | select:-moz-focusring { 41 | color: transparent; 42 | text-shadow: 0 0 0 #000; 43 | } 44 | 45 | ul li { 46 | list-style: none; 47 | } 48 | 49 | ul, li { 50 | margin: 0; 51 | padding: 0; 52 | } 53 | 54 | a { 55 | color: white; 56 | transition: 0.2s all; 57 | } 58 | a:hover { 59 | color: #2BEEEE; 60 | text-decoration: none; 61 | } 62 | 63 | /* share */ 64 | .navbar .navbar-brand:hover { 65 | color: white !important; 66 | } 67 | .navbar .navbar-toggler { 68 | border: none; 69 | font-size: 1.3rem; 70 | } 71 | .navbar .navbar-collapse.show { 72 | margin-top: 10px; 73 | padding-right: 14px; 74 | } 75 | .navbar .navbar-collapse.show .nav-item a { 76 | text-align: right; 77 | } 78 | 79 | .team-member-avatar { 80 | object-fit: cover; 81 | object-position: center; 82 | width: 100%; 83 | box-shadow: 0 0 0 7px rgba(43, 238, 238, 0.12), 0 0 0 10px rgba(43, 238, 238, 0.15); 84 | } 85 | 86 | /* pages */ 87 | /* index */ 88 | .rwd-close-mobile { 89 | margin-top: 130px; 90 | } 91 | .rwd-close-mobile .custom-alerts { 92 | display: inline-block; 93 | margin: auto 0; 94 | } 95 | 96 | .page-home { 97 | position: relative; 98 | } 99 | .page-home .project-folders { 100 | background-color: #191F33; 101 | border: 1px solid rgba(43, 238, 238, 0.2); 102 | box-shadow: 10px 10px 0px 0px #2beeee; 103 | border-radius: 0px; 104 | position: relative; 105 | } 106 | .page-home .project-folders .project-folder-name { 107 | border-left: 5.8px solid #2BEEEE; 108 | background-color: rgba(43, 238, 238, 0.2); 109 | display: inline-block; 110 | } 111 | .page-home .project-folders .project-list .col-4 + .col-4 { 112 | border-left: 1px solid rgba(43, 238, 238, 0.2); 113 | } 114 | .page-home .project-folders .project-list .project-item { 115 | margin-bottom: 1.2rem; 116 | cursor: default; 117 | } 118 | .page-home .project-folders .project-list .project-item li { 119 | color: #2BEEEE; 120 | padding: 0.5rem 0.7rem; 121 | border-radius: 4px; 122 | opacity: 0.4; 123 | transition: 0.2s all; 124 | } 125 | .page-home .project-folders .project-list .project-item li span { 126 | color: white; 127 | } 128 | .page-home .project-folders .project-list a.project-item[href*=html] { 129 | cursor: pointer; 130 | } 131 | .page-home .project-folders .project-list a.project-item[href*=html] li { 132 | opacity: 1; 133 | } 134 | .page-home .project-folders .project-list a.project-item[href*=html] li:hover { 135 | background-color: rgba(43, 238, 238, 0.1); 136 | font-style: italic; 137 | } 138 | .page-home .project-folders .project-list a.project-item[href*=html] li:hover span { 139 | color: #2BEEEE; 140 | } 141 | .page-home .sidebar-team { 142 | position: relative; 143 | } 144 | .page-home .sidebar-team .team-tag { 145 | position: absolute; 146 | top: 10%; 147 | left: -38px; 148 | transform: rotate(-90deg); 149 | background-color: rgba(43, 238, 238, 0.2); 150 | z-index: -1; 151 | padding: 8px 20px 35px 15px; 152 | border-radius: 5px; 153 | } 154 | .page-home .sidebar-team:after { 155 | content: ""; 156 | background: linear-gradient(180deg, #13192e 0%, rgba(22, 27, 45, 0.7) 70%, rgba(22, 27, 45, 0) 100%); 157 | position: absolute; 158 | top: 0; 159 | left: 15px; 160 | height: 110px; 161 | width: calc(100% - 30px); 162 | z-index: 1; 163 | } 164 | .page-home .sidebar-team:before { 165 | content: ""; 166 | background: linear-gradient(0deg, #13192e 0%, rgba(22, 27, 45, 0) 100%); 167 | position: absolute; 168 | bottom: 0; 169 | left: 0; 170 | height: 80px; 171 | width: 100%; 172 | z-index: 2; 173 | } 174 | .page-home .sidebar-team .team-member-list { 175 | position: relative; 176 | min-height: 800px; 177 | height: calc(100vh - 56px); 178 | overflow: scroll; 179 | background: linear-gradient(180deg, #161b2d 0%, #191f33 30%, #191f33 87%, #161b2d 100%); 180 | z-index: 1; 181 | border-left: 1px solid rgba(43, 238, 238, 0.2); 182 | border-right: 1px solid rgba(43, 238, 238, 0.2); 183 | box-shadow: 0px 0px 30px #0C1431; 184 | padding: 70px 0px 50px 0px; 185 | } 186 | .page-home .sidebar-team .team-member-list .team-member-item { 187 | display: block; 188 | align-items: center; 189 | transition: 0.2s all; 190 | opacity: 0.7; 191 | } 192 | .page-home .sidebar-team .team-member-list .team-member-item:hover { 193 | opacity: 1; 194 | } 195 | .page-home .sidebar-team .team-member-list .team-member-item:hover p { 196 | transform: translatey(0px); 197 | } 198 | .page-home .sidebar-team .team-member-list .team-member-item:hover p:before { 199 | transition: 0.2s all; 200 | bottom: -5px; 201 | opacity: 1; 202 | } 203 | .page-home .sidebar-team .team-member-list .team-member-item:hover .team-member-avatar { 204 | transform: scale(1); 205 | box-shadow: 0 0 0 4px #ffc107a1, 0 0 0 15px #ffc10738; 206 | } 207 | .page-home .sidebar-team .team-member-list .team-member-item .team-member-avatar { 208 | margin: 0 auto; 209 | display: block; 210 | transition: 0.2s all; 211 | transform: scale(0.9); 212 | } 213 | .page-home .sidebar-team .team-member-list .team-member-item p { 214 | display: inline-block; 215 | position: relative; 216 | transform: translatey(-3px); 217 | transition: 0.2s all; 218 | } 219 | .page-home .sidebar-team .team-member-list .team-member-item p:before { 220 | content: ""; 221 | background-color: #FFB82F; 222 | width: 100%; 223 | height: 2px; 224 | position: absolute; 225 | bottom: 0px; 226 | opacity: 0; 227 | } 228 | .page-home .sidebar-team .team-member-list .active.team-member-item { 229 | opacity: 1; 230 | } 231 | .page-home .sidebar-team .team-member-list .active.team-member-item p { 232 | color: #2BEEEE; 233 | transform: translatey(0px); 234 | } 235 | .page-home .sidebar-team .team-member-list .active.team-member-item p:before { 236 | bottom: -5px; 237 | opacity: 1; 238 | } 239 | .page-home .sidebar-team .team-member-list .active.team-member-item .team-member-avatar { 240 | transform: scale(1); 241 | box-shadow: 0 0 0 4px #ffc107a1, 0 0 0 15px #ffc10738; 242 | } 243 | 244 | /* Team member */ 245 | .team-title { 246 | position: relative; 247 | } 248 | .team-title:after { 249 | content: ""; 250 | position: absolute; 251 | background-color: white; 252 | height: 2px; 253 | width: 50px; 254 | bottom: 0; 255 | left: 50%; 256 | transform: translateX(-50%); 257 | } 258 | 259 | .team-subtitle h5 { 260 | display: inline-block; 261 | position: relative; 262 | } 263 | .team-subtitle h5:after { 264 | content: ""; 265 | position: absolute; 266 | background-color: white; 267 | height: 2px; 268 | width: 100%; 269 | left: 0; 270 | bottom: 0; 271 | } 272 | 273 | .member-card { 274 | border: 1px solid rgba(43, 238, 238, 0.2); 275 | background-color: #191F33; 276 | border-radius: 0px; 277 | position: relative; 278 | min-height: 100%; 279 | transition: 0.2s all; 280 | } 281 | .member-card:hover { 282 | box-shadow: 5px 5px 0px 0px #2beeee; 283 | transform: translate(-5px, -5px); 284 | } 285 | .member-card .card-tag { 286 | display: inline-block; 287 | position: absolute; 288 | right: 0; 289 | top: 0; 290 | } 291 | .member-card .member-card-social a { 292 | margin-right: 1.2rem; 293 | } 294 | .member-card .member-card-social a:hover { 295 | color: #2BEEEE; 296 | } 297 | .member-card .card-tag, .member-card .card-content p { 298 | background-color: rgba(43, 238, 238, 0.2); 299 | } -------------------------------------------------------------------------------- /team/Cindy/Day2 - clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS + CSS Clock 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |

點我報時


15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |

32 |
33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /team/Cindy/Day2 - clock/main.js: -------------------------------------------------------------------------------- 1 | const secondHand = document.querySelector('.second-hand'); 2 | const minsHand = document.querySelector('.min-hand'); 3 | const hourHand = document.querySelector('.hour-hand'); 4 | const time = document.querySelector('.time'); 5 | const dot = document.querySelector('.dot'); 6 | const audio = document.querySelector('.time-audio'); 7 | const chickHead = document.querySelector('.chick-head'); 8 | 9 | const caculateSeconds = (seconds) => { 10 | const secondsDegrees = ((seconds / 60) * 360) + 90; 11 | secondHand.style.transform = `rotate(${secondsDegrees}deg)`; 12 | } 13 | 14 | const caculateMins = (mins) => { 15 | const minsDegrees = ((mins / 60) * 360) + 90; 16 | minsHand.style.transform = `rotate(${minsDegrees}deg)`; 17 | } 18 | 19 | const caculateHours = (hour) => { 20 | const hourDegrees = ((hour / 12) * 360) + 90; 21 | hourHand.style.transform = `rotate(${hourDegrees}deg)`; 22 | } 23 | 24 | const setDate = () => { 25 | const date = new Date(); 26 | const seconds = date.getSeconds(); 27 | const mins = date.getMinutes(); 28 | const hour = date.getHours(); 29 | time.innerHTML = date; 30 | caculateSeconds(seconds); 31 | caculateMins(mins); 32 | caculateHours(hour); 33 | } 34 | 35 | chickHead.addEventListener('click', () => { 36 | const msg = new SpeechSynthesisUtterance; 37 | msg.text = `${time.innerText.slice(16, 24)} 咕咕`; 38 | msg.rate = 2; 39 | speechSynthesis.speak(msg); 40 | }); 41 | 42 | setInterval(setDate, 10); 43 | -------------------------------------------------------------------------------- /team/Cindy/Day2 - clock/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-size: cover; 3 | font-family: 'helvetica neue'; 4 | font-size: 10px; 5 | text-align: center; 6 | } 7 | 8 | body { 9 | align-items: center; 10 | display: flex; 11 | font-size: 2rem; 12 | flex: 1; 13 | margin: 0; 14 | min-height: 100vh; 15 | } 16 | 17 | .chick { 18 | margin: auto; 19 | position: relative; 20 | } 21 | 22 | .triangle { 23 | background-color: red; 24 | -webkit-clip-path: polygon(49% 1%, 67% 70%, 82% 0, 100% 100%, 74% 88%, 48% 85%, 20% 90%, 0 100%, 10% 0, 30% 71%); 25 | clip-path: polygon(49% 1%, 67% 70%, 82% 0, 100% 100%, 74% 88%, 48% 85%, 20% 90%, 0 100%, 10% 0, 30% 71%); 26 | height: 100px; 27 | width: 350px; 28 | } 29 | 30 | .wing { 31 | background-color: rgb(243, 203, 72); 32 | height: 100px; 33 | position: absolute; 34 | width: 40px; 35 | } 36 | 37 | .wing-left { 38 | border-radius: 100px 25px 100px 25px; 39 | transform: rotate(100deg); 40 | } 41 | 42 | .left-up { 43 | left: -30px; 44 | top: 50%; 45 | } 46 | 47 | .left-middle { 48 | left: -15px; 49 | top: 55%; 50 | } 51 | 52 | .left-down { 53 | left: 5px; 54 | top: 60%; 55 | } 56 | 57 | .wing-right { 58 | border-radius: 25px 100px 25px 100px; 59 | transform: rotate(-100deg); 60 | } 61 | 62 | .right-up { 63 | right: -30px; 64 | top: 50%; 65 | } 66 | 67 | .right-middle { 68 | right: -15px; 69 | top: 55%; 70 | } 71 | 72 | .right-down { 73 | right: 5px; 74 | top: 60%; 75 | } 76 | 77 | .clock { 78 | background-color: rgb(243, 203, 72); 79 | border-radius: 50%; 80 | height: 30rem; 81 | padding: 2rem; 82 | position: relative; 83 | width: 30rem; 84 | } 85 | 86 | .clock-face { 87 | height: 100%; 88 | position: relative; 89 | transform: translateY(-3px); 90 | width: 100%; 91 | } 92 | 93 | .hand { 94 | background: black; 95 | height: 6px; 96 | position: absolute; 97 | top: 50%; 98 | transform-origin: 100%; 99 | transform: rotate(90deg); 100 | transition: all 0.05s; 101 | transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 102 | width: 50%; 103 | } 104 | 105 | .second-hand { 106 | height: 2px; 107 | } 108 | 109 | .hour-hand { 110 | right: 50%; 111 | width: 30%; 112 | } 113 | 114 | .dot:hover { 115 | transform: translateY(-20px) rotate(15deg) scale(1.2); 116 | } 117 | 118 | .chick-head:hover { 119 | transform: translateY(20px) rotate(-30deg) scale(5.2); 120 | } 121 | 122 | .dot { 123 | background-color: black; 124 | border-radius: 50%; 125 | display: inline-block; 126 | height: 1rem; 127 | padding: 2rem; 128 | position: relative; 129 | width: 1rem; 130 | } 131 | -------------------------------------------------------------------------------- /team/Cindy/Day3 - CSS variable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS + CSS variable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /team/Cindy/Day3 - CSS variable/main.js: -------------------------------------------------------------------------------- 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)); 10 | -------------------------------------------------------------------------------- /team/Cindy/Day3 - CSS variable/style.css: -------------------------------------------------------------------------------- 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 | } 97 | -------------------------------------------------------------------------------- /team/Cindy/Day4 - Array Cardio Day 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Array Cardio 💪 7 | 8 | 9 |

Psst: have a look at the JavaScript Console

10 |
-- 11 |
-- 12 |
-- 13 |
-- 14 |
-- 15 |
-- 16 |
-- 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /team/Cindy/Day4 - Array Cardio Day 1/main.js: -------------------------------------------------------------------------------- 1 | const q1 = document.querySelector('.q1'); 2 | const q2 = document.querySelector('.q2'); 3 | const q3 = document.querySelector('.q3'); 4 | const q4 = document.querySelector('.q4'); 5 | const q5 = document.querySelector('.q5'); 6 | const q6 = document.querySelector('.q6'); 7 | const q7 = document.querySelector('.q7'); 8 | const q8 = document.querySelector('.q8'); 9 | // Get your shorts on - this is an array workout! 10 | // ## Array Cardio Day 1 11 | 12 | // Some data we can work with 13 | const inventors = [ 14 | { first: '🐣', last: '🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣', year: 1879, passed: 1955 }, 15 | { first: '🐤', last: '🐤🐤🐤🐤', year: 1643, passed: 1727 }, 16 | { first: '🐔', last: '🐔🐔', year: 1564, passed: 1642 }, 17 | { first: '🐥', last: '🐥🐥🐥🐥🐥🐥🐥🐥🐥', year: 1867, passed: 1934 }, 18 | { first: '🐓', last: '🐓🐓🐓', year: 1571, passed: 1630 }, 19 | { first: '🐔', last: '🐔', year: 1473, passed: 1543 }, 20 | { first: '🐥', last: '🐥🐥🐥🐥🐥🐥🐥🐥', year: 1858, passed: 1947 }, 21 | { first: '🐣', last: '🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣', year: 1898, passed: 1979 }, 22 | { first: '🐤', last: '🐤🐤🐤🐤🐤', year: 1815, passed: 1852 }, 23 | { first: '🐥', last: '🐥🐥🐥🐥🐥🐥🐥', year: 1855, passed: 1905 }, 24 | { first: '🐣', last: '🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣', year: 1878, passed: 1968 }, 25 | { first: '🐤', last: '🐤🐤🐤🐤🐤🐤', year: 1829, passed: 1909 } 26 | ]; 27 | 28 | const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; 29 | 30 | // Array.prototype.filter() 31 | // 1. Filter the list of inventors for those who were born in the 1500's 32 | const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); 33 | console.table(fifteen); 34 | q1.innerHTML = JSON.stringify(fifteen); 35 | 36 | // Array.prototype.map() 37 | // 2. Give us an array of the inventors first and last names 38 | const name = inventors.map(inventor => `${inventor.first} ${inventor.last}`); 39 | console.table(name); 40 | q2.innerHTML = name; 41 | 42 | // Array.prototype.sort() 43 | // 3. Sort the inventors by birthdate, oldest to youngest 44 | const sort = inventors.sort((a, b) => a.year > b.year ? 1 : -1); 45 | console.table(sort); 46 | q3.innerHTML = JSON.stringify(sort); 47 | 48 | // Array.prototype.reduce() 49 | // 4. How many years did all the inventors live all together? 50 | const reduce = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0); 51 | console.log(reduce); 52 | q4.innerHTML = reduce 53 | 54 | // 5. Sort the inventors by years lived 55 | const sortLive = inventors.sort((a, b) => (a.passed - a.year) > (b.passed - b.year) ? -1 : 1); 56 | console.table(sortLive); 57 | q5.innerHTML = JSON.stringify(sortLive); 58 | 59 | // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name 60 | // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris 61 | // const category = document.querySelector('.mw-category'); 62 | // const links = Array.from(category.querySelectorAll('a')); 63 | // const de = links 64 | // .map(link => link.textContent) 65 | // .filter(streetName => streetName.includes('de')); 66 | q6.innerHTML = ["Boulevard de l'Amiral-Bruix", "Boulevard des Capucines", "Boulevard de la Chapelle", "Boulevard de Clichy", "Boulevard de l'Hôpital", "Boulevard des Italiens", "Boulevard de la Madeleine", "Boulevard de Magenta", "Boulevard Marguerite-de-Rochechouart", "Boulevard de Sébastopol", "Boulevard de Strasbourg", "Boulevard de la Zone"]; 67 | 68 | // 7. sort Exercise 69 | // Sort the people alphabetically by last name 70 | // 英文姓名一般都是先寫名(First Name)，再寫姓(Last Name/Surname)，若是先寫姓再寫名，標準格式是會加上一個逗號(，) 71 | const sortPeople = people.sort((a, b) => a.split(', ')[0] > b.split(', ')[0] ? 1 : -1); 72 | console.log(sortPeople); 73 | q7.innerHTML = sortPeople; 74 | 75 | // 8. Reduce Exercise 76 | // Sum up the instances of each of these 77 | const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; 78 | const sum = data.reduce((obj, item) => { 79 | if (!obj[item]) { 80 | obj[item] = 0; 81 | } 82 | obj[item]++; 83 | return obj; 84 | }, {}); 85 | console.log(sum); 86 | q8.innerHTML = JSON.stringify(sum); 87 | -------------------------------------------------------------------------------- /team/Cindy/Day5 - Flex Chick/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex chicks 💪 7 | 8 | 9 | 35 | 36 |
37 | chick 38 | chick 39 | chick 40 | chick 41 | chick 42 | chick 43 | chick 44 | chick 45 | chick 46 | chick 47 |
48 | 49 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /team/Cindy/Day6 - Type Ahead/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Type Ahead 👀 6 | 7 | 8 | 9 |
10 | 11 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /team/Cindy/Day6 - Type Ahead/main.js: -------------------------------------------------------------------------------- 1 | const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; 2 | 3 | const cities = [] 4 | 5 | const searchInput = document.querySelector('.search'); 6 | const suggestions = document.querySelector('.suggestions'); 7 | const originHtml = suggestions.innerHTML 8 | 9 | fetch(endpoint) 10 | .then(blob => blob.json()) 11 | .then(data => cities.push(...data)); 12 | 13 | const findMatches = (wordToMatch, cities) => { 14 | return cities.filter(place => { 15 | const regex = new RegExp(wordToMatch, 'gi'); 16 | return place.city.match(regex) || place.state.match(regex); 17 | }); 18 | } 19 | 20 | const numberWithCommas = (x) => { 21 | return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); 22 | } 23 | 24 | const displayMatches = (e) => { 25 | if (e.target.value === '') { return suggestions.innerHTML = originHtml } 26 | 27 | const matchArray = findMatches(e.target.value, cities); 28 | const html = matchArray.map(place => { 29 | const regex = new RegExp(e.target.value, 'gi'); 30 | const cityName = place.city.replace(regex, `${e.target.value}`); 31 | const stateName = place.state.replace(regex, `${e.target.value}`); 32 | return ` 33 |
  • 34 | ${cityName}, ${stateName} 35 | ${numberWithCommas(place.population)} 36 |
    • 37 | `; 38 | }).join(''); 39 | suggestions.innerHTML = html; 40 | } 41 | 42 | searchInput.addEventListener('change', displayMatches); 43 | searchInput.addEventListener('keyup', displayMatches); 44 | -------------------------------------------------------------------------------- /team/Cindy/Day6 - Type Ahead/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | background: #ffc600; 4 | font-family: 'helvetica neue'; 5 | font-size: 20px; 6 | font-weight: 200; 7 | } 8 | 9 | *, *:before, *:after { 10 | box-sizing: inherit; 11 | } 12 | 13 | input { 14 | width: 100%; 15 | padding: 20px; 16 | } 17 | 18 | .search-form { 19 | max-width: 400px; 20 | margin: 50px auto; 21 | } 22 | 23 | input.search { 24 | margin: 0; 25 | text-align: center; 26 | outline: 0; 27 | border: 10px solid #F7F7F7; 28 | width: 120%; 29 | left: -10%; 30 | position: relative; 31 | top: 10px; 32 | z-index: 2; 33 | border-radius: 5px; 34 | font-size: 40px; 35 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); 36 | } 37 | 38 | .suggestions { 39 | margin: 0; 40 | padding: 0; 41 | position: relative; 42 | /*perspective: 20px;*/ 43 | } 44 | 45 | .suggestions li { 46 | background: white; 47 | list-style: none; 48 | border-bottom: 1px solid #D8D8D8; 49 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); 50 | margin: 0; 51 | padding: 20px; 52 | transition: background 0.2s; 53 | display: flex; 54 | justify-content: space-between; 55 | text-transform: capitalize; 56 | } 57 | 58 | .suggestions li:nth-child(even) { 59 | transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); 60 | background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); 61 | } 62 | 63 | .suggestions li:nth-child(odd) { 64 | transform: perspective(100px) rotateX(-3deg) translateY(3px); 65 | background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); 66 | } 67 | 68 | span.population { 69 | font-size: 15px; 70 | } 71 | 72 | .hl { 73 | background: #ffc600; 74 | } 75 | -------------------------------------------------------------------------------- /team/Cindy/Day7 - Array Cardio Day 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Array Cardio 💪💪 6 | 7 | 8 |

    Psst: have a look at the JavaScript Console 🐤

    9 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /team/Cindy/Day7 - Array Cardio Day 2/main.js: -------------------------------------------------------------------------------- 1 | const answer1 = document.querySelector('.answer1'); 2 | const answer2 = document.querySelector('.answer2'); 3 | const answer3 = document.querySelector('.answer3'); 4 | const answer4 = document.querySelector('.answer4'); 5 | 6 | const people = [ 7 | { name: 'Wes', year: 1988 }, 8 | { name: 'Kait', year: 1986 }, 9 | { name: 'Irv', year: 1970 }, 10 | { name: 'Lux', year: 2015 } 11 | ]; 12 | 13 | const comments = [ 14 | { text: 'Love this!', id: 523423 }, 15 | { text: 'Super good', id: 823423 }, 16 | { text: 'You are the best', id: 2039842 }, 17 | { text: 'Ramen is my fav food ever', id: 123523 }, 18 | { text: 'Nice Nice Nice!', id: 542328 } 19 | ]; 20 | 21 | // Some and Every Checks 22 | // Array.prototype.some() // is at least one person 19 or older? 23 | // Array.prototype.every() // is everyone 19 or older? 24 | const isAudlt = people.some(person => (new Date()).getFullYear() - person.year >= 19); 25 | console.log(`is at least one person 19 or older? ${isAudlt}`); 26 | answer1.innerHTML = isAudlt; 27 | const allAdult = people.every(person => (new Date()).getFullYear() - person.year >= 19); 28 | console.log(`is everyone 19 or older? ${allAdult}`); 29 | answer2.innerHTML = allAdult; 30 | 31 | // Array.prototype.find() 32 | // Find is like filter, but instead returns just the one you are looking for 33 | // find the comment with the ID of 823423 34 | const findComment = comments.find(comment => comment.id === 823423); 35 | console.log(findComment); 36 | answer3.innerHTML = `text: ${findComment.text}, id: ${findComment.id}`; 37 | 38 | // Array.prototype.findIndex() 39 | // Find the comment with this ID 40 | // delete the comment with the ID of 823423 41 | const findCommentIndex = comments.findIndex(comment => comment.id === 823423); 42 | console.log(`findCommentIndex: ${findCommentIndex}`); 43 | comments.splice(findCommentIndex, 1); 44 | console.log(comments); 45 | answer4.innerHTML = JSON.stringify(comments) 46 | -------------------------------------------------------------------------------- /team/Cindy/Day8 - Canvas/images/cindy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Cindy/Day8 - Canvas/images/cindy.png -------------------------------------------------------------------------------- /team/Cindy/Day8 - Canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Canvas 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /team/Cindy/Day8 - Canvas/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('#draw'); 2 | const ctx = canvas.getContext('2d'); 3 | const colorInput = document.querySelector('#color'); 4 | const sizeInput = document.querySelector('#size'); 5 | canvas.width = window.innerWidth; 6 | canvas.height = window.innerHeight; 7 | 8 | let isDrawing = false; 9 | let lastX = 0; 10 | let lastY = 0; 11 | let color = "#ffc600"; 12 | let size = 50; 13 | ctx.lineJoin = 'round'; 14 | ctx.lineCap = 'round'; 15 | 16 | const draw = (e) => { 17 | if (!isDrawing) return; 18 | // console.log(e); 19 | ctx.lineWidth = size; 20 | ctx.strokeStyle = color; 21 | ctx.beginPath(); 22 | // start from 23 | ctx.moveTo(lastX, lastY); 24 | // go to 25 | ctx.lineTo(e.offsetX, e.offsetY); 26 | ctx.stroke(); 27 | [lastX, lastY] = [e.offsetX, e.offsetY]; 28 | } 29 | 30 | const updateColor = (e) => { 31 | color = e.target.value; 32 | } 33 | 34 | const updateSize = (e) => { 35 | size = e.target.value; 36 | } 37 | 38 | canvas.addEventListener('mousedown', (e) => { 39 | isDrawing = true; 40 | [lastX, lastY] = [e.offsetX, e.offsetY]; 41 | }); 42 | 43 | colorInput.addEventListener('input', updateColor); 44 | sizeInput.addEventListener('input', updateSize); 45 | canvas.addEventListener('mousemove', draw); 46 | canvas.addEventListener('mouseup', () => isDrawing = false); 47 | canvas.addEventListener('mouseout', () => isDrawing = false); 48 | -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/boom.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/clap.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/hihat.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/kick.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/openhat.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/ride.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/snare.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/tink.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/audio/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Debby/Day-1-Dum_Kit/audio/tom.wav -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS 30 | day 1 - Drum Kit 6 | 7 | 8 | 9 |
    10 |
    11 |

    12 | A 13 |

    14 | Clap 15 |
    16 |
    17 |

    18 | S 19 |

    20 | Hihat 21 |
    22 |
    23 |

    24 | D 25 |

    26 | Kick 27 |
    28 |
    29 |

    30 | F 31 |

    32 | Openhat 33 |
    34 |
    35 |

    36 | G 37 |

    38 | Boom 39 |
    40 |
    41 |

    42 | H 43 |

    44 | Ride 45 |
    46 |
    47 |

    48 | J 49 |

    50 | Snare 51 |
    52 |
    53 |

    54 | K 55 |

    56 | Tom 57 |
    58 |
    59 |

    60 | L 61 |

    62 | Tink 63 |
    64 |
    65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/javascript/all.js: -------------------------------------------------------------------------------- 1 | function playSound(e) { 2 | const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 3 | const keybox = document.querySelector(`div.keybox[data-key="${e.keyCode}"]`); 4 | if(!audio) return; 5 | // console.log(e.keyCode); 6 | // console.log(audio); 7 | // console.log(keybox); 8 | audio.currentTime = 0; 9 | audio.play(); 10 | keybox.classList.add('active'); 11 | }; 12 | 13 | function clickSound(e) { 14 | if(e.target.className !== 'keybox' ) return; 15 | console.log(e.target.dataset.key); 16 | const datakey = e.target.dataset.key; 17 | const audio = document.querySelector(`audio[data-key="${datakey}"]`); 18 | audio.currentTime = 0; 19 | audio.play(); 20 | } 21 | 22 | 23 | function removeTransition(e){ 24 | if(e.propertyName !== 'background-color') return; 25 | // console.log(e.propertyName); 26 | this.classList.remove('active'); 27 | }; 28 | 29 | const keyboxs = document.querySelectorAll('.keybox'); 30 | keyboxs.forEach(keybox => keybox.addEventListener('transitionend',removeTransition)); 31 | 32 | window.addEventListener('keydown',playSound); 33 | window.addEventListener('click',clickSound); -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | position: relative; 5 | } 6 | 7 | body { 8 | background-color: #172129; 9 | font-family: "Yantramanav", sans-serif; 10 | } 11 | 12 | h2 { 13 | font-size: 2rem; 14 | padding-bottom: 5px; 15 | } 16 | 17 | kbd { 18 | font-family: "Yantramanav", sans-serif; 19 | } 20 | 21 | span { 22 | border-top: 1px solid #214259; 23 | width: 100%; 24 | display: block; 25 | padding-top: 8px; 26 | } 27 | 28 | .container { 29 | display: flex; 30 | width: 90%; 31 | margin: 0 auto; 32 | margin-top: 150px; 33 | justify-content: center; 34 | flex-wrap: wrap; 35 | } 36 | 37 | .keybox { 38 | text-align: center; 39 | padding: 10px 10px 8px 10px; 40 | min-width: 80px; 41 | border-radius: 5px; 42 | border: 2px solid #214259; 43 | margin: 7px 5px; 44 | color: #00aec0; 45 | cursor: pointer; 46 | transition: all 0.1s; 47 | position: relative; 48 | } 49 | .keybox:hover { 50 | border: 2px solid #00aec0; 51 | color: #00f2ff; 52 | } 53 | .keybox:hover span { 54 | border-top: 1px solid #00aec0; 55 | } 56 | .keybox:active { 57 | border: 2px solid #00aec0; 58 | background-color: #15334a; 59 | box-shadow: 0px 0px 0px 4px rgba(0, 174, 192, 0.4); 60 | } 61 | .keybox:after { 62 | content: ""; 63 | width: 100%; 64 | height: 100%; 65 | background-color: transparent; 66 | position: absolute; 67 | top: 0; 68 | left: 0; 69 | } 70 | 71 | .active { 72 | border: 2px solid #00aec0; 73 | background-color: #15334a; 74 | box-shadow: 0px 0px 0px 4px rgba(0, 174, 192, 0.4); 75 | color: #00f2ff; 76 | } 77 | .active span { 78 | border-top: 1px solid #00aec0; 79 | } -------------------------------------------------------------------------------- /team/Debby/Day-1-Dum_Kit/stylesheets/style.sass: -------------------------------------------------------------------------------- 1 | $light-blue : #00aec0 2 | $lighter-blue : #00f2ff 3 | $dark-blue : #214259 4 | $bg-color : #172129 5 | 6 | 7 | * 8 | margin: 0 9 | padding: 0 10 | position: relative 11 | 12 | body 13 | background-color: $bg-color 14 | font-family: 'Yantramanav', sans-serif 15 | h2 16 | font-size: 2rem 17 | padding-bottom: 5px 18 | kbd 19 | font-family: 'Yantramanav', sans-serif 20 | 21 | span 22 | border-top: 1px solid #214259 23 | width: 100% 24 | display: block 25 | padding-top: 8px 26 | 27 | 28 | .container 29 | display: flex 30 | width: 90% 31 | margin: 0 auto 32 | margin-top: 150px 33 | justify-content: center 34 | flex-wrap: wrap 35 | 36 | 37 | 38 | .keybox 39 | text-align: center 40 | padding: 10px 10px 8px 10px 41 | min-width: 80px 42 | border-radius: 5px 43 | border: 2px solid $dark-blue 44 | margin: 7px 5px 45 | color: $light-blue 46 | cursor: pointer 47 | transition: all 0.1s 48 | position: relative 49 | // z-index: 1 50 | &:hover 51 | border: 2px solid $light-blue 52 | color: $lighter-blue 53 | span 54 | border-top: 1px solid $light-blue 55 | 56 | 57 | &:active 58 | border: 2px solid $light-blue 59 | background-color: #15334a 60 | box-shadow: 0px 0px 0px 4px rgba(0, 174, 192, 0.4) 61 | 62 | &:after 63 | content: "" 64 | width: 100% 65 | height: 100% 66 | background-color: transparent 67 | position: absolute 68 | top: 0 69 | left: 0 70 | 71 | 72 | 73 | .active 74 | border: 2px solid $light-blue 75 | background-color: #15334a 76 | box-shadow: 0px 0px 0px 4px rgba(0, 174, 192, 0.4) 77 | color: $lighter-blue 78 | span 79 | border-top: 1px solid $light-blue 80 | -------------------------------------------------------------------------------- /team/Debby/Day-2-clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS 30 | day 2 - clock 6 | 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 | JavaScript 30 - Day 2 | JS and CSS Clock 21 | 22 | 23 | -------------------------------------------------------------------------------- /team/Debby/Day-2-clock/javascript/all.js: -------------------------------------------------------------------------------- 1 | const secondHand = document.querySelector('.second-hand'); 2 | const minsHand = document.querySelector('.min-hand'); 3 | const hourHand = document.querySelector('.hour-hand'); 4 | 5 | 6 | 7 | function setDate() { 8 | const now = new Date(); 9 | 10 | const minseconds = now.getMilliseconds() / 1000 ; 11 | const seconds = now.getSeconds() + minseconds; // 讓秒數取到毫秒 12 | // console.log(seconds); 13 | const mins = now.getMinutes(); 14 | const hours = now.getHours(); 15 | 16 | const newMins = mins + seconds / 60; 17 | 18 | const secondsDegrees = ((seconds / 60) * 360) + 90; 19 | secondHand.style.transform = `rotate(${secondsDegrees}deg)`; 20 | 21 | const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90; 22 | minsHand.style.transform = `rotate(${minsDegrees}deg)`; 23 | 24 | const hoursDegrees = ((hours / 12) * 360) + ((mins / 60) * 30) + 90; 25 | hourHand.style.transform = `rotate(${hoursDegrees}deg)`; 26 | } 27 | 28 | // setInterval : 指定某個時間重複執行 29 | setInterval(setDate,1000); 30 | setDate(); -------------------------------------------------------------------------------- /team/Debby/Day-2-clock/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | html,body { 2 | margin: 0; 3 | padding: 0; 4 | 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | width: 100%; 10 | background: rgb(237,235,242); 11 | background: -webkit-linear-gradient(bottom, rgba(237,235,242,1) 0%, rgba(249,248,250,1) 100%); 12 | background: -o-linear-gradient(bottom, rgba(237,235,242,1) 0%, rgba(249,248,250,1) 100%); 13 | background: linear-gradient(to top, rgba(237,235,242,1) 0%, rgba(249,248,250,1) 100%); 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | position: relative; 18 | font-family: 'Heebo', sans-serif; 19 | } 20 | 21 | .container { 22 | background: rgb(255, 247, 251); 23 | background: linear-gradient(0deg, rgb(255, 247, 251) 0%, rgb(250, 248, 248) 100%); 24 | padding: 3rem; 25 | border-radius: 20px; 26 | /*box-shadow: 0px 6px 19px rgba(178, 177, 198, 0.34);*/ 27 | box-shadow: 5px 10px 14px rgba(233, 219, 225, 0.84), 28 | -5px -8px 12px #FFFFFF, 29 | inset -5px -6px 13px rgba(203, 186, 199, 0.25), 30 | inset 2px 2px 3px #fffcfc; 31 | } 32 | 33 | .clock { 34 | width: 18rem; 35 | height: 18rem; 36 | margin: auto; 37 | border-radius: 50%; 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | position: relative; 42 | background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); 43 | 44 | } 45 | 46 | .clock-face { 47 | position: relative; 48 | width: 90%; 49 | height: 90%; 50 | /*transform: translateY(-3px); account for the height of the clock hands */ 51 | } 52 | .hand { 53 | width: 50%; 54 | height: 2px; 55 | background-color: #fff; 56 | position: absolute; 57 | top: 50%; 58 | border-radius: 10px; 59 | box-shadow: 0px 0px 5px #ffb4c8; 60 | /*transform: rotate(90deg);*/ 61 | transform-origin: 100%; /*將指針定位在右邊為中心旋轉*/ 62 | transition: 0.1s; 63 | transition-timing-function: cubic-bezier(0.63, 0.59, 1, 1.93); 64 | } 65 | 66 | .hour-hand { 67 | width: 40%; 68 | left: 10%; 69 | height: 5px; 70 | } 71 | 72 | .min-hand { 73 | width: 45%; 74 | left: 5%; 75 | height: 3px; 76 | } 77 | 78 | .clock-center { 79 | width: 0.8rem; 80 | height: 0.8rem; 81 | border-radius: 50%; 82 | box-shadow: 0px 0px 5px #ffb4c8; 83 | position: absolute; 84 | top: 50%; 85 | left: 50%; 86 | transform: translate(-50%, -28%); 87 | background-color: #fff; 88 | } 89 | 90 | small { 91 | position: fixed; 92 | bottom: 20px; 93 | color: #888888; 94 | letter-spacing: 0.05rem; 95 | text-align: center; 96 | } 97 | -------------------------------------------------------------------------------- /team/Debby/Day-3-CSS_Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS 30 | day 3 - CSS Variables 6 | 7 | 8 | 9 | 10 |

    Update CSS Variables with JS

    11 | 12 |
    13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
    25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /team/Debby/Day-3-CSS_Variables/javascript/all.js: -------------------------------------------------------------------------------- 1 | // 抓到所有 input 2 | const inputs = document.querySelectorAll('.controls input'); 3 | 4 | function handleUpdate() { 5 | // console.log(this.value); 6 | const suffix = this.dataset.sizing || ""; 7 | console.log(this.name); 8 | // 將抓取的值帶到 CSS 變數內。 9 | document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix); 10 | } 11 | 12 | // forEach -> JS 處理 array 的方法之一，只單純執行每個陣列內的物件或值。 13 | // 這邊選到所有的 input ，並依序處理每個 input 14 | inputs.forEach(input => input.addEventListener('change',handleUpdate)); 15 | inputs.forEach(input => input.addEventListener('mousemove',handleUpdate)); -------------------------------------------------------------------------------- /team/Debby/Day-3-CSS_Variables/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | /* css 變數*/ 2 | :root { 3 | --spacing: 10px; 4 | --blur: 10px; 5 | --base: #ffc600; 6 | } 7 | 8 | html,body { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | body { 14 | text-align: center; 15 | background: #193549; 16 | color: white; 17 | font-weight: 100; 18 | font-size: 50px; 19 | font-family: 'Heebo', sans-serif; 20 | } 21 | 22 | /* 使用 css 變數*/ 23 | img { 24 | padding: var(--spacing); 25 | background-color: var(--base); 26 | filter: blur(var(--blur)); 27 | } 28 | 29 | .hl { 30 | color: var(--base); 31 | } 32 | 33 | .controls { 34 | margin-bottom: 50px; 35 | } 36 | 37 | input { 38 | width: 100px; 39 | } -------------------------------------------------------------------------------- /team/Debby/Day-4-Array_Day_1/Array_Cardio_Day_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Array Cardio Day-1 💪 6 | 7 | 31 | 32 | 33 |

    Psst: have a look at the JavaScript Console 💁

    34 |

    📒 Note 👉 click me

    35 | 36 |

    📌 Want to 👉Back home

    37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /team/Debby/Day-4-Array_Day_1/all.js: -------------------------------------------------------------------------------- 1 | // Get your shorts on - this is an array workout! 2 | // ## Array Cardio Day 1 3 | 4 | // Some data we can work with 5 | const inventors = [ 6 | { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, 7 | { first: 'Isaac', last: 'Newton', year: 1543, passed: 1727 }, 8 | { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, 9 | { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, 10 | { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, 11 | { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, 12 | { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, 13 | { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, 14 | { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, 15 | { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, 16 | { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, 17 | { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } 18 | ]; 19 | 20 | const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; 21 | 22 | // Array.prototype.filter() 23 | // 1. Filter the list of inventors for those who were born in the 1500's 24 | const fifteen = inventors.filter(a => (a.year >= 1500 && a.year < 1600)); 25 | console.table(fifteen); 26 | 27 | // Array.prototype.map() 28 | // 2. Give us an array of the inventors first and last names 29 | const fullName = inventors.map((inventor => `捐贈者：${inventor.first} ${inventor.last}` )); 30 | console.log(fullName); 31 | 32 | // Array.prototype.sort() 33 | // 3. Sort the inventors by birthdate, oldest to youngest 34 | const birthdate = inventors.sort((a,b) => (b.year - a.year)); 35 | console.table(birthdate); 36 | 37 | 38 | // Array.prototype.reduce() 39 | // 4. How many years did all the inventors live all together? 40 | const totalYear = inventors.reduce((total,inventor) => (total + (inventor.passed - inventor.year)),0); 41 | console.log(totalYear); 42 | 43 | // 5. Sort the inventors by years lived 44 | const yearList = inventors.sort(function(a,b){ 45 | const prevInventor = a.passed - a.year; 46 | const nextInventor = b.passed - b.year; 47 | return prevInventor - nextInventor; 48 | }); 49 | console.table(yearList); 50 | 51 | // 列出所有歲數 52 | const newYearList = yearList.map( inventor => inventor.passed - inventor.year); 53 | console.table(newYearList); 54 | 55 | // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name 56 | // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris 57 | 58 | const category = document.querySelector('.mw-category'); 59 | const links = Array.from(category.querySelectorAll('a')); 60 | const de = links 61 | .map(link => link.textContent) 62 | .filter(streetName => streetName.includes('de')); 63 | console.log(de); 64 | 65 | // 7. sort Exercise 66 | // Sort the "people" alphabetically by last name 67 | const lastNameList = people.sort(function(lastOne,nextOne){ 68 | const [aLast, aFirst] = lastOne.split(', '); 69 | const [bLast, bFirst] = nextOne.split(', '); 70 | return aLast > bLast ? 1 : -1; 71 | }); 72 | console.table(lastNameList); 73 | 74 | // 8. Reduce Exercise 75 | // Sum up the instances of each of these 76 | const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; 77 | 78 | const transportation = data.reduce(function(obj,item){ 79 | // if there is no object item, then object item is equal(等於) to zero. 80 | // console.log(item); 81 | if(!obj[item]){ 82 | obj[item] = 0; 83 | } 84 | obj[item]++; 85 | return obj; 86 | },{}); 87 | 88 | console.log(transportation); 89 | 90 | 91 | -------------------------------------------------------------------------------- /team/Debby/Day-4-Array_Day_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Array Cardio Day-1 💪 6 | 7 | 31 | 32 | 33 |

    Psst: have a look at the JavaScript Console 💁

    34 |

    📒 Note 👉 click me

    35 | 36 |

    📌 Want to 👉Back home

    37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /team/Debby/Day-7-Array_Day_2/all.js: -------------------------------------------------------------------------------- 1 | // ## Array Cardio Day 2 2 | 3 | const people = [ 4 | { name: 'Wes', year: 1988 }, 5 | { name: 'Kait', year: 1986 }, 6 | { name: 'Irv', year: 1970 }, 7 | { name: 'Lux', year: 2015 } 8 | ]; 9 | 10 | const comments = [ 11 | { text: 'Love this!', id: 523423 }, 12 | { text: 'Super good', id: 823423 }, 13 | { text: 'You are the best', id: 2039842 }, 14 | { text: 'Ramen is my fav food ever', id: 123523 }, 15 | { text: 'Nice Nice Nice!', id: 542328 } 16 | ]; 17 | 18 | // Some and Every Checks 19 | // Array.prototype.some() // is at least one person 19 or older? 20 | 21 | // 抓到今年 22 | const currentYear = (new Date()).getFullYear(); 23 | 24 | // 回傳每一個人的年紀 25 | const personYear = people.map(person => currentYear - person.year); 26 | console.table(personYear); 27 | 28 | const isAdult = people.some(person => (currentYear - person.year >= 19)); 29 | console.log(isAdult); 30 | 31 | 32 | // Array.prototype.every() // is everyone 19 or older? 33 | 34 | const isAllAdult = people.every(person => (currentYear - person.year >= 19)) 35 | console.log(isAllAdult); 36 | 37 | 38 | // Array.prototype.find() 39 | // Find is like filter, but instead returns just the one you are looking for 40 | // find the comment with the ID of 823423 41 | 42 | const findComment = comments.find(comment => (comment.id === 823423)).text 43 | console.log(findComment); 44 | 45 | // Array.prototype.findIndex() 46 | // Find the comment with this ID 47 | // delete the comment with the ID of 123523 48 | 49 | // 找到 123523 的 Index 50 | const findIndexComment = comments.findIndex(comment => (comment.id === 123523)) 51 | console.log(findIndexComment); 52 | 53 | // 刪除原陣列資料 splice 54 | // comments.splice(findIndexComment,1); 55 | // console.table(comments); 56 | 57 | // 刪掉資料並產生新的陣列 58 | const newComments = [ 59 | ...comments.slice(0,findIndexComment), // 複製起始 index(0) 到 findIndexComment (不包含自己) 60 | ...comments.slice(findIndexComment+1) // 複製 findIndexComment+1 到之後的資料 61 | ] 62 | console.table(newComments); 63 | -------------------------------------------------------------------------------- /team/Debby/Day-7-Array_Day_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Array Cardio Day-2 💪💪 6 | 7 | 31 | 32 | 33 |

    Psst: have a look at the JavaScript Console 💁

    34 |

    📒 Note 👉 click me

    35 | 36 |

    📌 Want to 👉Back home

    37 | 38 | 39 | -------------------------------------------------------------------------------- /team/Etrex/Day10 - multi check/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 49 | -------------------------------------------------------------------------------- /team/Etrex/Day2 - clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS 30 - day 2 - clock 7 | 8 | 9 | 10 | 11 |

    12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 |
    28 |
    29 |
    30 |
    31 |
    32 |
    33 |
    34 |
    35 |
    36 |
    37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 |
    44 |
    45 |
    46 |
    47 |
    48 |
    49 |
    50 |
    51 |
    52 |
    53 |
    54 |
    55 |
    56 |
    57 |
    58 |
    59 |
    60 |
    61 |
    62 |
    63 |
    64 |
    65 |
    66 |
    67 |
    68 |
    69 |
    70 |
    71 |
    72 |
    73 |
    74 |
    75 |
    76 |
    77 |
    78 |
    79 |
    80 |
    81 |
    82 |
    83 |
    84 |
    85 |
    86 |
    87 |
    88 |
    89 |
    90 |
    91 |
    92 |
    93 |
    94 |
    95 |
    96 |
    97 |
    98 |
    99 |
    100 |
    101 |
    102 |
    103 |
    104 |
    105 |
    106 |
    107 |
    108 |
    109 |
    110 |
    111 |
    112 |
    113 |
    114 |
    115 |
    116 |
    117 |
    118 |
    119 |
    120 |
    121 |
    122 |
    123 |
    124 |
    125 |
    126 |
    127 |
    128 |
    129 |
    130 |
    131 |
    132 |
    133 |
    134 | 135 | 136 | -------------------------------------------------------------------------------- /team/Etrex/Day2 - clock/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * util 3 | */ 4 | function noise(){ 5 | return Math.random() * 40 - 20; 6 | } 7 | 8 | /** 9 | * clock init 10 | */ 11 | const clock = document.querySelector("#clock"); 12 | let clockSize = 600; 13 | let clockRadius = clockSize/2; 14 | function initClock(){ 15 | clockSize = Math.min(window.innerWidth, window.innerHeight) * 0.8; 16 | clockRadius = clockSize/2; 17 | clock.style.width = `${clockSize}px`; 18 | clock.style.height = `${clockSize}px`; 19 | } 20 | window.addEventListener('resize', initClock); 21 | initClock() 22 | 23 | /** 24 | * mouse tracker 25 | */ 26 | let mouseX = 1000; 27 | let mouseY = 1000; 28 | function onMouseMove(event){ 29 | const clockRect = clock.getBoundingClientRect(); 30 | mouseX = event.pageX - clockRect.x; 31 | mouseY = event.pageY - clockRect.y; 32 | } 33 | document.addEventListener("mousemove", onMouseMove) 34 | 35 | let clickCount = 0; 36 | function onClick(){ 37 | clickCount++; 38 | } 39 | document.addEventListener("click", onClick) 40 | 41 | /** 42 | * dots init 43 | */ 44 | function initDots(){ 45 | const dots = document.querySelectorAll(".dot"); 46 | dots.forEach((dot)=>{ 47 | dot.renderX = Math.random() * clockSize; 48 | dot.renderY = Math.random() * clockSize; 49 | dot.x = Math.random() * clockSize; 50 | dot.y = Math.random() * clockSize; 51 | }) 52 | } 53 | initDots(); 54 | 55 | /** 56 | * set dot style 57 | */ 58 | function update(dot, speed){ 59 | dot.renderX += (dot.x - dot.renderX) * speed; 60 | dot.renderY += (dot.y - dot.renderY) * speed; 61 | dot.style.left = dot.renderX + "px"; 62 | dot.style.top = dot.renderY + "px"; 63 | 64 | const dx = dot.renderX - mouseX; 65 | const dy = dot.renderY - mouseY; 66 | const distance = Math.sqrt(dx * dx + dy * dy); 67 | 68 | let blur; 69 | if(clickCount % 2 == 0){ 70 | blur = Math.min(distance/100, 2); 71 | }else{ 72 | blur = Math.max(2 - distance/100, 0); 73 | } 74 | dot.style.filter = `blur(${blur}px)`; 75 | 76 | let scale = blur + 1; 77 | dot.style.transform = `translate(-5px, -5px) scale(${scale})`; 78 | } 79 | 80 | 81 | function updateDots(){ 82 | const dots = document.querySelectorAll(".dot"); 83 | dots.forEach((dot)=>{ 84 | update(dot, 0.05) 85 | }) 86 | } 87 | 88 | function updateMs(ms){ 89 | const dot = document.querySelector("#ms .dot"); 90 | dot.x = Math.cos(2 * Math.PI * ms / 1000 - 0.5 * Math.PI) * clockRadius + clockRadius; 91 | dot.y = Math.sin(2 * Math.PI * ms / 1000 - 0.5 * Math.PI) * clockRadius + clockRadius; 92 | update(dot, 1) 93 | } 94 | 95 | function updateHand(selector, length, angle){ 96 | const dots = document.querySelectorAll(selector); 97 | const gap = length / (dots.length - 1); 98 | for(let i = 0; i < dots.length ; i++){ 99 | const dot = dots[i]; 100 | const radius = i * gap; 101 | dot.x = Math.cos(angle - 0.5 * Math.PI) * radius + clockRadius + noise(); 102 | dot.y = Math.sin(angle - 0.5 * Math.PI) * radius + clockRadius + noise(); 103 | } 104 | } 105 | 106 | function updateSeconds(seconds){ 107 | const angle = 2 * Math.PI * seconds / 60; 108 | updateHand("#second .dot", clockRadius*5/6, angle); 109 | } 110 | 111 | function updateMinutes(minutes){ 112 | const angle = 2 * Math.PI * minutes / 60; 113 | updateHand("#minute .dot", clockRadius*4/6, angle); 114 | } 115 | 116 | function updateHours(hours){ 117 | const angle = 2 * Math.PI * hours / 12; 118 | updateHand("#hour .dot", clockRadius*2/6, angle); 119 | } 120 | 121 | function updateTime(time){ 122 | const h1 = document.querySelector("#time"); 123 | h1.innerText = time; 124 | } 125 | 126 | function format(number){ 127 | if(number >= 10) 128 | return number; 129 | return "0" + number; 130 | } 131 | 132 | function onEnterFrame(){ 133 | const now = new Date(); 134 | const ms = now.getMilliseconds(); 135 | const seconds = now.getSeconds(); 136 | const minutes = now.getMinutes(); 137 | const hours = now.getHours(); 138 | updateTime(format(hours) + ":" + format(minutes) + ":" + format(seconds)); 139 | updateHours(hours + minutes / 60); 140 | updateMinutes(minutes); 141 | updateSeconds(seconds); 142 | updateMs(ms); 143 | updateDots(); 144 | } 145 | 146 | setInterval(onEnterFrame, 10); 147 | -------------------------------------------------------------------------------- /team/Etrex/Day2 - clock/style.css: -------------------------------------------------------------------------------- 1 | #time { 2 | width: 100%; 3 | text-align: center; 4 | } 5 | 6 | #clock { 7 | width: 600px; 8 | height: 600px; 9 | border: #77DBF9 solid 1px; 10 | border-radius: 100%; 11 | position: absolute; 12 | top: 0; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | margin: auto; 17 | } 18 | 19 | .dot { 20 | width: 10px; 21 | height: 10px; 22 | border-radius: 100%; 23 | background-color: rgba(0,0,0,0.5); 24 | position: absolute; 25 | transform: translate(-5px, -5px); 26 | top: 300px; 27 | left: 300px; 28 | } 29 | 30 | #second .dot { 31 | background-color: #77DBF9; 32 | } 33 | -------------------------------------------------------------------------------- /team/Etrex/Day3 - CSS variable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 21 | 22 | 23 | 請拖曳： 24 |

    怕爆！

    25 | 32 | 33 | -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/1.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/2.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/3.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/4.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/4.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/5.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/5.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/6.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/6.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/7.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/7.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/images/8.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Etrex/Day5 - menu/images/8.PNG -------------------------------------------------------------------------------- /team/Etrex/Day5 - menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu 7 | 20 | 21 | 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
    32 | 43 | 44 | -------------------------------------------------------------------------------- /team/Etrex/Day8 - canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Canvas 7 | 8 | 9 | 10 | 105 | 106 | -------------------------------------------------------------------------------- /team/Liz/Day13 - Slide in on Scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
    12 | 13 |

    Slide in on Scroll

    14 | 15 |

    Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus 16 | quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga 17 | ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

    18 |

    Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis 19 | aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam 20 | dolores sunt esse magni, ut, dignissimos.

    21 |

    Adipisicing elit. Tempore tempora rerum..

    22 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a 23 | qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 24 | quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, 25 | dignissimos.

    26 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a 27 | qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 28 | quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, 29 | dignissimos.

    30 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a 31 | qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis 32 | quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, 33 | dignissimos.

    34 | 35 | 36 | 37 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis 38 | tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. 39 | Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, 40 | praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis 41 | necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum 42 | quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, 43 | nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum 44 | expedita quam, nesciunt

    45 | 46 | 47 | 48 |

    at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error 49 | quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur 50 | officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque 51 | quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et 52 | cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. 53 | Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore 54 | officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore 55 | perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos 56 | amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa 57 | amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus 58 | dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati 59 | reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda 60 | consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam 61 | consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non 62 | sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque 63 | suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint 64 | quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam 65 | similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita 66 | consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut 67 | tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

    68 | 69 | 70 | 71 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor 72 | vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita 73 | quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque 75 | ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste 76 | sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, 77 | rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A 78 | vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi 79 | expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore 80 | excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. 81 | Laboriosam rem, ratione. Autem blanditiis

    82 | 83 | 84 |

    laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum 85 | reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus 86 | cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores 87 | dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur 88 | quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae 89 | obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae 90 | sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis 91 | expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit 92 | quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis 93 | quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error 94 | voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos 95 | veritatis neque.

    96 | 97 | 98 | 99 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor 100 | vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita 101 | quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, 102 | officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat 103 | reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. 104 | Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor 105 | nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam 106 | architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, 107 | doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui 108 | rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, 109 | voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, 110 | odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum 111 | esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, 112 | excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur 113 | quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident 114 | pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto 115 | dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis 116 | necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, 117 | quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab 118 | ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, 119 | fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    120 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor 121 | vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita 122 | quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, 123 | officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat 124 | reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. 125 | Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor 126 | nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam 127 | architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, 128 | doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui 129 | rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, 130 | voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, 131 | odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum 132 | esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, 133 | excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur 134 | quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident 135 | pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto 136 | dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis 137 | necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, 138 | quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab 139 | ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, 140 | fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    141 | 142 | 143 | 144 |
    145 |
    146 | 147 | 182 | 183 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /team/Liz/Day16 - Mouse Move Shadow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mouse Shadow 7 | 8 | 9 | 10 | 11 |
    12 |

    🔥WOAH!

    13 |
    14 | 15 | 38 | 39 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /team/Liz/Day2 - clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS 30 - day 2 - Clock 7 | 8 | 9 | 10 | 11 | 12 |

    JavaScript 30 - Day 2 Clock

    13 |
    14 |
    15 |
    16 |

    12

    17 |

    3

    18 |

    6

    19 |

    9

    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |

    27 | : 28 |

    29 | : 30 |

    31 |
    32 |
    33 |
    34 |
    35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /team/Liz/Day2 - clock/main.js: -------------------------------------------------------------------------------- 1 | const secondHand = document.querySelector('.second-hand'); 2 | const minHand = document.querySelector('.min-hand'); 3 | const hourHand = document.querySelector('.hour-hand'); 4 | 5 | const secondNumber = document.querySelector('.secondNumber'); 6 | const minNumber = document.querySelector('.minNumber'); 7 | const hourNumber = document.querySelector('.hourNumber'); 8 | 9 | const setDate = () => { 10 | const now = new Date(); 11 | const secondsNormal = now.getSeconds(); 12 | const minsNormal = now.getMinutes(); 13 | const hoursNormal = now.getHours(); 14 | 15 | const seconds = secondsNormal + now.getMilliseconds() / 1000; 16 | const secondsDegrees = ((seconds / 60 ) * 360 ); 17 | secondHand.style.transform = `rotate(${secondsDegrees}deg)`; 18 | secondNumber.innerHTML = secondsNormal; 19 | //console.log(seconds); 20 | const mins = minsNormal + seconds / 60; 21 | const minutesDegrees = ((mins / 60 ) * 360 ); 22 | minHand.style.transform = `rotate(${minutesDegrees}deg)`; 23 | minNumber.innerHTML = minsNormal; 24 | //console.log(mins); 25 | 26 | const hours = hoursNormal + mins / 60; 27 | const hoursDegrees = ((hours / 12 ) * 360 ); 28 | hourHand.style.transform = `rotate(${hoursDegrees}deg)`; 29 | hourNumber.innerHTML = hoursNormal; 30 | //console.log(hours); 31 | } 32 | setInterval(setDate,10); -------------------------------------------------------------------------------- /team/Liz/Day2 - clock/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Baloo Da 2', cursive ,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | 5 | .clock { 6 | position: relative; 7 | width: 400px; 8 | height: 400px; 9 | -webkit-box-shadow: 17px 4px 36px -6px rgba(0, 0, 0, 0.3); 10 | box-shadow: 17px 4px 36px -6px rgba(0, 0, 0, 0.3); 11 | border-radius: 50%; 12 | } 13 | 14 | .clock p, .clock .colon-size { 15 | color: #002552; 16 | letter-spacing: 10px; 17 | font-size: 32px; 18 | } 19 | 20 | .clock .number-12 { 21 | position: absolute; 22 | top: 2%; 23 | left: 46%; 24 | } 25 | 26 | .clock .number-3 { 27 | position: absolute; 28 | top: 45%; 29 | right: 5%; 30 | } 31 | 32 | .clock .number-6 { 33 | position: absolute; 34 | bottom: -3%; 35 | left: 48%; 36 | } 37 | 38 | .clock .number-9 { 39 | position: absolute; 40 | top: 46%; 41 | left: 5%; 42 | } 43 | 44 | .clock .clock-face { 45 | position: relative; 46 | height: 100%; 47 | width: 100%; 48 | } 49 | 50 | .clock .hand { 51 | position: absolute; 52 | bottom: 50%; 53 | right: 50%; 54 | border-radius: 3px; 55 | background-color: #7E7E7E; 56 | -webkit-transform: rotate(90 deg); 57 | transform: rotate(90 deg); 58 | -webkit-transform-origin: bottom; 59 | transform-origin: bottom; 60 | } 61 | 62 | .clock .second-hand { 63 | width: 3px; 64 | height: 45%; 65 | background-color: #F7465C; 66 | } 67 | 68 | .clock .min-hand { 69 | width: 4px; 70 | height: 40%; 71 | } 72 | 73 | .clock .hour-hand { 74 | width: 6px; 75 | height: 25%; 76 | -webkit-box-shadow: 17px 4px 36px -6px rgba(0, 0, 0, 0.3); 77 | box-shadow: 17px 4px 36px -6px rgba(0, 0, 0, 0.3); 78 | } 79 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /team/Liz/Day2 - clock/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAC,AAAA,IAAI,CAAA;EACH,WAAW,EAAE,kJAAkJ;CAC/J;;AACD,AAAA,MAAM,CAAA;EACL,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAE,IAAG,CAAC,kBAAe;EAC9C,aAAa,EAAE,GAAG;CAsDnB;;AA3DA,AAMC,MANK,CAML,CAAC,EANF,MAAM,CAMH,WAAW,CAAA;EACX,KAAK,EAAE,OAAO;EACd,cAAc,EAAE,IAAI;EACpB,SAAS,EAAE,IAAI;CAChB;;AAVF,AAWC,MAXK,CAWL,UAAU,CAAA;EACR,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,EAAE;EACN,IAAI,EAAE,GAAG;CACR;;AAfJ,AAgBC,MAhBK,CAgBL,SAAS,CAAA;EACP,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,GAAG;EACP,KAAK,EAAE,EAAE;CACR;;AApBJ,AAqBC,MArBK,CAqBL,SAAS,CAAA;EACP,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,GAAG;EACX,IAAI,EAAE,GAAG;CACR;;AAzBJ,AA0BC,MA1BK,CA0BL,SAAS,CAAA;EACP,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,EAAE;CACT;;AA9BF,AA+BC,MA/BK,CA+BL,WAAW,CAAA;EACT,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;CACZ;;AAnCF,AAoCC,MApCK,CAoCL,KAAK,CAAA;EACH,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,GAAG;EAClB,gBAAgB,EAAE,OAAO;EACzB,SAAS,EAAE,cAAc;EACzB,gBAAgB,EAAE,MAAM;CACzB;;AA5CF,AA6CC,MA7CK,CA6CL,YAAY,CAAA;EACV,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,gBAAgB,EAAE,OAAO;CAC1B;;AAjDF,AAkDC,MAlDK,CAkDL,SAAS,CAAA;EACP,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CACZ;;AArDF,AAsDC,MAtDK,CAsDL,UAAU,CAAA;EACR,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAE,IAAG,CAAC,kBAAe;CAC/C", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /team/Liz/Day2 - clock/style.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Baloo Da 2', cursive ,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | .clock{ 5 | position: relative; 6 | width: 400px; 7 | height: 400px; 8 | box-shadow: 17px 4px 36px -6px rgba(0,0,0,0.3); 9 | border-radius: 50%; 10 | p,.colon-size{ 11 | color: #002552; 12 | letter-spacing: 10px; 13 | font-size: 32px; 14 | } 15 | .number-12{ 16 | position: absolute; 17 | top:2%; 18 | left: 46%; 19 | } 20 | .number-3{ 21 | position: absolute; 22 | top:45%; 23 | right: 5%; 24 | } 25 | .number-6{ 26 | position: absolute; 27 | bottom: -3%; 28 | left: 48%; 29 | } 30 | .number-9{ 31 | position: absolute; 32 | top: 46%; 33 | left: 5%; 34 | } 35 | .clock-face{ 36 | position: relative; 37 | height: 100%; 38 | width: 100%; 39 | } 40 | .hand{ 41 | position: absolute; 42 | bottom: 50%; 43 | right: 50%; 44 | border-radius: 3px; 45 | background-color: #7E7E7E; 46 | transform: rotate(90 deg); 47 | transform-origin: bottom; 48 | } 49 | .second-hand{ 50 | width: 3px; 51 | height: 45%; 52 | background-color: #F7465C; 53 | } 54 | .min-hand{ 55 | width: 4px; 56 | height: 40%; 57 | } 58 | .hour-hand{ 59 | width: 6px; 60 | height: 25%; 61 | box-shadow: 17px 4px 36px -6px rgba(0,0,0,0.3); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /team/Liz/Day3 - CSS Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS 30 - Day 3 - Scoped CSS Variables and JSs 7 | 9 | 10 | 33 | 34 | 35 | 36 |
    37 |
    38 |
    39 |

    Update CSS Variables with JS

    40 |
    41 |
    42 |
    43 |
    44 | 45 | 46 |
    47 |
    48 | 49 | 50 |
    51 |
    52 | 53 | 54 |
    55 |
    56 |
    57 | 58 |
    59 |
    60 |
    61 |
    62 | 63 | 64 | 67 | 70 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /team/Liz/Day3 - CSS Variables/main.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll('.controls input'); 2 | function handleUpdate() { 3 | const suffix = this.dataset.sizing || ''; 4 | document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); 5 | } 6 | inputs.forEach(input => input.addEventListener('change', handleUpdate)); 7 | inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); -------------------------------------------------------------------------------- /team/Liz/Day4 - Array Cardio Day 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS 30 - Day 4 - Array Cardio Day 1 8 | 10 | 11 | 19 | 20 | 21 | 22 |

    JS 30 - Day 4 - Array Cardio Day 1

    23 |

    Psst: have a look at the JavaScript Console 💁

    24 |
    25 |
    26 |
    27 |
    28 |
    29 |
    Array.prototype.filter()
    30 |

    Filter the list of inventors for those who were born in the 1500's

    31 |
      32 |
      33 |
      34 |
      35 |
      36 |
      37 |
      38 |
      Array.prototype.map()
      39 |

      Give us an array of the inventors first and last names

      40 |
        41 |
        42 |
        43 |
        44 |
        45 |
        46 |
        47 |
        Array.prototype.sort()
        48 |

        Sort the inventors by birthdate, oldest to youngest

        49 |
          50 |
          51 |
          52 |
          53 |
          54 |
          55 |
          56 |
          57 |
          58 |
          Array.prototype.reduce()
          59 |

          How many years did all the inventors live all together?

          60 |
            61 |
            62 |
            63 |
            64 |
            65 |
            66 |
            67 |
            Sort the inventors by years lived
            68 |
              69 |
              70 |
              71 |
              72 |
              73 |
              74 |
              75 |
              123
              76 |
                77 |
                78 |
                79 |
                80 | 81 |
                82 |
                83 | 84 | 87 | 90 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /team/Liz/Day4 - Array Cardio Day 1/main.js: -------------------------------------------------------------------------------- 1 | // Get your shorts on - this is an array workout! 2 | // ## Array Cardio Day 1 3 | // Some data we can work with 4 | const inventors = [ 5 | { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, 6 | { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, 7 | { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, 8 | { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, 9 | { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, 10 | { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, 11 | { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, 12 | { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, 13 | { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, 14 | { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, 15 | { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, 16 | { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } 17 | ]; 18 | 19 | const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; 20 | 21 | // Array.prototype.filter() 22 | // 1. Filter the list of inventors for those who were born in the 1500's 23 | const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); 24 | 25 | const filterFifteen = document.getElementById('filterFifteen'); 26 | for (let i = 0; i < fifteen.length; i++) { 27 | filterFifteen.innerHTML += `
              • Name : ${fifteen[i].first} ${fifteen[i].last}
                • ` + `
              • Year: ${fifteen[i].year}
                • ` 28 | } 29 | // Array.prototype.map() 30 | // 2. Give us an array of the inventors first and last names 31 | const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); 32 | const filterNames = document.getElementById('filterNames') 33 | for (let i = 0; i < fullNames.length; i++) { 34 | filterNames.innerHTML += `
              • Name : ${fullNames[i]}` 35 | } 36 | 37 | // Array.prototype.sort() 38 | // 3. Sort the inventors by birthdate, oldest to youngest 39 | // const ordered = inventors.sort(function (a,b) { 40 | // if (a.year > b.year) { 41 | // return 1 ; 42 | // }else{ 43 | // return -1 ; 44 | // } 45 | // }) 46 | const ordered = inventors.sort((a,b) => a.year > b.year ? 1 : -1); 47 | const sortBirth = document.getElementById('sortBirth'); 48 | for (let i = 0; i < fullNames.length; i++) { 49 | sortBirth.innerHTML += `
              • Birth : ${ordered[i].year} - ${ordered[i].first} ${ordered[i].last}
                • ` 50 | } 51 | // console.log(ordered); 52 | // Array.prototype.reduce() 53 | // 4. How many years did all the inventors live all together? 54 | const totalYears = inventors.reduce((total, inventor) => { 55 | return total + (inventor.passed - inventor.year); 56 | }, 0 ); 57 | const filterTotalYears = document.getElementById('filterTotalYears'); 58 | filterTotalYears.innerHTML = `
              • Total Yeaer : ${totalYears}
                • ` 59 | // console.log(totalYears); 60 | // 5. Sort the inventors by years lived 61 | const inventorsLivedYears = inventors.sort((a,b) => { 62 | const lastInventor = a.passed - a.year; 63 | const nextInventor = b.passed - b.year; 64 | // return lastInventor > nextInventor ? -1 : 1; 65 | if (lastInventor > nextInventor) { 66 | return -1 67 | } else { 68 | return 1 69 | } 70 | }); 71 | const sortInventors = document.getElementById('sortInventors'); 72 | for (let i = 0; i < inventorsLivedYears.length; i++) { 73 | sortInventors.innerHTML += `
              • Name: ${inventorsLivedYears[i].first} ${inventorsLivedYears[i].last}
                • ` 74 | } 75 | 76 | console.log(inventorsLivedYears); 77 | 78 | 79 | // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name 80 | // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris 81 | 82 | 83 | // 7. sort Exercise 84 | // Sort the people alphabetically by last name 85 | 86 | // 8. Reduce Exercise 87 | // Sum up the instances of each of these 88 | const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']; 89 | -------------------------------------------------------------------------------- /team/Liz/Day5 - Flex Panel Gallery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flex Panels 💪 6 | 7 | 8 | 9 | 91 | 92 | 93 |
                94 |
                95 |

                Hey

                96 |

                Let's

                97 |

                Dance

                98 |
                99 |
                100 |

                Give

                101 |

                Take

                102 |

                Receive

                103 |
                104 |
                105 |

                Experience

                106 |

                It

                107 |

                Today

                108 |
                109 |
                110 |

                Give

                111 |

                All

                112 |

                You can

                113 |
                114 |
                115 |

                Life

                116 |

                In

                117 |

                Motion

                118 |
                119 |
                120 | 121 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /team/Liz/Day6 - type ahead/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Type Ahead 👀 7 | 8 | 9 | 10 | 11 | 12 |

                Day - 6 - Type Ahead

                13 |
                14 | 15 | 19 |
                20 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /team/Liz/Day6 - type ahead/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | background: #333333; 4 | font-family: 'Baloo Da 2', cursive ,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 5 | font-size: 20px; 6 | font-weight: 200; 7 | } 8 | 9 | *, *:before, *:after { 10 | box-sizing: inherit; 11 | } 12 | h1 { 13 | text-align: center; 14 | color: #ffffff; 15 | } 16 | 17 | input { 18 | width: 100%; 19 | padding: 20px; 20 | } 21 | 22 | .search-form { 23 | max-width: 400px; 24 | margin: 50px auto; 25 | } 26 | 27 | input.search { 28 | margin: 0; 29 | text-align: center; 30 | outline: 0; 31 | border: 10px solid #F7F7F7; 32 | width: 120%; 33 | left: -10%; 34 | position: relative; 35 | top: 10px; 36 | z-index: 2; 37 | border-radius: 5px; 38 | font-size: 40px; 39 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); 40 | } 41 | 42 | .suggestions { 43 | margin: 0; 44 | padding: 0; 45 | position: relative; 46 | /*perspective: 20px;*/ 47 | } 48 | 49 | .suggestions li { 50 | background: white; 51 | list-style: none; 52 | border-bottom: 1px solid #D8D8D8; 53 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); 54 | margin: 0; 55 | padding: 20px; 56 | transition: background 0.2s; 57 | display: flex; 58 | justify-content: space-between; 59 | text-transform: capitalize; 60 | } 61 | 62 | .suggestions li:nth-child(even) { 63 | transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); 64 | background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); 65 | } 66 | 67 | .suggestions li:nth-child(odd) { 68 | transform: perspective(100px) rotateX(-3deg) translateY(3px); 69 | background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); 70 | } 71 | 72 | span.population { 73 | font-size: 15px; 74 | } 75 | 76 | .hl { 77 | background: #ffc600; 78 | } -------------------------------------------------------------------------------- /team/Liz/Day7 - Array Cardio Day 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Array Cardio Day 2 8 | 9 | 10 | 19 | 20 | 21 | 22 |
                23 |

                Day - 7 - Array Cardio Day 2

                24 |

                Psst: have a look at the JavaScript Console 💁

                25 |
                26 |
                27 |

                Array.prototype.some()

                28 | is at least one person 19 or older? 29 |

                30 |
                31 |
                32 |

                Array.prototype.every()

                33 | is everyone 19 or older? 34 |

                35 |
                36 |
                37 |

                Array.prototype.find()

                38 |

                Find is like filter, but instead returns just the one you are looking for

                39 | find the comment with the ID of 823423 40 |

                Text :

                41 |

                ID :

                42 |
                43 |
                44 |

                Array.prototype.findIndex()

                45 |

                Find the comment with this ID

                46 | delete the comment with the ID of 823423 47 |
                  48 |
                  49 | 50 |
                  51 |
                  52 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /team/Liz/Day8 - Canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day -8 HTML5 Canvas 7 | 17 | 18 | 19 | 20 |

                  Day - 8HTML5 Canvas

                  21 |

                  Draw Below!

                  22 | 23 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/README.md: -------------------------------------------------------------------------------- 1 | # Target 2 | 按下畫面上對應的按鈕，演出音效和按鈕的特效。 3 | 4 | ## 重點整理 5 | 1. 監聽整個網頁發生的按鍵按下的事件 (keydown)，同時綁定執行一個 function `playSound()` 6 | ```js 7 | window.addEventListener('keydown', playSound); 8 | ``` 9 | ## 補充 10 | 11 | - `keydown`, `keypress` and `keyup` 12 | - keydown: 任何按鍵都能觸發。This event occurs when a keyboard key is pressed. 13 | `$(selector).keydown(function)` // Attaches a function to the key down event 14 | - keydown: Triggered by any key. 15 | - keypress: This event is similar to keydown event. 16 | - keypress: 一些沒有輸出字元的按鍵無法觸發，例如方向鍵和 `ESC`。 17 | - keyup: This event occurs when a keyboard key is released. 18 | 19 | - audio tag 的屬性和用法： 20 | - currentTime: Sets or returns the current playback position in the audio/video (in seconds). 21 | - play(): To play the audio. - autoplay: Auto play the audio when loading finish. - controls: Sets or returns whether the audio/video should dispay controls (play, pause etc.) - loop: Sets or returns whether the audio/video should start over again when finished. 22 | - volume: Sets or returns the volume of the audio/video. 23 | - Stop playing: 24 | ```js 25 | let sound = new Audio("bell.wav"); 26 | 27 | function myStop() { 28 | sound.pause(); 29 | sound.currentTime = 0; 30 | } 31 | 32 | - NodeList: 33 | `document.querySelectorAll()` returns a `NodeList` object, this is a collection of nodes. 34 | - Its is possible to iterate over it with `forEach()`. 35 | - Dome older browsers have not implemented `NoodeList.forEach()` nor `Array.from()`, This can be circumented by using `Array.prototype.forEach()`. [See this Example fomr MDN](https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Example). 36 | 37 | ```js 38 | const keys = document.querySelectorAll('.key'); 39 | Array.prototype.forEach.call(keys, key => key.addEventListener('transitionend', removeTransition)); 40 | ``` 41 | 42 | ## References 43 | - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) 44 | - [w3schools.com](https://www.w3schools.com/tags/ref_av_dom.asp) 45 | - [keycode.info](http://keycode.info/) - shows keyCode 46 | -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS Drum Kit 6 | 7 | 8 | 9 |
                  10 |
                  11 | A 12 | clap 13 |
                  14 |
                  15 | S 16 | hihat 17 |
                  18 |
                  19 | D 20 | kick 21 |
                  22 |
                  23 | F 24 | openhat 25 |
                  26 |
                  27 | G 28 | boom 29 |
                  30 |
                  31 | H 32 | ride 33 |
                  34 |
                  35 | J 36 | snare 37 |
                  38 |
                  39 | K 40 | tom 41 |
                  42 |
                  43 | L 44 | tink 45 |
                  46 |
                  47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/boom.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/clap.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/hihat.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/kick.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/openhat.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/ride.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/snare.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/tink.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/sounds/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lizwang50/JavaScript-30weeks/5b2043d87bb363450b3146f90e88d143bf256b75/team/Steven/Day1 - Drum Kit/sounds/tom.wav -------------------------------------------------------------------------------- /team/Steven/Day1 - Drum Kit/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 10px; 3 | background: url(https://i.imgur.com/b9r5sEL.jpg) bottom center; 4 | background-size: cover; 5 | } 6 | 7 | body,html { 8 | margin: 0; 9 | padding: 0; 10 | font-family: sans-serif; 11 | } 12 | 13 | .keys { 14 | display: flex; 15 | flex: 1; 16 | min-height: 100vh; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | 21 | .key { 22 | border: .4rem solid black; 23 | border-radius: .5rem; 24 | margin: 1rem; 25 | font-size: 1.5rem; 26 | padding: 1rem .5rem; 27 | transition: all .07s ease; 28 | width: 10rem; 29 | text-align: center; 30 | color: white; 31 | background: rgba(0,0,0,0.4); 32 | text-shadow: 0 0 .5rem black; 33 | } 34 | 35 | .playing { 36 | transform: scale(1.1); 37 | border-color: #ffc600; 38 | box-shadow: 0 0 1rem #ffc600; 39 | } 40 | 41 | kbd { 42 | display: block; 43 | font-size: 4rem; 44 | } 45 | 46 | .sound { 47 | font-size: 1.2rem; 48 | text-transform: uppercase; 49 | letter-spacing: .1rem; 50 | color: #ffc600; 51 | } 52 | -------------------------------------------------------------------------------- /team/Steven/Day10 - Hold Shift and Check Checkboxes/index-Steven-with-Etrex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hold Shift to Check Multiple Checkboxes 7 | 8 | 9 | 10 | 49 | 50 | -------------------------------------------------------------------------------- /team/Steven/Day10 - Hold Shift and Check Checkboxes/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hold Shift to Check Multiple Checkboxes 6 | 7 | 8 | 53 | 59 |
                  60 |
                  61 | 62 |

                  This is an inbox layout.

                  63 |
                  64 |
                  65 | 66 |

                  Check one item

                  67 |
                  68 |
                  69 | 70 |

                  Hold down your Shift key

                  71 |
                  72 |
                  73 | 74 |

                  Check a lower item

                  75 |
                  76 |
                  77 | 78 |

                  Everything in between should also be set to checked

                  79 |
                  80 |
                  81 | 82 |

                  Try to do it without any libraries

                  83 |
                  84 |
                  85 | 86 |

                  Just regular JavaScript

                  87 |
                  88 |
                  89 | 90 |

                  Good Luck!

                  91 |
                  92 |
                  93 | 94 |

                  Don't forget to tweet your result!

                  95 |
                  96 |
                  97 | 98 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /team/Steven/Day14 - JavaScript Reference VS Copying/README.md: -------------------------------------------------------------------------------- 1 | # Target - Day 14 2 | Introducing the reference of an object and ways to copy an Array. 3 | 4 | ## Key points 5 | - About reference: 6 | ```js 7 | a1 = [1, 2, 3]; 8 | a2 = a1.slice(); 9 | a3 = a1; 10 | a4 = [].concat(a1); 11 | 12 | a1[0] = 2; 13 | 14 | console.log(a1); // [2, 2, 3] 15 | console.log(a2); // [1, 2, 3] 16 | 17 | // been changed as well 18 | console.log(a3); // [2, 2, 3] 19 | console.log(a4); // [1, 2, 3] 20 | ``` 21 | 22 | - An object can have property which reference to a function. 23 | ```js 24 | var arr = ['a', 'b', 'c']; 25 | 26 | arr.test = function() { return 'Hi'; }; 27 | arr.test(); // 'Hi' 28 | 29 | typeof(arr); // 'object' 30 | ``` 31 | 32 | - Create a 33 | 34 | 35 | ## Additional Information 36 | - To compare two arrays in JavaScript 37 | ```js 38 | a1 = [1, 2, 3]; 39 | a2 = [1, 2, 3]; 40 | 41 | JSON.stringify(a1) === JSON.stringify(a2); // true 42 | ``` 43 | -------------------------------------------------------------------------------- /team/Steven/Day14 - JavaScript Reference VS Copying/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS Reference VS Copy 6 | 7 | 8 | 9 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /team/Steven/Day16 - Mouse Move Shadow/README.md: -------------------------------------------------------------------------------- 1 | # Target 2 | Introduce how to make a cool text-shadow effect which will moving with mouse pinter. 3 | ## Key points 4 | Get the position from the property of mousemove event. 5 | 6 | ```js 7 | function shadow(e) { 8 | const { offsetWidth: width, offsetHeight: height } = hero; 9 | // e = mousemove event; offsetX and offsetY are the position of the pointer 10 | let { offsetX: x, offsetY: y } = e; 11 | // ...omit 12 | ``` -------------------------------------------------------------------------------- /team/Steven/Day16 - Mouse Move Shadow/index-Steve.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mouse Shadow 6 | 7 | 8 | 9 |
                  10 |

                  🔥YOLO🔥

                  11 |
                  12 | 13 | 36 | 37 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /team/Steven/Day17 - Sort Without Articles/READ.md: -------------------------------------------------------------------------------- 1 | ## Target 2 | To sort an array of band's names while ignoring the article: 'The', 'An' and 'A' which in front of the band's name. 3 | 4 | Break down into steps: 5 | 1. Exclude the article from bands' name 6 | - e.g. for 'An Old Dog', sorting by 'Old Dog' instead of 'An Old Dog' 7 | 2. Insert HTML list element into the ul #bands 8 | - Array.prototype.sort() receives a callback function, which is able to deal with Step 1 while sorting. 9 | 3. The list elements inserted should remain the same as before. 10 | 11 | ## Key points 12 | 13 | ### Sorting with shorthands 14 | Combine the shorthands of **arrow function** and **directly return value** to write more concise and elegant code. 15 | - Refactoring of Array sorting, Step 1. 16 | ```js 17 | const sortedBands = bands.sort(function(a, b) { 18 | if (stript(a) > stript(b)) { 19 | return 1; 20 | } else { 21 | return -1; 22 | } 23 | }); 24 | ``` 25 | 26 | - Refactoring of Array sorting, Step 2. 27 | ```js 28 | const sortedBands = bands.sort((a, b) => { 29 | return stript(a) > stript(b) ? 1 : -1; 30 | }); 31 | ``` 32 | 33 | - Refactoring of Array sorting, Step 3. 34 | ```js 35 | const sortedBands = bands.sort((a, b) => stript(a) > stript(b) ? 1 : -1); 36 | ``` 37 | 38 | ### Self-memorizing function 39 | 40 | My friend Etrex pointed out that my solution and the solution from Wesbos were both performed redundant function calls (24 times call for 13 array element) when sorting with a callback function and therefore I decide to refactor the `striptName()` function into a self-memorizing function. 41 | 42 | The goal is to make sure that the function only compute once for each argument passed in (the band's name in this case). 43 | 44 | - Functions are first-class objects 45 | 46 | Functions are objects in JavaScript, thus it is possible to add custom properties to them, and it is a way to store the computing results as well. 47 | 48 | Here's my final workaround: 49 | 50 | ```js 51 | const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 52 | 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 53 | 'Anywhere But Here', 'An Old Dog' 54 | ]; 55 | 56 | const excludeList = ['The', 'An', 'A']; 57 | 58 | function striptName(a) { 59 | // to build cache of the function 60 | if (!striptName.cache) { 61 | striptName.cache = {}; 62 | }; 63 | 64 | // check if the result has been cached 65 | if (striptName.cache[a] !== undefined) { 66 | return striptName.cache[a]; 67 | }; 68 | 69 | const nameArr = a.split(' '); 70 | 71 | if (excludeList.includes(nameArr[0])) { 72 | nameArr.shift(); 73 | return striptName.cache[a] = nameArr.join(' '); 74 | } else { 75 | return striptName.cache[a] = a; 76 | } 77 | } 78 | 79 | const sortedBands2 = bands.sort((a, b) => stript(a) > stript(b) ? 1 : -1); 80 | ``` 81 | 82 | Call `console.table(sortedBands);` to see formatted result: 83 | 84 | | index | Value | 85 | | ----- | ------------------------- | 86 | | 0 | "Anywhere But Here" | 87 | | 1 | "The Bled"2"Counterparts" | 88 | | 3 | "The Devil Wears Prada" | 89 | | 4 | "The Midway State" | 90 | | 5 | "Norma Jean" | 91 | | 6 | "Oh, Sleeper" | 92 | | 7 | "An Old Dog" | 93 | | 8 | "Pierce the Veil" | 94 | | 9 | "The Plot in You" | 95 | | 10 | "Say Anything" | 96 | | 11 | "A Skylit Drive" | 97 | | 12 | "We Came as Romans" | 98 | -------------------------------------------------------------------------------- /team/Steven/Day17 - Sort Without Articles/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sort Without Articles 7 | 8 | 9 | 10 | 11 | 46 | 47 | 48 | 49 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /team/Steven/Day2 - Clock/README.md: -------------------------------------------------------------------------------- 1 | # Target 2 | Build a clock by JavaScript and CSS. 3 | ## 重點整理 4 | 1. To set the start point of transform on an element by CSS attribute `transform-origin`. 5 | 2. Using `setInterval(funciton, 1000)` with `setDate()` function to get the current time every second. 6 | 7 | ## 補充 8 | There's a weird bounce movement when the hand goes from 354 degree to 0 degree, I choose to unset the time of transition duration to avoid it. 9 | -------------------------------------------------------------------------------- /team/Steven/Day2 - Clock/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS + CSS Clock 6 | 7 | 8 | 9 | 10 |
                  11 |
                  12 |
                  13 |
                  14 |
                  15 |
                  16 |
                  17 | 18 | 19 | 83 | 84 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /team/Steven/Day3 - CSS Variables/README.md: -------------------------------------------------------------------------------- 1 | # Target 2 | Practice of the usage of CSS variable and how to manipulate it by JS. 3 | 4 | ## 重點整理 5 | 6 | 1. Usage of CSS variable. 7 | ```css 8 | :root { 9 | --base: #fff; 10 | --spacing: 10px; 11 | --blur: 10px; 12 | } 13 | 14 | img { 15 | padding: var(--spacing); 16 | background: var(--base); 17 | filter: blur(var(--blur)); 18 | } 19 | ``` 20 | 21 | 2. Control CSS variable with JS 22 | ```js 23 | document.documentElement.style.setProperty(`--blur`, value); 24 | ``` 25 | 26 | - dataset 27 | Like `getAttribute`, using `dataset` can get the specified `data-` attribute from tatget. 28 | ```js 29 |
                  30 | 31 | document.querySelector('#foo').dataset.hello // get: "world" 32 | document.querySelector('#foo').getAttribute('data-hello'); // "world" 33 | ``` -------------------------------------------------------------------------------- /team/Steven/Day3 - CSS Variables/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scoped CSS Variables and JS 6 | 7 | 8 |

                  Update CSS Variables with JS

                  9 | 10 |
                  11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
                  20 | 21 | 22 | 23 | 57 | 58 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /team/Steven/Day4 - Array Cardio Day 1/README.md: -------------------------------------------------------------------------------- 1 | # Target 2 | Learning the basic methods of Array. 3 | 4 | ## Key points 5 | - console.table() 6 | Print result as table. 7 | 8 | - `filter` 9 | ```js 10 | const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); 11 | const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); 12 | 13 | console.table(fifteen); 14 | ``` 15 | 16 | - `sort` 17 | Sort the inventors by birthdate, oldest to youngest. 18 | ```js 19 | // -1: front, 1: behind 20 | const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); 21 | 22 | console.table(ordered); 23 | 24 | // addition of sort() 25 | if (a < b) { 26 | return -1; 27 | }; // bring a to front 28 | 29 | if (a > b) { 30 | return 1; 31 | } // move a behind b 32 | 33 | if (a = b) { 34 | return 0; 35 | } // move nothing 36 | ``` 37 | 38 | - `reduce` 39 | Count the number of elements in an array. 40 | ```js 41 | const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick']; 42 | 43 | const transportations = data.reduce((obj, ele) => { 44 | if (!obj[ele]) { 45 | obj[ele] = 0 46 | }; 47 | obj[ele]++; 48 | 49 | return obj 50 | }, {}) 51 | 52 | console.log(transportations); 53 | // {bike: 2, car: 5, pogostick: 1, truck: 3, van: 2, walk: 2} 54 | ``` 55 | -------------------------------------------------------------------------------- /team/Steven/Day4 - Array Cardio Day 1/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Array Cardio 💪 6 | 7 | 8 |

                  Psst: have a look at the JavaScript Console 💁

                  9 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /team/Steven/Day5 - Flex Panel Gallery/README.md: -------------------------------------------------------------------------------- 1 | # Target 2 | Make animation effect by CSS and JavaScript. 3 | Using: 4 | - CSS flex, transform, transition. 5 | - JavaScript events and class toggle. 6 | 7 | ## Key points 8 | - The propertyName called just "flex" in Safari rather than "flex-grow" in other browsers, so here using `propertyName.includes('flex')` to get compatibility. 9 | - Listen to 'transitionend' event to get the property which has changed. 10 | 11 | ```js 12 | const panels = document.querySelectorAll('.panel'); 13 | 14 | function toggleActive(e) { 15 | console.log(e.propertyName); 16 | if (e.propertyName.includes('flex')) { 17 | this.classList.toggle('open-active'); 18 | } 19 | } 20 | 21 | panel.forEach(panel => panel.addEventListener('transitionend', toggleActive)); 22 | ``` 23 | 24 | - 3 ways to turn NodeList into an array 25 | ```js 26 | let panels = document.querySelectorAll('.panel'); 27 | 28 | let arr1 = [...panels]; 29 | let arr2 = Array.from(panels); 30 | let arr3 = [].slice.call(panels); // [].slice === Array.prototype.slice; 31 | ``` 32 | 33 | ## Reference 34 | - [flex.io](https://flexbox.io/): A simple, free 20 video course. 35 | -------------------------------------------------------------------------------- /team/Steven/Day5 - Flex Panel Gallery/index-Steven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Panels 💪 7 | 8 | 9 | 10 | 11 | 122 | 123 |
                  124 |
                  125 |

                  Hey

                  126 |

                  Let's

                  127 |

                  Dance

                  128 |
                  129 |
                  130 |

                  Give

                  131 |

                  Take

                  132 |

                  Receive

                  133 |
                  134 |
                  135 |

                  Experience

                  136 |

                  It

                  137 |

                  Today

                  138 |
                  139 |
                  140 |

                  Give

                  141 |

                  All

                  142 |

                  You can

                  143 |
                  144 |
                  145 |

                  Life

                  146 |

                  In

                  147 |

                  Motion

                  148 |
                  149 |
                  150 | 151 | 173 | 174 | -------------------------------------------------------------------------------- /team/pastleo/day-2-clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 2 - Clock | PastLeo 6 | 7 | 8 | 9 |
                  10 |
                  11 |

                  Loading...

                  12 |

                  13 | Or your browser does not support 14 |
                  15 | Get Firefox 16 |
                  17 | Get Chrome 18 |

                  19 |
                  20 |
                  21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /team/pastleo/day-2-clock/main.js: -------------------------------------------------------------------------------- 1 | import React from 'https://dev.jspm.io/react@16.13.1'; 2 | import ReactDOM from 'https://dev.jspm.io/react-dom@16.13.1'; 3 | 4 | const flatTaggedArgs = args => (Array.isArray(args[0]) && args[0].raw) ? args[0] : args; 5 | const isNode = v => React.isValidElement(v) || typeof v === 'string' || Array.isArray(v); 6 | 7 | const $ = type => (...propsAndChildren) => { 8 | const propsAndChildrenFlatten = flatTaggedArgs(propsAndChildren); 9 | return React.createElement( 10 | Array.isArray(type) ? type[0] : type, 11 | ...( 12 | isNode(propsAndChildrenFlatten[0]) ? [null, ...propsAndChildrenFlatten] : propsAndChildrenFlatten 13 | ) 14 | ); 15 | }; 16 | const $$ = $(React.Fragment); 17 | 18 | const array = n => (new Array(n)).fill().map((_, i) => i); 19 | 20 | const { useEffect, useState, useMemo } = React; 21 | 22 | const $Ring = $(({ dots, color, deg, highlight }) => { 23 | const barsWithDot = useMemo(() => ( 24 | array(dots).map(key => ( 25 | $`div`({ 26 | key, className: 'bar', 27 | style: { 28 | width: `${dots * 8}px`, 29 | transform: `rotate(${key * 360 / dots}deg)` 30 | } 31 | }, 32 | $`span`({ className: 'dot', style: { background: color } }) 33 | ) 34 | )) 35 | ), []); 36 | 37 | return ( 38 | $`div`({ 39 | className: highlight ? 'ring highlight' : 'ring', 40 | style: { transform: `rotate(${deg || 0}deg)` }, 41 | }, 42 | barsWithDot 43 | ) 44 | ) 45 | }); 46 | 47 | const CLOCK_MODE_1 = 'CLOCK_MODE_1'; 48 | const CLOCK_MODE_2 = 'CLOCK_MODE_2'; 49 | 50 | const TIME_EACH_SEC = 1000; 51 | const TIME_EACH_MIN = 60000; 52 | const TIME_EACH_HOUR = 3600000; 53 | const TIME_EACH_HALF_DAY = 43200000; 54 | 55 | const calDeg = (time, each) => (360 * (time % each) / each); 56 | 57 | const $Clock = $(({ mode }) => { 58 | const timeBase = useMemo(() => { 59 | const beginOfToday = new Date(); 60 | beginOfToday.setHours(0, 0, 0, 0); 61 | return beginOfToday.getTime(); 62 | }, []); 63 | const [time, setTime] = useState(Date.now() - timeBase); 64 | 65 | useEffect(() => { 66 | let keepGoing = true; 67 | const setTimeOnNextFrame = () => { 68 | if (!keepGoing) return; 69 | window.requestAnimationFrame(() => { 70 | setTime(Date.now() - timeBase); 71 | setTimeOnNextFrame(); 72 | }); 73 | } 74 | setTimeOnNextFrame(); 75 | 76 | return () => { 77 | keepGoing = false; 78 | }; 79 | }, []) 80 | 81 | return $`div`({ className: 'clock', key: mode }, 82 | ...(mode === CLOCK_MODE_1 ? [ 83 | $Ring({ dots: 3, color: '#000', deg: calDeg(time, TIME_EACH_SEC) }), 84 | $Ring({ dots: 6, color: '#2f2b0b', deg: calDeg(time, TIME_EACH_SEC * 2) }), 85 | $Ring({ dots: 9, color: '#6b6218', deg: calDeg(time, TIME_EACH_SEC * 4) }), 86 | $Ring({ dots: 12, color: '#b2a42a', deg: calDeg(time, TIME_EACH_SEC * 8) }), 87 | $Ring({ dots: 15, color: '#ffeb3b', deg: calDeg(time, TIME_EACH_SEC * 16) }), 88 | 89 | $Ring({ dots: 18, color: '#ffeb3b', deg: calDeg(time, TIME_EACH_MIN), highlight: true }), 90 | 91 | $Ring({ dots: 21, color: '#ede945', deg: calDeg(time, TIME_EACH_MIN * 2) }), 92 | $Ring({ dots: 24, color: '#d3e757', deg: calDeg(time, TIME_EACH_MIN * 3) }), 93 | $Ring({ dots: 27, color: '#b8e467', deg: calDeg(time, TIME_EACH_MIN * 6) }), 94 | $Ring({ dots: 30, color: '#9fe277', deg: calDeg(time, TIME_EACH_MIN * 15) }), 95 | $Ring({ dots: 33, color: '#88e087', deg: calDeg(time, TIME_EACH_MIN * 20) }), 96 | 97 | $Ring({ dots: 36, color: '#6bde99', deg: calDeg(time, TIME_EACH_HOUR), highlight: true }), 98 | 99 | $Ring({ dots: 39, color: '#8fe1b3', deg: calDeg(time, TIME_EACH_HOUR * 2) }), 100 | $Ring({ dots: 42, color: '#c1e6d9', deg: calDeg(time, TIME_EACH_HOUR * 6) }), 101 | $Ring({ dots: 45, color: '#f3ebfd', deg: calDeg(time, TIME_EACH_HOUR * 12) }), 102 | 103 | $Ring({ dots: 48, color: '#f5ebff', deg: calDeg(time, TIME_EACH_HALF_DAY), highlight: true }), 104 | ] : []), 105 | 106 | ...(mode === CLOCK_MODE_2 ? [ 107 | $Ring({ dots: 3, color: '#000', deg: calDeg(time, TIME_EACH_HALF_DAY), highlight: true }), 108 | $Ring({ dots: 6, color: '#2f2b0b', deg: calDeg(time, TIME_EACH_HOUR * 12) }), 109 | $Ring({ dots: 9, color: '#6b6218', deg: calDeg(time, TIME_EACH_HOUR * 8) }), 110 | $Ring({ dots: 12, color: '#b2a42a', deg: calDeg(time, TIME_EACH_HOUR * 4) }), 111 | $Ring({ dots: 15, color: '#ffeb3b', deg: calDeg(time, TIME_EACH_HOUR * 2) }), 112 | 113 | $Ring({ dots: 18, color: '#ffeb3b', deg: calDeg(time, TIME_EACH_HOUR), highlight: true }), 114 | 115 | $Ring({ dots: 21, color: '#ede945', deg: calDeg(time, TIME_EACH_MIN * 20) }), 116 | $Ring({ dots: 24, color: '#d3e757', deg: calDeg(time, TIME_EACH_MIN * 15) }), 117 | $Ring({ dots: 27, color: '#b8e467', deg: calDeg(time, TIME_EACH_MIN * 6) }), 118 | $Ring({ dots: 30, color: '#9fe277', deg: calDeg(time, TIME_EACH_MIN * 3) }), 119 | $Ring({ dots: 33, color: '#88e087', deg: calDeg(time, TIME_EACH_MIN * 2) }), 120 | 121 | $Ring({ dots: 36, color: '#6bde99', deg: calDeg(time, TIME_EACH_MIN), highlight: true }), 122 | 123 | $Ring({ dots: 39, color: '#8fe1b3', deg: calDeg(time, TIME_EACH_SEC * 15) }), 124 | $Ring({ dots: 42, color: '#c1e6d9', deg: calDeg(time, TIME_EACH_SEC * 6) }), 125 | $Ring({ dots: 45, color: '#f3ebfd', deg: calDeg(time, TIME_EACH_SEC * 3) }), 126 | 127 | $Ring({ dots: 48, color: '#f5ebff', deg: calDeg(time, TIME_EACH_SEC) }), 128 | ] : []) 129 | ); 130 | }); 131 | 132 | const $App = $(() => { 133 | const [mode, setMode] = useState(CLOCK_MODE_1); 134 | return $`div`({ className: 'app-content', onClick: () => { 135 | setMode(mode === CLOCK_MODE_1 ? CLOCK_MODE_2 : CLOCK_MODE_1); 136 | }}, 137 | $Clock({ mode }), 138 | ); 139 | }); 140 | 141 | document.addEventListener('DOMContentLoaded', () => { 142 | ReactDOM.render( 143 | $App(), 144 | document.getElementById('app') 145 | ); 146 | }); 147 | -------------------------------------------------------------------------------- /team/pastleo/day-2-clock/style.css: -------------------------------------------------------------------------------- 1 | html, body, #app { 2 | margin: 0; 3 | overflow: hidden; 4 | height: 100%; 5 | } 6 | 7 | #loading { 8 | height: 100%; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | text-align: center; 14 | } 15 | 16 | .app-content { 17 | height: 100%; 18 | } 19 | 20 | .clock { 21 | position: absolute; 22 | left: 50vw; 23 | top: 50vh; 24 | transform: rotate(-90deg); 25 | } 26 | 27 | .ring { 28 | position: relative; 29 | } 30 | .ring .bar { 31 | position: absolute; 32 | transform-origin: 0 0; 33 | } 34 | .ring .bar span.dot { 35 | background: black; 36 | width: 12px; 37 | height: 12px; 38 | box-sizing: border-box; 39 | display: block; 40 | border-radius: 6px; 41 | margin-top: -6px; 42 | margin-left: auto; 43 | } 44 | 45 | .ring.highlight .bar:first-child span.dot { 46 | border: white solid 3px; 47 | box-shadow: black 0 0 10px; 48 | } 49 | --------------------------------------------------------------------------------