script.js

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 += `<li>
              <div class="course ${data.gifYn === 'Y' ? 'hasGif' : ''}">
                <div class="course__image">
                  <div class="course__ribbon"><div class="course__no">#${data.no}</div></div>
                  <div class="course__loading"></div>
                  <img src="${data.blog}demo${data.no}.png" alt="demo${data.no}">
                </div>
                <h2 class="course__title">#${data.no} - ${data.title}</h2>
                <div class="course__desc">${data.desc}</div>
                <a class="course__btn" href="${
									data.demo
								}" target="_blank" onclick="ga('send', 'event', 'button', 'click', 'js30-blog-${data.no}', 1);">DEMO</a>
                <a class="course__btn" href="${
									data.github
								}" target="_blank" onclick="ga('send', 'event', 'button', 'click', 'js30-github-${
			data.no
		}', 1);">GitHub</a>
              </div>
            </li>`;
	});
	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);
}

/** 變更圖片類別(滑鼠移入載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);
	}
}

/** 啟動-用arrow function判斷是否有支援ES6 */
(function() {
	try {
		new Function('(a = 0) => a');
		createView();
	} catch (err) {
		document.querySelector('.courseList').innerHTML =
			'<h2>這裡空空一片是因為你的瀏覽器不支援ES6的語法<br>請升級你的瀏覽器或使用最新的Chrome吧!</h2>';
	}
})();