荒廢了好多天，想要重振旗鼓，看到WesBos最近發佈了一堂免費的js課:
javascript30.com ，來挑戰看看吧！

時間安排如下:

• 1~10(5days) 每天2篇，跟著做，結束複習
• (1days)鐵人前端心得(vue,css心法等等)
• 11~20(5days) 每天2篇，邊聽邊想，停在一個段落試著自己做做看
• (1days)鐵人前端心得(vue,css心法等等)
• 21~30(10days) 每天1篇，先想看看自己怎麼做，做完再看答案
• (1days)鐵人前端心得(vue,css心法等等)
• 其他：轉換framework + 補之前的債

1. Javascript Drum Kit

   • 學習重點：querySelector, key event, addEventListener('transitionend')動畫同理, audio play()等等
   • codepen 嘗試，還不太習慣，而且每月有限制，還是先在自己local端跑就好，在分享心得

2. CSS + JS clock

   • 學習重點：
     • css:transition-origin(之後的債),transition-timing-function, cubic-bezier curve
     • js:new Date(), getSeconds/Minutes/Hours, setInterval()

const secondHand = document.querySelector('.second-hand');
const minHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  const mins = now.getMinutes();
  const hours = now.getHours();

  const secondsDegrees = ((seconds/ 60) * 360)+ 90;
  const minutesDegrees = ((mins/ 60) * 360)+ 90;
  const hoursDegrees = ((hours/ 24) * 360)+ 90;

  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
  minHand.style.transform = `rotate(${minutesDegrees}deg)`;
  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;

}

setInterval(setDate, 1000);

真的要動手做喔

ps 逛一逛發現原來也有另外一個鐵有再分享這個課程，好巧。
大家都加油了，雖然我挑戰失敗了哈哈哈，但我會努力把30天完成