diff --git a/02_JS-and-CSS-Clock/readme.md b/02_JS-and-CSS-Clock/readme.md index 383dcfe..a133d13 100644 --- a/02_JS-and-CSS-Clock/readme.md +++ b/02_JS-and-CSS-Clock/readme.md @@ -36,7 +36,7 @@ ## **CSS語法&備註** -### **transform-oragin** +### **transform-origin** 變形的軸心，預設為物件的中心點， 在這個範例中，設定為100%(right)可以使其從時鐘面的中心點開始旋轉。 diff --git a/14_JavaScript-References-VS-Copying/readme.md b/14_JavaScript-References-VS-Copying/readme.md index d42ff6c..7d614c7 100644 --- a/14_JavaScript-References-VS-Copying/readme.md +++ b/14_JavaScript-References-VS-Copying/readme.md @@ -5,6 +5,7 @@ 介紹JavaScript中陣列與物件的引用(refrence)及複製(Copying)。 [[BLOG]](https://guahsu.io/2017/08/JavaScript30-14-JavaScript-References-VS-Copying/) +[[DEMO]](http://guahsu.io/JavaScript30/14_JavaScript-References-VS-Copying/index-GuaHsu.html) ## **步驟** ### Step1. 原始型別 diff --git a/16_Mouse-Move-Shadow/readme.md b/16_Mouse-Move-Shadow/readme.md index 198cb98..766779c 100644 --- a/16_Mouse-Move-Shadow/readme.md +++ b/16_Mouse-Move-Shadow/readme.md @@ -5,6 +5,7 @@ 透過textShadow讓文字的陰影隨滑鼠位置偏移， 並稍微帶到ES6的解構賦值的用法。 [[BLOG]](https://guahsu.io/2017/10/JavaScript30-16-Mouse-Move-Shadow/) +[[DEMO]](http://guahsu.io/JavaScript30/16_Mouse-Move-Shadow/index-GuaHsu.html) ## **步驟** ### Step1. 設定目標區域與基本偏移量 diff --git a/17_Sort-Without-Articles/readme.md b/17_Sort-Without-Articles/readme.md index 026bbd0..a8b7f54 100644 --- a/17_Sort-Without-Articles/readme.md +++ b/17_Sort-Without-Articles/readme.md @@ -4,7 +4,8 @@ ## **主題** 介紹如何將陣列在排除部分文字的情況下排序。 -[[BLOG]](https://guahsu.io/2017/10/JavaScript30-17-Sort-Without-Articles/) +[[BLOG]](https://guahsu.io/2017/10/JavaScript30-17-Sort-Without-Articles/) +[[DEMO]](http://guahsu.io/JavaScript30/17_Sort-Without-Articles/index-GuaHsu.html) ## **步驟** ### Step1. 建立篩選的function diff --git a/18_Adding-Up-Times-with-Reduce/readme.md b/18_Adding-Up-Times-with-Reduce/readme.md index 7c3d78d..18c7b0d 100644 --- a/18_Adding-Up-Times-with-Reduce/readme.md +++ b/18_Adding-Up-Times-with-Reduce/readme.md @@ -4,7 +4,8 @@ ## **主題** 利用`map()`與`reduce()`來取得播放清單的總秒數。 -[[BLOG]](https://guahsu.io/2017/10/JavaScript30-18-Adding-Up-Times-with-Reduce/) +[[BLOG]](https://guahsu.io/2017/10/JavaScript30-18-Adding-Up-Times-with-Reduce/) +[[DEMO]](http://guahsu.io/JavaScript30/18_Adding-Up-Times-with-Reduce/index-GuaHsu.html) ## **步驟** ### Step1. 取得全部的時間值 diff --git a/19_Webcam-Fun/readme.md b/19_Webcam-Fun/readme.md index a418ca4..e4bdcba 100644 --- a/19_Webcam-Fun/readme.md +++ b/19_Webcam-Fun/readme.md @@ -3,7 +3,8 @@ ## **主題** 利用`navigator.mediaDevices.getUserMedia`來取得視訊鏡頭影像，並透過`cavas`來達到拍照與濾鏡的效果。 -[[BLOG]](https://guahsu.io/2017/10/JavaScript30-19-Webcam-Fun) +[[BLOG]](https://guahsu.io/2017/10/JavaScript30-19-Webcam-Fun) +[DEMO] -> 安全性問題無法檢視，請在本機執行 ## **步驟** ### Step1. 啟動Local Server diff --git a/20_Speech-Detection/readme.md b/20_Speech-Detection/readme.md index 73c4a2b..5064171 100644 --- a/20_Speech-Detection/readme.md +++ b/20_Speech-Detection/readme.md @@ -4,7 +4,8 @@ 利用`SpeechRecognition`來做語音識別， 並透過`interimResults`來輸出識別的結果。 -[[BLOG]](https://guahsu.io/2017/10/JavaScript30-20-Speech-Detection) +[[BLOG]](https://guahsu.io/2017/10/JavaScript30-20-Speech-Detection) +[[DEMO]](http://guahsu.io/JavaScript30/20_Speech-Detection/index-GuaHsu.html) ## **步驟** ### Step1. 啟動Local Server diff --git a/21_Geolocation/readme.md b/21_Geolocation/readme.md index 37a9350..16c66c0 100644 --- a/21_Geolocation/readme.md +++ b/21_Geolocation/readme.md @@ -3,7 +3,8 @@ ## **主題** 利用`navigator.geolocation`來取得裝置的地理位置與速率。 -[[BLOG]](https://guahsu.io/2017/10/JavaScript30-21-Geolocation) +[[BLOG]](https://guahsu.io/2017/10/JavaScript30-21-Geolocation) +[[DEMO]](http://guahsu.io/JavaScript30/21_Geolocation/index-GuaHsu.html) ## **步驟** ### Step1. 啟動Local Server diff --git a/22_Follow-Along-Link-Highlighter/readme.md b/22_Follow-Along-Link-Highlighter/readme.md index e70cd3e..07fdbc0 100644 --- a/22_Follow-Along-Link-Highlighter/readme.md +++ b/22_Follow-Along-Link-Highlighter/readme.md @@ -5,7 +5,8 @@ ## **主題** 透過`getBoundingClientRect`與CSS的`transform`來達到HightLight樣式會跟著指定位置移動的效果。 -[[BLOG]](https://guahsu.io/2017/10/JavaScript30-22-Follow-Along-Link-Highlighter) +[[BLOG]](https://guahsu.io/2017/10/JavaScript30-22-Follow-Along-Link-Highlighter) +[[DEMO]](http://guahsu.io/JavaScript30/22_Follow-Along-Link-Highlighter/index-GuaHsu.html) ## **步驟** ### Step1. 取得頁面元素 diff --git a/23_Speech-Synthesis/readme.md b/23_Speech-Synthesis/readme.md index 1bad824..bdbc8eb 100644 --- a/23_Speech-Synthesis/readme.md +++ b/23_Speech-Synthesis/readme.md @@ -5,7 +5,8 @@ ## **主題** 使用`SpeechSynthesisUtterance`及`speechSynthesis`來使文字轉語音。 -[[BLOG]](https://guahsu.io/2017/10/JavaScript30-23-Speech-Synthesis) +[[BLOG]](https://guahsu.io/2017/10/JavaScript30-23-Speech-Synthesis) +[[DEMO]](http://guahsu.io/JavaScript30/23_Speech-Synthesis/index-GuaHsu.html) 上次有做過語音轉文字的練習[[20 - Speech Detection]](https://guahsu.io/2017/10/JavaScript30-20-Speech-Detection/)， 這次則是要使用文字轉語音，透過介面中的輸入欄位來轉語音播放， diff --git a/index.html b/index.html index d3109fc..4899c80 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@

JavaScript 30

- + \ No newline at end of file diff --git a/script.js b/script.js index 6066945..2edcc44 100644 --- a/script.js +++ b/script.js @@ -1,11 +1,282 @@ -var datas = [{"no":1,"title":'JavaScript Drum Kit',"desc":'製作一個可透過按鍵發聲的爵士鼓',"blog":'https://guahsu.io/2017/05/JavaScript30-01-Java-Script-Drum-Kit/',"github":'https://github.com/guahsu/JavaScript30/tree/master/01_Java-Script-Drum-Kit/',"gifYn":'Y'},{"no":2,"title":'JS and CSS Clock',"desc":'製作一個實時的小時鐘',"blog":'https://guahsu.io/2017/05/JavaScript30-02-JS-and-CSS-Clock/',"github":'https://github.com/guahsu/JavaScript30/tree/master/02_JS-and-CSS-Clock/',"gifYn":'Y'},{"no":3,"title":'CSS Variables',"desc":'製作一個可控制圖片邊框、模糊與黑白的濾鏡效果',"blog":'https://guahsu.io/2017/05/JavaScript30-03-CSS-Variables/',"github":'https://github.com/guahsu/JavaScript30/tree/master/03_CSS-Variables/',"gifYn":'Y'},{"no":4,"title":'Array Cardio Day 1',"desc":'filter, map, sort, reduce, includes, split的應用案例',"blog":'https://guahsu.io/2017/05/JavaScript30-04-Array-Cardio-Day-1/',"github":'https://github.com/guahsu/JavaScript30/tree/master/04_Array-Cardio-Day-1/',"gifYn":'N'},{"no":5,"title":'Flex Panel Gallery',"desc":'製作一個動畫展開圖片的效果',"blog":'https://guahsu.io/2017/05/JavaScript30-05-Flex-Panel-Gallery/',"github":'https://github.com/guahsu/JavaScript30/tree/master/05_Flex-Panel-Gallery/',"gifYn":'Y'},{"no":6,"title":'Type Ahead',"desc":'製作一個即時顯示結果的搜尋框',"blog":'https://guahsu.io/2017/05/JavaScript30-06-Type-Ahead/',"github":'https://github.com/guahsu/JavaScript30/tree/master/06_Type-Ahead/',"gifYn":'Y'},{"no":7,"title":'Array Cardio Day 2',"desc":'some, every, find, findIndex, slice, spared的應用案例',"blog":'https://guahsu.io/2017/05/JavaScript30-07-Array-Cardio-Day-2/',"github":'https://github.com/guahsu/JavaScript30/tree/master/07_Array-Cardio-Day-2/',"gifYn":'N'},{"no":8,"title":'Fun with HTML5 Canvas',"desc":'製作一個HTML5的Canvas畫布',"blog":'https://guahsu.io/2017/06/JavaScript30-08-Fun-with-HTML5-Canvas/',"github":'https://github.com/guahsu/JavaScript30/tree/master/08_Fun-with-HTML5-Canvas/',"gifYn":'Y'},{"no":9,"title":'Dev Tools Domination',"desc":'介紹Chrome開發工具中DOM break及各種console的格式',"blog":'https://guahsu.io/2017/06/JavaScript30-09-Dev-Tools-Domination/',"github":'https://github.com/guahsu/JavaScript30/tree/master/09_Dev-Tools-Domination/',"gifYn":'N'},{"no":10,"title":'Hold Shift and Check Checkboxes',"desc":'製作Shift+左鍵在check list中連續選取的效果',"blog":'https://guahsu.io/2017/07/JavaScript30-10-Hold-Shift-and-Check-Checkboxes/',"github":'https://github.com/guahsu/JavaScript30/tree/master/10_Hold-Shift-and-Check-Checkboxes/',"gifYn":'Y'},{"no":11,"title":'Custom Video Player',"desc":'使用HTML5的video tag來製作各種播放器功能',"blog":'https://guahsu.io/2017/07/JavaScript30-11-Custom-Video-Player/',"github":'https://github.com/guahsu/JavaScript30/tree/master/11_Custom-Video-Player/',"gifYn":'Y'},{"no":12,"title":'Key Sequence Detection',"desc":'製作一個判斷連續輸入指定內容的功能',"blog":'https://guahsu.io/2017/07/JavaScript30-12-Key-Sequence-Detection/',"github":'https://github.com/guahsu/JavaScript30/tree/master/12_Key-Sequence-Detection/',"gifYn":'Y'},{"no":13,"title":'Slide in on Scroll',"desc":'製作一個當畫面滑至指定位置時載入圖片的效果',"blog":'https://guahsu.io/2017/08/JavaScript30-13-Slide-in-on-Scroll/',"github":'https://github.com/guahsu/JavaScript30/tree/master/13_Slide-in-on-Scroll/',"gifYn":'Y'},{"no":14,"title":'JavaScript References VS Copying',"desc":'介紹陣列與物件的引用及複製',"blog":'https://guahsu.io/2017/08/JavaScript30-14-JavaScript-References-VS-Copying/',"github":'https://github.com/guahsu/JavaScript30/tree/master/14_JavaScript-References-VS-Copying/',"gifYn":'N'},{"no":15,"title":'LocalStorage',"desc":'製作一個使用localStorage做的菜單增刪功能',"blog":'https://guahsu.io/2017/09/JavaScript30-15-LocalStorage/',"github":'https://github.com/guahsu/JavaScript30/tree/master/15_LocalStorage/',"gifYn":'Y'},{"no":16,"title":'Mouse Move Shadow',"desc":'製作一個用滑鼠使文字陰影偏移的效果',"blog":'https://guahsu.io/2017/10/JavaScript30-16-Mouse-Move-Shadow/',"github":'https://github.com/guahsu/JavaScript30/tree/master/16_Mouse-Move-Shadow/',"gifYn":'Y'},{"no":17,"title":'Sort Without Articles',"desc":'介紹如何將陣列在排除部分文字的情況下排序',"blog":'https://guahsu.io/2017/10/JavaScript30-17-Sort-Without-Articles/',"github":'https://github.com/guahsu/JavaScript30/tree/master/17_Sort-Without-Articles/',"gifYn":'N'},{"no":18,"title":'Adding Up Times with Reduce',"desc":'使用Array的map()與reduce()來取得播放清單總秒數',"blog":'https://guahsu.io/2017/10/JavaScript30-18-Adding-Up-Times-with-Reduce/',"github":'https://github.com/guahsu/JavaScript30/tree/master/18_Adding-Up-Times-with-Reduce/',"gifYn":'N'},{"no":19,"title":'Webcam Fun',"desc":'使用getUserMedia與cavas來做影像濾鏡效果',"blog":'https://guahsu.io/2017/10/JavaScript30-19-Webcam-Fun/',"github":'https://github.com/guahsu/JavaScript30/tree/master/19_Webcam-Fun/',"gifYn":'Y'},{"no":20,"title":'Speech Detection',"desc":'製做一個語音輸入轉文字的工具',"blog":'https://guahsu.io/2017/10/JavaScript30-20-Speech-Detection/',"github":'https://github.com/guahsu/JavaScript30/tree/master/20_Speech-Detection/',"gifYn":'Y'},{"no":21,"title":'Geolocation',"desc":'製做一個可以顯示當前方位與速率的工具',"blog":'https://guahsu.io/2017/10/JavaScript30-21-Geolocation/',"github":'https://github.com/guahsu/JavaScript30/tree/master/21_Geolocation/',"gifYn":'Y'},{"no":22,"title":'Follow Along Link Highlighter',"desc":'製作會跟著滑鼠移動的HightLight效果',"blog":'https://guahsu.io/2017/10/JavaScript30-22-Follow-Along-Link-Highlighter/',"github":'https://github.com/guahsu/JavaScript30/tree/master/22_Follow-Along-Link-Highlighter/',"gifYn":'Y'},{"no":23,"title":'Speech Synthesis',"desc":'製做一個文字轉語音輸出的工具',"blog":'https://guahsu.io/2017/10/JavaScript30-23-Speech-Synthesis/',"github":'https://github.com/guahsu/JavaScript30/tree/master/23_Speech-Synthesis/',"gifYn":'Y'},{"no":24,"title":'Sticky Nav',"desc":'製作一個依捲動位置顯示不同樣式的置頂選單',"blog":'https://guahsu.io/2017/10/JavaScript30-24-Sticky-Nav/',"github":'https://github.com/guahsu/JavaScript30/tree/master/24_Sticky-Nav/',"gifYn":'Y'},{"no":25,"title":'Event Capture, Propagation, Bubbling and Once',"desc":'解析addEventListener中捕捉、傳遞、與單次執行方法',"blog":'https://guahsu.io/2017/10/JavaScript30-25-Event-Capture-Propagation-Bubbling-and-Once/',"github":'https://github.com/guahsu/JavaScript30/tree/master/25_Event-Capture-Propagation-Bubbling-and-Once/',"gifYn":'N'},{"no":26,"title":'Stripe Follow Along Nav',"desc":'製作一個隨著滑鼠移動展開的選單效果',"blog":'https://guahsu.io/2017/10/JavaScript30-26-Stripe-Follow-Along-Nav/',"github":'https://github.com/guahsu/JavaScript30/tree/master/26_Stripe-Follow-Along-Nav/',"gifYn":'Y'},{"no":27,"title":'Click and Drag',"desc":'製做一個可拖曳移動的水平捲軸',"blog":'https://guahsu.io/2017/10/JavaScript30-27-Click-and-Drag/',"github":'https://github.com/guahsu/JavaScript30/tree/master/27_Click-and-Drag/',"gifYn":'Y'},{"no":28,"title":'Video Speed Controller',"desc":'製作一個可控制影片速率的拉把',"blog":'https://guahsu.io/2017/10/JavaScript30-28-Video-Speed-Controller/',"github":'https://github.com/guahsu/JavaScript30/tree/master/28_Video-Speed-Controller/',"gifYn":'Y'},{"no":29,"title":'Countdown Timer',"desc":'製作一個可自定義時間的倒數計時器',"blog":'https://guahsu.io/2017/11/JavaScript30-29-Countdown-Timer/',"github":'https://github.com/guahsu/JavaScript30/tree/master/29_Countdown_Timer/',"gifYn":'Y'},{"no":30,"title":'Whack A Mole',"desc":'製做一個打地鼠的小遊戲',"blog":'https://guahsu.io/2017/11/JavaScript30-30-Whack-A-Mole/',"github":'https://github.com/guahsu/JavaScript30/tree/master/30_Whack-A-Mole/',"gifYn":'Y'}]; +var datas = [ + { + no: 1, + title: 'JavaScript Drum Kit', + desc: '製作一個可透過按鍵發聲的爵士鼓', + blog: 'https://guahsu.io/2017/05/JavaScript30-01-Java-Script-Drum-Kit/', + demo: 'https://guahsu.io/JavaScript30/01_Java-Script-Drum-Kit/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/01_Java-Script-Drum-Kit/', + gifYn: 'Y', + }, + { + no: 2, + title: 'JS and CSS Clock', + desc: '製作一個實時的小時鐘', + blog: 'https://guahsu.io/2017/05/JavaScript30-02-JS-and-CSS-Clock/', + demo: 'https://guahsu.io/JavaScript30/02_JS-and-CSS-Clock/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/02_JS-and-CSS-Clock/', + gifYn: 'Y', + }, + { + no: 3, + title: 'CSS Variables', + desc: '製作一個可控制圖片邊框、模糊與黑白的濾鏡效果', + blog: 'https://guahsu.io/2017/05/JavaScript30-03-CSS-Variables/', + demo: 'https://github.com/guahsu/JavaScript30/tree/master/03_CSS-Variables', + github: 'https://github.com/guahsu/JavaScript30/tree/master/03_CSS-Variables/', + gifYn: 'Y', + }, + { + no: 4, + title: 'Array Cardio Day 1', + desc: 'filter, map, sort, reduce, includes, split的應用案例', + blog: 'https://guahsu.io/2017/05/JavaScript30-04-Array-Cardio-Day-1/', + demo: 'https://guahsu.io/JavaScript30/04_Array-Cardio-Day-1/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/04_Array-Cardio-Day-1/', + gifYn: 'N', + }, + { + no: 5, + title: 'Flex Panel Gallery', + desc: '製作一個動畫展開圖片的效果', + blog: 'https://guahsu.io/2017/05/JavaScript30-05-Flex-Panel-Gallery/', + demo: 'https://guahsu.io/JavaScript30//05_Flex-Panel-Gallery/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/05_Flex-Panel-Gallery/', + gifYn: 'Y', + }, + { + no: 6, + title: 'Type Ahead', + desc: '製作一個即時顯示結果的搜尋框', + blog: 'https://guahsu.io/2017/05/JavaScript30-06-Type-Ahead/', + demo: 'https://guahsu.io/JavaScript30/06_Type-Ahead/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/06_Type-Ahead/', + gifYn: 'Y', + }, + { + no: 7, + title: 'Array Cardio Day 2', + desc: 'some, every, find, findIndex, slice, spared的應用案例', + blog: 'https://guahsu.io/2017/05/JavaScript30-07-Array-Cardio-Day-2/', + demo: 'https://guahsu.io/JavaScript30/07_Array-Cardio-Day-2/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/07_Array-Cardio-Day-2/', + gifYn: 'N', + }, + { + no: 8, + title: 'Fun with HTML5 Canvas', + desc: '製作一個HTML5的Canvas畫布', + blog: 'https://guahsu.io/2017/06/JavaScript30-08-Fun-with-HTML5-Canvas/', + demo: 'http://guahsu.io/JavaScript30/08_Fun-with-HTML5-Canvas/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/08_Fun-with-HTML5-Canvas/', + gifYn: 'Y', + }, + { + no: 9, + title: 'Dev Tools Domination', + desc: '介紹Chrome開發工具中DOM break及各種console的格式', + blog: 'https://guahsu.io/2017/06/JavaScript30-09-Dev-Tools-Domination/', + demo: 'https://guahsu.io/JavaScript30/09_Dev-Tools-Domination/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/09_Dev-Tools-Domination/', + gifYn: 'N', + }, + { + no: 10, + title: 'Hold Shift and Check Checkboxes', + desc: '製作Shift+左鍵在check list中連續選取的效果', + blog: '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', + github: 'https://github.com/guahsu/JavaScript30/tree/master/10_Hold-Shift-and-Check-Checkboxes/', + gifYn: 'Y', + }, + { + no: 11, + title: 'Custom Video Player', + desc: '使用HTML5的video tag來製作各種播放器功能', + blog: 'https://guahsu.io/2017/07/JavaScript30-11-Custom-Video-Player/', + demo: 'https://guahsu.io/JavaScript30/11_Custom-Video-Player/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/11_Custom-Video-Player/', + gifYn: 'Y', + }, + { + no: 12, + title: 'Key Sequence Detection', + desc: '製作一個判斷連續輸入指定內容的功能', + blog: 'https://guahsu.io/2017/07/JavaScript30-12-Key-Sequence-Detection/', + demo: 'https://guahsu.io/JavaScript30/12_Key-Sequence-Detection/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/12_Key-Sequence-Detection/', + gifYn: 'Y', + }, + { + no: 13, + title: 'Slide in on Scroll', + desc: '製作一個當畫面滑至指定位置時載入圖片的效果', + blog: 'https://guahsu.io/2017/08/JavaScript30-13-Slide-in-on-Scroll/', + demo: 'https://guahsu.io/JavaScript30/13_Slide-in-on-Scroll/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/13_Slide-in-on-Scroll/', + gifYn: 'Y', + }, + { + no: 14, + title: 'JavaScript References VS Copying', + desc: '介紹陣列與物件的引用及複製', + blog: 'https://guahsu.io/2017/08/JavaScript30-14-JavaScript-References-VS-Copying/', + demo: 'http://guahsu.io/JavaScript30/14_JavaScript-References-VS-Copying/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/14_JavaScript-References-VS-Copying/', + gifYn: 'N', + }, + { + no: 15, + title: 'LocalStorage', + desc: '製作一個使用localStorage做的菜單增刪功能', + blog: 'https://guahsu.io/2017/09/JavaScript30-15-LocalStorage/', + demo: 'https://guahsu.io/JavaScript30/15_LocalStorage/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/15_LocalStorage/', + gifYn: 'Y', + }, + { + no: 16, + title: 'Mouse Move Shadow', + desc: '製作一個用滑鼠使文字陰影偏移的效果', + blog: 'https://guahsu.io/2017/10/JavaScript30-16-Mouse-Move-Shadow/', + demo: 'http://guahsu.io/JavaScript30/16_Mouse-Move-Shadow/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/16_Mouse-Move-Shadow/', + gifYn: 'Y', + }, + { + no: 17, + title: 'Sort Without Articles', + desc: '介紹如何將陣列在排除部分文字的情況下排序', + blog: 'https://guahsu.io/2017/10/JavaScript30-17-Sort-Without-Articles/', + demo: 'http://guahsu.io/JavaScript30/17_Sort-Without-Articles/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/17_Sort-Without-Articles/', + gifYn: 'N', + }, + { + no: 18, + title: 'Adding Up Times with Reduce', + desc: '使用Array的map()與reduce()來取得播放清單總秒數', + blog: 'https://guahsu.io/2017/10/JavaScript30-18-Adding-Up-Times-with-Reduce/', + demo: 'http://guahsu.io/JavaScript30/18_Adding-Up-Times-with-Reduce/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/18_Adding-Up-Times-with-Reduce/', + gifYn: 'N', + }, + { + no: 19, + title: 'Webcam Fun', + desc: '使用getUserMedia與cavas來做影像濾鏡效果', + blog: 'https://guahsu.io/2017/10/JavaScript30-19-Webcam-Fun/', + demo: 'http://guahsu.io/JavaScript30/19_Webcam-Fun/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/19_Webcam-Fun/', + gifYn: 'Y', + }, + { + no: 20, + title: 'Speech Detection', + desc: '製做一個語音輸入轉文字的工具', + blog: 'https://guahsu.io/2017/10/JavaScript30-20-Speech-Detection/', + demo: 'http://guahsu.io/JavaScript30/20_Speech-Detection/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/20_Speech-Detection/', + gifYn: 'Y', + }, + { + no: 21, + title: 'Geolocation', + desc: '製做一個可以顯示當前方位與速率的工具', + blog: 'https://guahsu.io/2017/10/JavaScript30-21-Geolocation/', + demo: 'http://guahsu.io/JavaScript30/21_Geolocation/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/21_Geolocation/', + gifYn: 'Y', + }, + { + no: 22, + title: 'Follow Along Link Highlighter', + desc: '製作會跟著滑鼠移動的HightLight效果', + blog: 'https://guahsu.io/2017/10/JavaScript30-22-Follow-Along-Link-Highlighter/', + demo: 'http://guahsu.io/JavaScript30/22_Follow-Along-Link-Highlighter/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/22_Follow-Along-Link-Highlighter/', + gifYn: 'Y', + }, + { + no: 23, + title: 'Speech Synthesis', + desc: '製做一個文字轉語音輸出的工具', + blog: 'https://guahsu.io/2017/10/JavaScript30-23-Speech-Synthesis/', + demo: 'http://guahsu.io/JavaScript30/23_Speech-Synthesis/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/23_Speech-Synthesis/', + gifYn: 'Y', + }, + { + no: 24, + title: 'Sticky Nav', + desc: '製作一個依捲動位置顯示不同樣式的置頂選單', + blog: 'https://guahsu.io/2017/10/JavaScript30-24-Sticky-Nav/', + demo: 'https://guahsu.io/JavaScript30/24_Sticky-Nav/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/24_Sticky-Nav/', + gifYn: 'Y', + }, + { + no: 25, + title: 'Event Capture, Propagation, Bubbling and Once', + desc: '解析addEventListener中捕捉、傳遞、與單次執行方法', + blog: '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', + github: 'https://github.com/guahsu/JavaScript30/tree/master/25_Event-Capture-Propagation-Bubbling-and-Once/', + gifYn: 'N', + }, + { + no: 26, + title: 'Stripe Follow Along Nav', + desc: '製作一個隨著滑鼠移動展開的選單效果', + blog: 'https://guahsu.io/2017/10/JavaScript30-26-Stripe-Follow-Along-Nav/', + demo: 'https://guahsu.io/JavaScript30/26_Stripe-Follow-Along-Nav/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/26_Stripe-Follow-Along-Nav/', + gifYn: 'Y', + }, + { + no: 27, + title: 'Click and Drag', + desc: '製做一個可拖曳移動的水平捲軸', + blog: 'https://guahsu.io/2017/10/JavaScript30-27-Click-and-Drag/', + demo: 'https://guahsu.io/JavaScript30/27_Click-and-Drag/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/27_Click-and-Drag/', + gifYn: 'Y', + }, + { + no: 28, + title: 'Video Speed Controller', + desc: '製作一個可控制影片速率的拉把', + blog: 'https://guahsu.io/2017/10/JavaScript30-28-Video-Speed-Controller/', + demo: 'https://guahsu.io/JavaScript30/28_Video-Speed-Controller/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/28_Video-Speed-Controller/', + gifYn: 'Y', + }, + { + no: 29, + title: 'Countdown Timer', + desc: '製作一個可自定義時間的倒數計時器', + blog: 'https://guahsu.io/2017/11/JavaScript30-29-Countdown-Timer/', + demo: 'https://guahsu.io/JavaScript30/29_Countdown_Timer/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/29_Countdown_Timer/', + gifYn: 'Y', + }, + { + no: 30, + title: 'Whack A Mole', + desc: '製做一個打地鼠的小遊戲', + blog: 'https://guahsu.io/2017/11/JavaScript30-30-Whack-A-Mole/', + demo: 'https://guahsu.io/JavaScript30/30_Whack-A-Mole/index-GuaHsu.html', + github: 'https://github.com/guahsu/JavaScript30/tree/master/30_Whack-A-Mole/', + gifYn: 'Y', + }, +]; /** 畫面建立 */ function createView() { - var couseList = document.querySelector('.courseList'); - var view = ''; - datas.forEach((data)=> { - view += `
  • + var couseList = document.querySelector('.courseList'); + var view = ''; + datas.forEach(data => { + view += `
  • #${data.no}
    @@ -14,53 +285,59 @@ function createView() {

    #${data.no} - ${data.title}

    ${data.desc}
    - Blog - Source Code + DEMO + GitHub
    -
    • ` - }) - document.querySelector('.courseList').innerHTML = view; - // 加上滑鼠移入移出的效果監聽 - var courses = Array.from(document.querySelectorAll('.course')); - courses.forEach((course) => { - course.addEventListener('mouseenter', changeImgaeType); - course.addEventListener('mouseleave', changeImgaeType); - }) + `; + }); + document.querySelector('.courseList').innerHTML = view; + // 加上滑鼠移入移出的效果監聽 + var courses = Array.from(document.querySelectorAll('.course')); + courses.forEach(course => { + course.addEventListener('mouseenter', changeImgaeType); + course.addEventListener('mouseleave', changeImgaeType); + }); } /** 圖片讀取檢查 */ function checkLoad(image) { - var loadEl = image.parentElement.querySelector('.course__loading'); - setTimeout(function() { - if(image.complete) { - loadEl.style.display = 'none'; - }else{ - loadEl.style.display = 'block'; - checkLoad(image) - } - }, 100) + var loadEl = image.parentElement.querySelector('.course__loading'); + setTimeout(function() { + if (image.complete) { + loadEl.style.display = 'none'; + } else { + loadEl.style.display = 'block'; + checkLoad(image); + } + }, 100); } /** 變更圖片類別(滑鼠移入載GIF) */ function changeImgaeType() { - if(this.classList.contains('hasGif')){ - var courseImg = this.querySelector('img'); - var isPlay = courseImg.classList.contains('gif-play'); - isPlay ? courseImg.classList.remove('gif-play') : courseImg.classList.add('gif-play'); - var type = isPlay ? ['gif', 'png'] : ['png', 'gif']; - var image = courseImg.getAttribute('src').replace(type[0], type[1]); - courseImg.setAttribute('src', image); - checkLoad(courseImg); - } + if (this.classList.contains('hasGif')) { + var courseImg = this.querySelector('img'); + var isPlay = courseImg.classList.contains('gif-play'); + isPlay ? courseImg.classList.remove('gif-play') : courseImg.classList.add('gif-play'); + var type = isPlay ? ['gif', 'png'] : ['png', 'gif']; + var image = courseImg.getAttribute('src').replace(type[0], type[1]); + courseImg.setAttribute('src', image); + checkLoad(courseImg); + } } /** 啟動-用arrow function判斷是否有支援ES6 */ (function() { - try { - new Function("(a = 0) => a"); - createView(); - } - catch (err) { - document.querySelector('.courseList').innerHTML = '

    這裡空空一片是因為你的瀏覽器不支援ES6的語法
    請升級你的瀏覽器或使用最新的Chrome吧!

    '; - } -})(); \ No newline at end of file + try { + new Function('(a = 0) => a'); + createView(); + } catch (err) { + document.querySelector('.courseList').innerHTML = + '

    這裡空空一片是因為你的瀏覽器不支援ES6的語法
    請升級你的瀏覽器或使用最新的Chrome吧!

    '; + } +})();