diff --git a/01_Java-Script-Drum-Kit/index-Mike.html b/01_Java-Script-Drum-Kit/index-Mike.html new file mode 100644 index 0000000..0ed2851 --- /dev/null +++ b/01_Java-Script-Drum-Kit/index-Mike.html @@ -0,0 +1,126 @@ + + + + + JS Drum Kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + diff --git a/01_Java-Script-Drum-Kit/index-START.html b/01_Java-Script-Drum-Kit/index-START.html deleted file mode 100755 index 4070d32..0000000 --- a/01_Java-Script-Drum-Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01_Java-Script-Drum-Kit/index-Yichia.html b/01_Java-Script-Drum-Kit/index-Yichia.html new file mode 100644 index 0000000..62cf57c --- /dev/null +++ b/01_Java-Script-Drum-Kit/index-Yichia.html @@ -0,0 +1,127 @@ + + + + + JS Drum Kit + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + + diff --git a/02_JS-and-CSS-Clock/index-Mike.html b/02_JS-and-CSS-Clock/index-Mike.html new file mode 100644 index 0000000..e73627c --- /dev/null +++ b/02_JS-and-CSS-Clock/index-Mike.html @@ -0,0 +1,107 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/02_JS-and-CSS-Clock/index-START.html b/02_JS-and-CSS-Clock/index-START.html index ee7eaef..ef88de2 100755 --- a/02_JS-and-CSS-Clock/index-START.html +++ b/02_JS-and-CSS-Clock/index-START.html @@ -1,12 +1,10 @@ - - - JS + CSS Clock - - - - + + + JS + CSS Clock + +
@@ -15,60 +13,54 @@
+ + .clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + position: relative; + padding: 2rem; + box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef, + inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2); + } - - + + diff --git a/02_JS-and-CSS-Clock/index-Yichia.html b/02_JS-and-CSS-Clock/index-Yichia.html new file mode 100644 index 0000000..f01e3f9 --- /dev/null +++ b/02_JS-and-CSS-Clock/index-Yichia.html @@ -0,0 +1,107 @@ + + + + + JS + CSS Clock + + +
+
+
+
+
+
+
+ + + + + + diff --git a/03_CSS-Variables/index-FINISHED.html b/03_CSS-Variables/index-FINISHED.html index c931959..dca3ce4 100755 --- a/03_CSS-Variables/index-FINISHED.html +++ b/03_CSS-Variables/index-FINISHED.html @@ -22,7 +22,7 @@

Update CSS Variables with JS

+ + + + + diff --git a/03_CSS-Variables/index-Yichia.html b/03_CSS-Variables/index-Yichia.html new file mode 100755 index 0000000..1fc499a --- /dev/null +++ b/03_CSS-Variables/index-Yichia.html @@ -0,0 +1,81 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + diff --git a/readme.md b/readme.md index 2189d9f..ce1b2c5 100755 --- a/readme.md +++ b/readme.md @@ -1,64 +1 @@ -## JavaScript30 -是一個來自加拿大的工程師WES BOS製作的一系列純javascript練習， -共有30個主題，每個主題有一個教學影片及範例檔案。 ->[WES BOS的GitHub](https://github.com/wesbos/JavaScript30) -[JavaScript30官網](https://javascript30.com/) - -## 課程一覽站（動圖） -[連結位置：http://guahsu.io/JavaScript30/](http://guahsu.io/JavaScript30/) - -## 目的 -實作範例，並紀錄每個練習的過程。 - -## 格式 -1. 主題:這個練習主要的目的/功能 -2. 步驟:整個範例的建置步驟 -3. 語法&備註:紀錄練習中使用到的語法 -4. 探索:在練習的範例中，擴充或調整一個與主題相關的功能。 - -## 資料結構 -遵循原本提供的的資料結構， -並在每個練習加上index-GuaHsu.html來放置我所完成的版本。 - -## 備註 -我會放在自己的[部落格](https://guahsu.io)一份，並在GitHub上也留存一份。 -若有任何錯誤或指教請在告知，謝謝:)! - -## 列表 -| No | 主題 | 筆記 | DEMO | -| --- | --- | --- | --- | -| 01 | JavaScript Drum Kit | [筆記](https://guahsu.io/2017/05/JavaScript30-01-Java-Script-Drum-Kit/) | [DEMO](https://guahsu.io/JavaScript30/01_Java-Script-Drum-Kit/index-GuaHsu.html) | -| 02 | JS and CSS Clock | [筆記](https://guahsu.io/2017/05/JavaScript30-02-JS-and-CSS-Clock/) | [DEMO](https://guahsu.io/JavaScript30/02_JS-and-CSS-Clock/index-GuaHsu.html) | -| 03 | CSS Variables | [筆記](https://guahsu.io/2017/05/JavaScript30-03-CSS-Variables/) | [DEMO](https://guahsu.io/JavaScript30/03_CSS-Variables/index-GuaHsu.html) | -| 04 | Array Cardio Day 1 | [筆記](https://guahsu.io/2017/05/JavaScript30-04-Array-Cardio-Day-1/) | [DEMO](https://guahsu.io/JavaScript30/04_Array-Cardio-Day-1/index-GuaHsu.html) | -| 05 | Flex Panel Gallery | [筆記](https://guahsu.io/2017/05/JavaScript30-05-Flex-Panel-Gallery/) | [DEMO](https://guahsu.io/JavaScript30//05_Flex-Panel-Gallery/index-GuaHsu.html) | -| 06 | Type Ahead | [筆記](https://guahsu.io/2017/05/JavaScript30-06-Type-Ahead/) | [DEMO](https://guahsu.io/JavaScript30/06_Type-Ahead/index-GuaHsu.html) | -| 07 | Array Cardio Day 2 | [筆記](https://guahsu.io/2017/05/JavaScript30-07-Array-Cardio-Day-2/) | [DEMO](https://guahsu.io/JavaScript30/07_Array-Cardio-Day-2/index-GuaHsu.html) | -| 08 | Fun with HTML5 Canvas | [筆記](https://guahsu.io/2017/06/JavaScript30-08-Fun-with-HTML5-Canvas/) | [DEMO](https://guahsu.io/JavaScript30/08_Fun-with-HTML5-Canvas/index-GuaHsu.html) | -| 09 | Dev Tools Domination | [筆記](https://guahsu.io/2017/06/JavaScript30-09-Dev-Tools-Domination/) | [DEMO](https://guahsu.io/JavaScript30/09_Dev-Tools-Domination/index-GuaHsu.html) | -| 10 | Hold Shift and Check Checkboxes | [筆記](https://guahsu.io/2017/07/JavaScript30-10-Hold-Shift-and-Check-Checkboxes/) | [DEMO](https://guahsu.io/JavaScript30/10_Hold-Shift-and-Check-Checkboxes/index-GuaHsu.html) | -| 11 | Custom Video Player | [筆記](https://guahsu.io/2017/07/JavaScript30-11-Custom-Video-Player/) | [DEMO](https://guahsu.io/JavaScript30/11_Custom-Video-Player/index-GuaHsu.html) | -| 12 | Key Sequence Detection | [筆記](https://guahsu.io/2017/07/JavaScript30-12-Key-Sequence-Detection/) | [DEMO](https://guahsu.io/JavaScript30/12_Key-Sequence-Detection/index-GuaHsu.html) | -| 13 | Slide in on Scroll | [筆記](https://guahsu.io/2017/08/JavaScript30-13-Slide-in-on-Scroll/) | [DEMO](https://guahsu.io/JavaScript30/13_Slide-in-on-Scroll/index-GuaHsu.html) | -| 14 | JavaScript References VS Copying | [筆記](https://guahsu.io/2017/08/JavaScript30-14-JavaScript-References-VS-Copying/) | [DEMO](https://guahsu.io/JavaScript30/14_JavaScript-References-VS-Copying/index-GuaHsu.html) | -| 15 | LocalStorage | [筆記](https://guahsu.io/2017/09/JavaScript30-15-LocalStorage/) | [DEMO](https://guahsu.io/JavaScript30/15_LocalStorage/index-GuaHsu.html) | -| 16 | Mouse Move Shadow | [筆記](https://guahsu.io/2017/10/JavaScript30-16-Mouse-Move-Shadow/) | [DEMO](https://guahsu.io/JavaScript30/16_Mouse-Move-Shadow/index-GuaHsu.html) | -| 17 | Sort Without Articles | [筆記](https://guahsu.io/2017/10/JavaScript30-17-Sort-Without-Articles/) | [DEMO](https://guahsu.io/JavaScript30/17_Sort-Without-Articles/index-GuaHsu.html) | -| 18 | Adding Up Times with Reduce | [筆記](https://guahsu.io/2017/10/JavaScript30-18-Adding-Up-Times-with-Reduce/) | [DEMO](https://guahsu.io/JavaScript30/18_Adding-Up-Times-with-Reduce/index-GuaHsu.html) | -| 19 | Webcam Fun | [筆記](https://guahsu.io/2017/10/JavaScript30-19-Webcam-Fun/) | [DEMO](https://guahsu.io/JavaScript30/19_Webcam-Fun/index-GuaHsu.html) | -| 20 | Speech Detection | [筆記](https://guahsu.io/2017/10/JavaScript30-20-Speech-Detection/) | [DEMO](https://guahsu.io/JavaScript30/20_Speech-Detection/index-GuaHsu.html) | -| 21 | Geolocation | [筆記](https://guahsu.io/2017/10/JavaScript30-21-Geolocation/) | [DEMO](https://guahsu.io/JavaScript30/21_Geolocation/index-GuaHsu.html) | -| 22 | Follow Along Link Highlighter | [筆記](https://guahsu.io/2017/10/JavaScript30-22-Follow-Along-Link-Highlighter/) | [DEMO](https://guahsu.io/JavaScript30/22_Follow-Along-Link-Highlighter/index-GuaHsu.html) | -| 23 | Speech Synthesis | [筆記](https://guahsu.io/2017/10/JavaScript30-23-Speech-Synthesis/) | [DEMO](https://guahsu.io/JavaScript30/23_Speech-Synthesis/index-GuaHsu.html) | -| 24 | Sticky Nav | [筆記](https://guahsu.io/2017/10/JavaScript30-24-Sticky-Nav/) | [DEMO](https://guahsu.io/JavaScript30/24_Sticky-Nav/index-GuaHsu.html) | -| 25 | Event Capture, Propagation, Bubbling and Once | [筆記](https://guahsu.io/2017/10/JavaScript30-25-Event-Capture-Propagation-Bubbling-and-Once/) | [DEMO](https://guahsu.io/JavaScript30/25_Event-Capture-Propagation-Bubbling-and-Once/index-GuaHsu.html) | -| 26 | Stripe Follow Along Nav | [筆記](https://guahsu.io/2017/10/JavaScript30-26-Stripe-Follow-Along-Nav/) | [DEMO](http://guahsu.io/JavaScript30/26_Stripe-Follow-Along-Nav/index-GuaHsu.html) | -| 27 | Click and Drag | [筆記](https://guahsu.io/2017/10/JavaScript30-27-Click-and-Drag/) | [DEMO](http://guahsu.io/JavaScript30/27_Click-and-Drag/index-GuaHsu.html) | -| 28 | Video Speed Controller | [筆記](https://guahsu.io/2017/10/JavaScript30-28-Video-Speed-Controller/) | [DEMO](http://guahsu.io/JavaScript30/28_Video-Speed-Controller/index-GuaHsu.html) | -| 29 | Countdown Timer | [筆記](https://guahsu.io/2017/11/JavaScript30-29-Countdown-Timer/) | [DEMO](http://guahsu.io/JavaScript30/29_Countdown_Timer/index-GuaHsu.html) | -| 30 | Whack A Mole | [筆記](https://guahsu.io/2017/11/JavaScript30-30-Whack-A-Mole/) | [DEMO](http://guahsu.io/JavaScript30/30_Whack-A-Mole/index-GuaHsu.html) | - -## 其他 -| No | 主題 | 筆記 | DEMO | -| --- | --- | --- | --- | -| 31 | Gif-Loader | [筆記](https://guahsu.io/2017/11/JavaScript30-Final-Gif-Loader/) | [DEMO](http://guahsu.io/JavaScript30/31_Gif-Loader/index-GuaHsu.html) | +## JavaScript30 是一個來自加拿大的工程師WES BOS製作的一系列純javascript練習， 共有30個主題，每個主題有一個教學影片及範例檔案。 >[WES BOS的GitHub](https://github.com/wesbos/JavaScript30) [JavaScript30官網](https://javascript30.com/) ## 課程一覽站（動圖） [連結位置：http://guahsu.io/JavaScript30/](http://guahsu.io/JavaScript30/) ## 目的 實作範例，並紀錄每個練習的過程。 ## 格式 1. 主題:這個練習主要的目的/功能 2. 步驟:整個範例的建置步驟 3. 語法&備註:紀錄練習中使用到的語法 4. 探索:在練習的範例中，擴充或調整一個與主題相關的功能。 ## 資料結構 遵循原本提供的的資料結構， 並在每個練習加上index-GuaHsu.html來放置我所完成的版本。 ## 備註 我會放在自己的[部落格](https://guahsu.io)一份，並在GitHub上也留存一份。 若有任何錯誤或指教請在告知，謝謝:)! Aasdasdasd ## 列表 | No | 主題 | 筆記 | DEMO | | --- | --- | --- | --- | | 01 | JavaScript Drum Kit | [筆記](https://guahsu.io/2017/05/JavaScript30-01-Java-Script-Drum-Kit/) | [DEMO](https://guahsu.io/JavaScript30/01_Java-Script-Drum-Kit/index-GuaHsu.html) | | 02 | JS and CSS Clock | [筆記](https://guahsu.io/2017/05/JavaScript30-02-JS-and-CSS-Clock/) | [DEMO](https://guahsu.io/JavaScript30/02_JS-and-CSS-Clock/index-GuaHsu.html) | | 03 | CSS Variables | [筆記](https://guahsu.io/2017/05/JavaScript30-03-CSS-Variables/) | [DEMO](https://guahsu.io/JavaScript30/03_CSS-Variables/index-GuaHsu.html) | | 04 | Array Cardio Day 1 | [筆記](https://guahsu.io/2017/05/JavaScript30-04-Array-Cardio-Day-1/) | [DEMO](https://guahsu.io/JavaScript30/04_Array-Cardio-Day-1/index-GuaHsu.html) | | 05 | Flex Panel Gallery | [筆記](https://guahsu.io/2017/05/JavaScript30-05-Flex-Panel-Gallery/) | [DEMO](https://guahsu.io/JavaScript30//05_Flex-Panel-Gallery/index-GuaHsu.html) | | 06 | Type Ahead | [筆記](https://guahsu.io/2017/05/JavaScript30-06-Type-Ahead/) | [DEMO](https://guahsu.io/JavaScript30/06_Type-Ahead/index-GuaHsu.html) | | 07 | Array Cardio Day 2 | [筆記](https://guahsu.io/2017/05/JavaScript30-07-Array-Cardio-Day-2/) | [DEMO](https://guahsu.io/JavaScript30/07_Array-Cardio-Day-2/index-GuaHsu.html) | | 08 | Fun with HTML5 Canvas | [筆記](https://guahsu.io/2017/06/JavaScript30-08-Fun-with-HTML5-Canvas/) | [DEMO](https://guahsu.io/JavaScript30/08_Fun-with-HTML5-Canvas/index-GuaHsu.html) | | 09 | Dev Tools Domination | [筆記](https://guahsu.io/2017/06/JavaScript30-09-Dev-Tools-Domination/) | [DEMO](https://guahsu.io/JavaScript30/09_Dev-Tools-Domination/index-GuaHsu.html) | | 10 | Hold Shift and Check Checkboxes | [筆記](https://guahsu.io/2017/07/JavaScript30-10-Hold-Shift-and-Check-Checkboxes/) | [DEMO](https://guahsu.io/JavaScript30/10_Hold-Shift-and-Check-Checkboxes/index-GuaHsu.html) | | 11 | Custom Video Player | [筆記](https://guahsu.io/2017/07/JavaScript30-11-Custom-Video-Player/) | [DEMO](https://guahsu.io/JavaScript30/11_Custom-Video-Player/index-GuaHsu.html) | | 12 | Key Sequence Detection | [筆記](https://guahsu.io/2017/07/JavaScript30-12-Key-Sequence-Detection/) | [DEMO](https://guahsu.io/JavaScript30/12_Key-Sequence-Detection/index-GuaHsu.html) | | 13 | Slide in on Scroll | [筆記](https://guahsu.io/2017/08/JavaScript30-13-Slide-in-on-Scroll/) | [DEMO](https://guahsu.io/JavaScript30/13_Slide-in-on-Scroll/index-GuaHsu.html) | | 14 | JavaScript References VS Copying | [筆記](https://guahsu.io/2017/08/JavaScript30-14-JavaScript-References-VS-Copying/) | [DEMO](https://guahsu.io/JavaScript30/14_JavaScript-References-VS-Copying/index-GuaHsu.html) | | 15 | LocalStorage | [筆記](https://guahsu.io/2017/09/JavaScript30-15-LocalStorage/) | [DEMO](https://guahsu.io/JavaScript30/15_LocalStorage/index-GuaHsu.html) | | 16 | Mouse Move Shadow | [筆記](https://guahsu.io/2017/10/JavaScript30-16-Mouse-Move-Shadow/) | [DEMO](https://guahsu.io/JavaScript30/16_Mouse-Move-Shadow/index-GuaHsu.html) | | 17 | Sort Without Articles | [筆記](https://guahsu.io/2017/10/JavaScript30-17-Sort-Without-Articles/) | [DEMO](https://guahsu.io/JavaScript30/17_Sort-Without-Articles/index-GuaHsu.html) | | 18 | Adding Up Times with Reduce | [筆記](https://guahsu.io/2017/10/JavaScript30-18-Adding-Up-Times-with-Reduce/) | [DEMO](https://guahsu.io/JavaScript30/18_Adding-Up-Times-with-Reduce/index-GuaHsu.html) | | 19 | Webcam Fun | [筆記](https://guahsu.io/2017/10/JavaScript30-19-Webcam-Fun/) | [DEMO](https://guahsu.io/JavaScript30/19_Webcam-Fun/index-GuaHsu.html) | | 20 | Speech Detection | [筆記](https://guahsu.io/2017/10/JavaScript30-20-Speech-Detection/) | [DEMO](https://guahsu.io/JavaScript30/20_Speech-Detection/index-GuaHsu.html) | | 21 | Geolocation | [筆記](https://guahsu.io/2017/10/JavaScript30-21-Geolocation/) | [DEMO](https://guahsu.io/JavaScript30/21_Geolocation/index-GuaHsu.html) | | 22 | Follow Along Link Highlighter | [筆記](https://guahsu.io/2017/10/JavaScript30-22-Follow-Along-Link-Highlighter/) | [DEMO](https://guahsu.io/JavaScript30/22_Follow-Along-Link-Highlighter/index-GuaHsu.html) | | 23 | Speech Synthesis | [筆記](https://guahsu.io/2017/10/JavaScript30-23-Speech-Synthesis/) | [DEMO](https://guahsu.io/JavaScript30/23_Speech-Synthesis/index-GuaHsu.html) | | 24 | Sticky Nav | [筆記](https://guahsu.io/2017/10/JavaScript30-24-Sticky-Nav/) | [DEMO](https://guahsu.io/JavaScript30/24_Sticky-Nav/index-GuaHsu.html) | | 25 | Event Capture, Propagation, Bubbling and Once | [筆記](https://guahsu.io/2017/10/JavaScript30-25-Event-Capture-Propagation-Bubbling-and-Once/) | [DEMO](https://guahsu.io/JavaScript30/25_Event-Capture-Propagation-Bubbling-and-Once/index-GuaHsu.html) | | 26 | Stripe Follow Along Nav | [筆記](https://guahsu.io/2017/10/JavaScript30-26-Stripe-Follow-Along-Nav/) | [DEMO](http://guahsu.io/JavaScript30/26_Stripe-Follow-Along-Nav/index-GuaHsu.html) | | 27 | Click and Drag | [筆記](https://guahsu.io/2017/10/JavaScript30-27-Click-and-Drag/) | [DEMO](http://guahsu.io/JavaScript30/27_Click-and-Drag/index-GuaHsu.html) | | 28 | Video Speed Controller | [筆記](https://guahsu.io/2017/10/JavaScript30-28-Video-Speed-Controller/) | [DEMO](http://guahsu.io/JavaScript30/28_Video-Speed-Controller/index-GuaHsu.html) | | 29 | Countdown Timer | [筆記](https://guahsu.io/2017/11/JavaScript30-29-Countdown-Timer/) | [DEMO](http://guahsu.io/JavaScript30/29_Countdown_Timer/index-GuaHsu.html) | | 30 | Whack A Mole | [筆記](https://guahsu.io/2017/11/JavaScript30-30-Whack-A-Mole/) | [DEMO](http://guahsu.io/JavaScript30/30_Whack-A-Mole/index-GuaHsu.html) | ## 其他 | No | 主題 | 筆記 | DEMO | | --- | --- | --- | --- | | 31 | Gif-Loader | [筆記](https://guahsu.io/2017/11/JavaScript30-Final-Gif-Loader/) | [DEMO](http://guahsu.io/JavaScript30/31_Gif-Loader/index-GuaHsu.html) | \ No newline at end of file