🏅 Day 4 - 陣列操作 1、Bootstrap font-size

教學

這題需要額外理解的知識點為「callback 函式」，可以簡單的理解為:「把函式作為參數調用」。
舉例：

function greeting(arr) {
  alert('Hello ' + arr.name);
}
// callback 函式
function processUserInput(callback, arr) {
  callback(arr);
}

let arr = {name: "Jordan"};
// 在 callback 函式中調用 greeting 函式，並把 arr 也一併代入
processUserInput(greeting, arr);

題目（使用 CodePen 作答）

以下 crowdAge 為部分民眾的年紀資料，請修改程式碼、篩選出屬性 age > 18 的陣列元素，並將它們一一加入 filterResult 這個陣列中。（可以使用 push() 或是 filter() 函式）

let crowdAge = [
  {
    name: 'Rick',
    age: 17
  },
  {
    name: 'Jane',
    age: 25
  },
  {
    name: 'Jordan',
    age: 19
  },
  {
    name: 'Jack',
    age: 7
  },
  {
    name: 'Reol',
    age: 27
  }
];

// callback 函式
function ageFilterCB(cb, arr) {
  return cb(arr);
}

function ageFilter(arr) {
  /* 只能在此插入程式碼 */
}

let filterResult = [];
filterResult = ageFilterCB(ageFilter, crowdAge);
console.log(filterResult); /* 為陣列，內容包含屬性 age > 18 的 crowdAge 元素 */

Bootstrap font-size

在 Bootstap 中可以使用 .h1 ~ .h6 或是 .fs-* class 來直接調整字體大小設定，
兩者的差異主要在 .h1 ~ .h6 標題類別使用了 font-size、font-weight、line-height，而 .fs-* 只有 font-size 的設定

注意：

1. 兩者都會有預設響應式設定（會隨著視窗寬度改變文字大小）
2. Bootstrap h1 ~ h6 標籤也會有預設字體設定，設定文字樣式時不要直接使用標籤來設定字體大小，請使用 .h1 ~ .h6 來設定哦
   舉例來說：
   想要在次重要的標題使用 h4 的字體大小設定，
   正確寫法 -> <h2 class="h4"> Title </h2>
   （h1 ~ h6 標籤請以重要程度依序使用）
3. 實際運用時可以到 Bootstrap 變數中改變字體大小的預設設定（$h1-font-size、$font-sizes）

可以運用此 CodePen 觀察他們之間的差異，並嘗試自行運用看看

可以參考：.h1 ~ .h6 、 .fs-*

回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

回報區

Discord	CodePen ／ 答案
圈圈	Codepen
pinyi_9 🎄	Codepen
kuanju27	Codepen
Tippy	CodePen
貢波波夫	CodePen
銀光菇	CodePen
bf_tsai	CodePen
Yijing	CodePen
runweiting	CodePen
FangFang	CodePen
Antonio	CodePen
Leo	CodePen
ryan.chou	CodePen
yuling	Codepen
cest_jessie	Codepen
Chia Pin	Codepen
依依	CodePen
hedy_h	CodePen
celinelinnn	CodePen
Moreene	CodePen
dora	CodePen
熊大	CodePen
PoRay	CodePen
MDFK	CodePen
Sabrina	CodePen
Winnie	CodePen
Ataraxia	CodePen
Celine 510	CodePen
Emily	CodePen
Nelly	CodePen
Charlotte Lee	CodePen
cbs	Codepen
RayRay	Codepen
Helen	Codepen
Neil	CodePen
stone4584	CodePen
kawa	CodePen
Yang	CodePen
Eazy	CodePen
荷菓かのり	CodePen
Chris	CodePen
_amaaaa	CodePen
yu.t_liu	CodePen
KUN.	CodePen
ann6212	CodePen
SHUO	CodePen
MY	CodePen
wei_Rio	CodePen
Bin	CodePen
fanshu0303	Codepen
elena	CodePen
Enzo	CodePen
nini1202desu	CodePen
MikeLin	CodePen
Mattie	CodePen
JING	CodePen
XinYu	CodePen
Peng	CodePen
haru	CodePen
風羽	CodePen
精靈	CodePen
Oria	CodePen
Ariel	CodePen
Uli	CodePen
黃士桓	codePen
jenniferchuang	codePen
carrie	codePen
Eden	Codepen
小夏	Codepen
hsuhsusophie	CodePen
Martin	Codepen
jeremyChan	CodePen
yuli	CodePen
Rock	CodePen
PayRoom	CodePen
pingshian	CodePen
WEI	CodePen
翔.(Ben)	CodePen
Yuetin	CodePen
Tom	CodePen
Fabio20	CodePen
⭐️小正	CodePen
Yang	CodePen
aaron	CodePen
教練	CodePen
adam322	CodePen
macihuang	CodePen
保羅	CodePen
c8529	CodePen
PoWei#8484	CodePen
狸貓	CodePen
sponge	CodePen
Iris	CodePen
xuan	CodePen
.zack_p	CodePen
Vivian2857	CodePen
owen	CodePen
Nielsen	Codepen
Jason	Codepen
jia yu	CodePen
skypassion5000	CodePen
hua	CodePen
samgu666	CodePen
辣椒	Codepen
關關	Codepen
Ting	CodePen
郭芙蘭	CodePen
郭芙蘭	CodePen
WA	CodePen
yuan!	CodePen