第一天的課程為 JavaScript Drum Kit

對於業界的各位，已經非常熟悉寫code這件事情，要完成一個什麼樣的功能，要怎麼寫下去或許已經是一種反射動作，但相對於我這種程式新手來說，在寫code之前還是先必須好好的想想整體的架構如何，會比較好寫下去，因此我們先來釐清一下這第一關的要我們做什麼事情：

利用鍵盤上輸入對應的按鍵，播放出相的音效，並且在畫面上有CSS的效果。

因此可以分為下列兩項事情，一為選取畫面上的DOM並產生效果，二當然就是播放音效了。

因此一開始我們必須監聽鍵盤上的事件，並且做上這兩件事情。

          window.addEventListener('keydown', playSound); 
          //事件選擇keydown 或者 keyup 字面上的意思即是在鍵盤按下或者鍵盤放開時觸發
          function playHandler(){
          // paly music
          const audio = document.querySelector(
            `audio[data-key="${e.keyCode}"]`
          );
            audio.currentTime = 0;
            //currentTime設為0時，才能夠連續播放
            audio.play();
            
          // DOM style
          const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
          if (dom) dom.classList.add('playing');
          //選取到加上class樣式
        }

上述程式碼需要注意幾個重點

• currentTime設為0時，才能夠連續播放
• HTML裡頭有埋著 data-* 的自訂屬性，我們可以使用CSS裡的屬性選擇器加上ES6的樣板字面值來選取

在完成上述後我們發現幾個問題，第一個問題是再按了鍵盤上的對應鍵後，CSS樣式並沒有消失，第二個問題是當我們按了不是鍵盤上的對應鍵時，console馬上報錯！
因此我們可以將程式碼改為下列：

    function playHandler(){
      // paly music
        const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
          if (audio) {
            audio.currentTime = 0;
            audio.play();
          }
    }
           
    // DOM style
        const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
            if (dom) dom.classList.add('playing');
        }
    document.querySelectorAll('.key').forEach((key) => {
        key.addEventListener('transitionend', transitionendHandler);
    });
     function transitionendHandler(e) {
         if (e.propertyName === 'transform') {
             e.currentTarget.classList.remove('playing');
         }
     }

在這裡有幾件事情說明，利用陣列forEach方法去為每一個選取到的DOM在動畫結束時移除CSS樣式，在transitionendHandler這個function裡面，console.log e.propertyName會發現它做了幾件事情，而我們針對transform去操作。

這樣基本上就大功告成了！

心得：
看起來沒幾行code，但對於我這種新手來說，就像我前面提到的，整個流程從一開始到完成的脈絡，才是需要熟悉的思考模式，而我是從Youtube上Alex宅幹嘛，Alex大大的影片來學習的，我覺得Alex大大的影片教導得非常清楚，非常有幫助，這裡是我看完影片後以我的方式將此以文字的方式去呈現，因此如果有人不幸看見我的鐵人賽文章，我還是一率推薦去看Alex宅幹嘛相信絕對比看這篇文章來的幫助還有多很多。

參考資料：
Alex宅幹嘛
MDN Using data attributes