此為課程 JavaScript30 所做的練習紀錄，以下為課程網站:
https://javascript30.com/

Day2-CSS + JS Clock

這次的練習是實作一個小時鐘

1. CSS 屬性

1. transform-origin: 設定物件變形的起始點
   共有三個參數，分別是控制 x 軸(左到右)，y 軸(上到下)，z 軸的起始位置

transform-origin(0, 0); /* 從物件的左上角開始 */

2. transform: 設定物件的變形種類
   常用包括translate(位移)、scale(縮放)、rotate(旋轉)、skew(傾斜)等，還有結合 scale、skew、translate 的 matrix(scale X, scale Y, skew X, skew Y, move X, move Y)

3. transition-timing-function: 設定物件不同變形期間的變形速度

transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

Day3-Scoped CSS Variables and JS

練習使用 CSS 的變數及用 JS 控制變數值的變化

1. 使用 CSS 變數

範例:

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background-color: var(--base);
  filter: blur(var(--blur));
}

2. 使用 JS 改變 CSS 變數值

document.documentElement.style.setProperty('--<varName>', '<varValue>')

Day4-Array Cardio 1

介紹了幾個陣列的操作練習題目
由於大部分的練習都做的出來，所以只針對沒解出來的一題做紀錄:

第 8 題:

原本以為 reduce 的第一個參數只能設定數字的累加值，沒想到裡面還能放空物件，這是自己以前沒注意到的細節

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];

// 設定第一個參數為空物件
const instancesNum = data.reduce((obj, item) => {
  // 若 obj 物件沒有 item 屬性(item 為 data 內的各元素)，就增加該屬性，並設定值為 0
  if(!obj[item]) {
    obj[item] = 0;
  }
  // 再次碰到該屬性的話，值+1
  obj[item]++;
  return obj;
}, {})
console.log(instancesNum);

印出的結果:

全部練習的程式碼都在此連結:
https://github.com/a90100/JavaScript30