From 74a4724d4950de328f6b5041b2017973a35007be Mon Sep 17 00:00:00 2001 From: AI Date: Tue, 15 Apr 2025 20:51:04 +0800 Subject: [PATCH 01/14] change --- readme.md | 65 +------------------------------------------------------ 1 file changed, 1 insertion(+), 64 deletions(-) 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 From 1c8d6f98024b610160a4f56d181933efeba8a878 Mon Sep 17 00:00:00 2001 From: AI Date: Tue, 15 Apr 2025 21:54:23 +0800 Subject: [PATCH 02/14] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=AF=AB=E6=AD=BB?= =?UTF-8?q?=E7=9A=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01_Java-Script-Drum-Kit/index-START.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/01_Java-Script-Drum-Kit/index-START.html b/01_Java-Script-Drum-Kit/index-START.html index 4070d32..64ebdf7 100755 --- a/01_Java-Script-Drum-Kit/index-START.html +++ b/01_Java-Script-Drum-Kit/index-START.html @@ -55,9 +55,17 @@ - + From 8239807da5034b3ece9e8b1b74cb8154e7c2f80c Mon Sep 17 00:00:00 2001 From: AI Date: Sun, 20 Apr 2025 12:23:06 +0800 Subject: [PATCH 03/14] =?UTF-8?q?=E5=85=88=E5=AE=8C=E6=88=90playHandler?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01_Java-Script-Drum-Kit/index-START.html | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/01_Java-Script-Drum-Kit/index-START.html b/01_Java-Script-Drum-Kit/index-START.html index 64ebdf7..f540fc7 100755 --- a/01_Java-Script-Drum-Kit/index-START.html +++ b/01_Java-Script-Drum-Kit/index-START.html @@ -55,16 +55,29 @@ - + From d628a244bfe170779cb70cce7a1c94728cc42802 Mon Sep 17 00:00:00 2001 From: AI Date: Sun, 20 Apr 2025 13:34:18 +0800 Subject: [PATCH 04/14] transition --- 01_Java-Script-Drum-Kit/index-START.html | 68 +++++++++++++++--------- 1 file changed, 44 insertions(+), 24 deletions(-) diff --git a/01_Java-Script-Drum-Kit/index-START.html b/01_Java-Script-Drum-Kit/index-START.html index f540fc7..bb00098 100755 --- a/01_Java-Script-Drum-Kit/index-START.html +++ b/01_Java-Script-Drum-Kit/index-START.html @@ -9,53 +9,53 @@
-
+
A clap
-
+
S hihat
-
+
D kick
-
+
F openhat
-
+
G boom
-
+
H ride
-
+
J snare
-
+
K tom
-
+
L tink
- - - - - - - - - + + + + + + + + + From 11ec27cc7bdf2e5d49c42e7a4af6f85eb5fcfdf3 Mon Sep 17 00:00:00 2001 From: yichia Date: Sun, 20 Apr 2025 16:16:26 +0800 Subject: [PATCH 05/14] test yichia --- 01_Java-Script-Drum-Kit/index-Yichia.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 01_Java-Script-Drum-Kit/index-Yichia.html 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..e69de29 From 5f215657dc03daacb28e327af9e91ee9d9d33cf9 Mon Sep 17 00:00:00 2001 From: AI Date: Mon, 21 Apr 2025 22:03:11 +0800 Subject: [PATCH 06/14] cheange --- 01_Java-Script-Drum-Kit/index-Mike.html | 126 +++++++++++++++++++++++ 01_Java-Script-Drum-Kit/index-START.html | 107 ------------------- 2 files changed, 126 insertions(+), 107 deletions(-) create mode 100644 01_Java-Script-Drum-Kit/index-Mike.html delete mode 100755 01_Java-Script-Drum-Kit/index-START.html 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 bb00098..0000000 --- a/01_Java-Script-Drum-Kit/index-START.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - From e78bdfea39012d32a9d11e25063823e2796013d2 Mon Sep 17 00:00:00 2001 From: AI Date: Mon, 21 Apr 2025 22:06:24 +0800 Subject: [PATCH 07/14] add new file day2 --- 02_JS-and-CSS-Clock/index-Mike.html | 74 +++++++++++++++++++++++++++ 02_JS-and-CSS-Clock/index-Yichia.html | 74 +++++++++++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 02_JS-and-CSS-Clock/index-Mike.html create mode 100644 02_JS-and-CSS-Clock/index-Yichia.html 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..ee7eaef --- /dev/null +++ b/02_JS-and-CSS-Clock/index-Mike.html @@ -0,0 +1,74 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + 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..ee7eaef --- /dev/null +++ b/02_JS-and-CSS-Clock/index-Yichia.html @@ -0,0 +1,74 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + From 93b76b7f9585a9128715e37ca78151162a9ab779 Mon Sep 17 00:00:00 2001 From: AI Date: Tue, 29 Apr 2025 21:18:08 +0800 Subject: [PATCH 08/14] day2 --- 02_JS-and-CSS-Clock/index-Mike.html | 39 +++++++++++++++++++++++++--- 02_JS-and-CSS-Clock/index-START.html | 5 ++-- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/02_JS-and-CSS-Clock/index-Mike.html b/02_JS-and-CSS-Clock/index-Mike.html index ee7eaef..e73627c 100644 --- a/02_JS-and-CSS-Clock/index-Mike.html +++ b/02_JS-and-CSS-Clock/index-Mike.html @@ -9,9 +9,9 @@
-
-
-
+
+
+
@@ -62,11 +62,44 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } diff --git a/02_JS-and-CSS-Clock/index-START.html b/02_JS-and-CSS-Clock/index-START.html index ee7eaef..bc08b66 100755 --- a/02_JS-and-CSS-Clock/index-START.html +++ b/02_JS-and-CSS-Clock/index-START.html @@ -65,9 +65,10 @@ } - From d0975cea14e0c11093fe2f454770209b9ee3078b Mon Sep 17 00:00:00 2001 From: AI Date: Tue, 29 Apr 2025 21:44:49 +0800 Subject: [PATCH 09/14] add day3 new file --- 03_CSS-Variables/index-FINISHED.html | 2 +- 03_CSS-Variables/index-Mike.html | 51 ++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 03_CSS-Variables/index-Mike.html diff --git a/03_CSS-Variables/index-FINISHED.html b/03_CSS-Variables/index-FINISHED.html index c931959..838d0e6 100755 --- a/03_CSS-Variables/index-FINISHED.html +++ b/03_CSS-Variables/index-FINISHED.html @@ -68,7 +68,7 @@

Update CSS Variables with JS

} inputs.forEach(input => input.addEventListener('change', handleUpdate)); - inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); + inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));//有這一行才會有類似漸層的效果 diff --git a/03_CSS-Variables/index-Mike.html b/03_CSS-Variables/index-Mike.html new file mode 100644 index 0000000..8a4f0d5 --- /dev/null +++ b/03_CSS-Variables/index-Mike.html @@ -0,0 +1,51 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From d005ffe6c4a2e33537e67dcb90ebebd3adc09207 Mon Sep 17 00:00:00 2001 From: AI Date: Tue, 29 Apr 2025 22:42:03 +0800 Subject: [PATCH 10/14] =?UTF-8?q?day3=20=E6=AF=94=E8=BC=83=E7=AC=A8?= =?UTF-8?q?=E7=9A=84=E5=AF=AB=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 03_CSS-Variables/index-FINISHED.html | 2 +- 03_CSS-Variables/index-Mike.html | 34 +++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/03_CSS-Variables/index-FINISHED.html b/03_CSS-Variables/index-FINISHED.html index 838d0e6..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

+document.getElementById("spacing").addEventListener("input", widthChange);//我直接去監聽inputs +document.getElementById("blur").addEventListener("input", imgBlur); +document.getElementById("color").addEventListener("input", colorChange); + +//改變對應的元素 +function widthChange(event) { + let newWidth = event.target.value; + document.documentElement.style.setProperty("--spacing",`${newWidth}px`); +} +function imgBlur(event) { + let newBlur = event.target.value; + document.documentElement.style.setProperty("--blur", `${newBlur}px`); +} +function colorChange(event) { + let newColor = event.target.value; + document.documentElement.style.setProperty("--color", `${newColor}`); +} + From a2a0613eff6a45bed5daad20cad5c0c2f6629075 Mon Sep 17 00:00:00 2001 From: AI Date: Sat, 10 May 2025 09:11:19 +0800 Subject: [PATCH 11/14] day3 --- 03_CSS-Variables/index-Mike.html | 1 + 1 file changed, 1 insertion(+) diff --git a/03_CSS-Variables/index-Mike.html b/03_CSS-Variables/index-Mike.html index 92690fa..9ea6fb6 100644 --- a/03_CSS-Variables/index-Mike.html +++ b/03_CSS-Variables/index-Mike.html @@ -66,6 +66,7 @@

Update CSS Variables with JS

//改變對應的元素 function widthChange(event) { + console.log(event.target) let newWidth = event.target.value; document.documentElement.style.setProperty("--spacing",`${newWidth}px`); } From 0f64e387f023ccef8b66e9efba153c3fe37ce1e1 Mon Sep 17 00:00:00 2001 From: yichia Date: Sun, 18 May 2025 16:15:49 +0800 Subject: [PATCH 12/14] day2 --- 01_Java-Script-Drum-Kit/index-Yichia.html | 127 +++++++++++++++++++ 02_JS-and-CSS-Clock/index-START.html | 108 ++++++++--------- 02_JS-and-CSS-Clock/index-Yichia.html | 141 +++++++++++++--------- 3 files changed, 264 insertions(+), 112 deletions(-) diff --git a/01_Java-Script-Drum-Kit/index-Yichia.html b/01_Java-Script-Drum-Kit/index-Yichia.html index e69de29..62cf57c 100644 --- a/01_Java-Script-Drum-Kit/index-Yichia.html +++ 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-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 index ee7eaef..f01e3f9 100644 --- a/02_JS-and-CSS-Clock/index-Yichia.html +++ b/02_JS-and-CSS-Clock/index-Yichia.html @@ -1,12 +1,10 @@ - - - JS + CSS Clock - - - - + + + JS + CSS Clock + +
@@ -15,60 +13,95 @@
+ - .clock-face { - position: relative; - width: 100%; - height: 100%; - transform: translateY(-3px); /* account for the height of the clock hands */ - } + - + setClock(); + setInterval(setClock, 1000); + + From 380ce84a6f2c592d68ad189ae358d13b456c3f3c Mon Sep 17 00:00:00 2001 From: yichia Date: Tue, 20 May 2025 23:45:12 +0800 Subject: [PATCH 13/14] =?UTF-8?q?day3=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 03_CSS-Variables/index-Yichia.html | 81 ++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100755 03_CSS-Variables/index-Yichia.html 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

+ +
+ + + + + + + + +
+ + + + + + + + From cc44e0d293d79f930fed6fce344df8ba7eab72af Mon Sep 17 00:00:00 2001 From: AI Date: Sun, 8 Jun 2025 00:00:19 +0800 Subject: [PATCH 14/14] Create index-Mike.html --- 04_Array-Cardio-Day-1/index-Mike.html | 68 +++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 04_Array-Cardio-Day-1/index-Mike.html diff --git a/04_Array-Cardio-Day-1/index-Mike.html b/04_Array-Cardio-Day-1/index-Mike.html new file mode 100644 index 0000000..4a410de --- /dev/null +++ b/04_Array-Cardio-Day-1/index-Mike.html @@ -0,0 +1,68 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + +