script.js

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'}];

/** 畫面建立 */
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.blog}" target="_blank" onclick="ga('send', 'event', 'button', 'click', 'js30-blog-${data.no}', 1);">Blog</a>
                <a class="course__btn" href="${data.github}" target="_blank" onclick="ga('send', 'event', 'button', 'click', 'js30-github-${data.no}', 1);">Source Code</a>
              </div>
            </li>`
  })
  document.querySelector('.courseList').innerHTML = view;
  // 加上滑鼠移入移出的效果監聽
  var courses = Array.from(document.querySelectorAll('.course'));
  if(!courses) { alert('oh..no'); };
  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);
  }
}

/** 啟動 */
createView();