# JS直播班#肉鬆BMI-kata經驗分享
https://hackmd.io/eqgyCOyfSsyYMhi12Uabmw?edit
#### ※windows10系統下作業※

## 1.用了哪些軟體錄製跟記錄倒數

### 1-1錄製軟體:ActivePresenter

### 安裝
安裝網址:https://atomisystems.com/download/
錄製前，請開啟VS Code Toggle Screencast Mode 模式

### 錄影
打開軟體，點選錄製視頻

選擇全屏點擊 REC()，個人將聲音調成靜音模式

系統介面右下角暫停、停止

錄製完成後介面

### 上傳
這裡跟老師的教學不同，軟體導出沒有上傳Youtube選項，所以手動導出影片、手動上傳Youtube

### 1-2記錄倒數軟體:focus booster

### 安裝
安裝網址:https://www.focusboosterapp.com/

介面

時間設定

### 1-3撰寫用軟體VS Code

#### 插件:Chinese (Traditional) Language Pack for Visual Studio Code
將VS Code變成中文化，這是一定要的啦，畢竟我英文不好XD..

#### 插件:Live Server
即時將結果顯示於網頁上，不需要一直重新整理，減少時間，畢竟時間就是金錢!!!
#### 個人VS Code設定(按ctrl+S儲存後程式自動排版)
點選左下角齒輪→設定

輸入"Format On Save">將它打勾，存檔時就會自動排版，減少對眼睛的負擔，也會比較好維護~~

## 2.如何做前置作業，以及安排視窗切割

### 前置作業
1.首先了解BMI的規則及題目的要求
2.查看老師錄製的影片內容並反覆跟著練習
3.去嘗試了解老師撰寫程式碼的涵義及邏輯
4.不急著撰寫程式，依照流程圖去構思程式如何撰寫
5.把需要的資料整理出來，方便複製
6.準備撰寫程式

### 視窗安排
主要分成四個區塊
1→把需要的資料整理出來，方便複製(主要是為了減少秒數XD)
2→主要撰寫程式的區域
3→顯示鬧鐘為了提醒自己剩餘時間
4→即時觀看console.log結果

## 3.編輯器熱鍵分享
本身沒有設定熱鍵..小小新手，都是常用基本熱鍵:
存檔:ctrl + s
複製:ctrl + c
貼上:ctrl + v
還原:ctrl + z
選取多個相同名稱:ctrl + d
使游標移到檔案的第一行:home
使游標移到檔案的最後一行:end
快速打出console.log:輸入log+tab

## 4.BMI kata 的程式碼分享
### 第一階段：請寫 printBmi 函式，並印出對應狀態

printBmi(178, 20) >> 印出 console.log 文字為「您的體重過輕」
printBmi(178, 70) >> 印出 console.log 文字為「您的體重正常」
printBmi(178, 85)>> 印出 console.log 文字為「您的體重過重」
printBmi(178, 90)>> 印出 console.log 文字為「您的體重輕度肥胖」
printBmi(178, 110)>> 印出 console.log 文字為「您的體重中度肥胖」
printBmi(178, 130)>> 印出 console.log 文字為「您的體重重度肥胖」
printBmi("身高","體重")>> 印出 console.log 文字為「您的數值輸入錯誤，請重新輸入」

第一階段程式碼如下:

//計算BMI
function printBmi(height, weight) {
  let bmi = (weight / (height / 100) ** 2).toFixed(2);
  let mode;
  console.log(bmi); //查看bmi計算的值是否正確
  if (bmi < 18.5) {
    mode = '過輕';
  } else if (bmi >= 18.5 && bmi < 24) {
    mode = '正常';
  } else if (bmi >= 24 && bmi < 27) {
    mode = '過重';
  } else if (bmi >= 27 && bmi < 30) {
    mode = '輕度肥胖';
  } else if (bmi >= 30 && bmi < 35) {
    mode = '中度肥胖';
  } else if (bmi >= 35) {
    mode = '重度肥胖';
  } else {
    console.log('您的數值輸入錯誤，請重新輸入');
    return;
  }
  console.log(`您的體重${mode}`);
}

//呼叫
printBmi(178, 20);
printBmi(178, 70);
printBmi(178, 85);
printBmi(178, 90);
printBmi(178, 110);
printBmi(178, 130);
printBmi("身高", "體重");

解題流程:
1. 首先了解題目需求
1. 以printBmi(178, 20) >> 印出 console.log 文字為「您的體重過輕」為例
1. 代表printBmi輸入身高178，體重20，會顯示您的體重過輕此狀態
1. 命名函式printBmi(height,weight)，height及weight為自定義參數(代表身高及體重)
1. 宣告一個變數bmi等於BMI的計算規則→BMI = 體重(公斤) / 身高2(公尺2)
1. if else去判斷BMI算出的值位於else if哪一個階段並console.log顯示對應文字，若都不符合if 及else if條件則return回傳else中的狀態

※程式碼與老師影片內容沒有太大差異，但部分我做了優化
1. 針對BMI結果去顯示console.log，後來想到的是我宣告一個變數為mode，並讓他被賦予題目需要的狀態，最後用console.log顯示mode被賦予變數的值，達到減少console.log重複的次數

### 第二階段：請程式碼裡加入此變數，並嘗試運用此變數裡的資訊

printBmi(178, 20) >> 印出 console.log 文字為「您的體重過輕，健康指數為藍色」
printBmi(178, 70) >> 印出 console.log 文字為「您的體重正常，健康指數為紅色」
printBmi(178, 85)>> 印出 console.log 文字為「您的體重過重，健康指數為澄色」
printBmi(178, 90)>> 印出 console.log 文字為「您的體重輕度肥胖，健康指數為黃色」
printBmi(178, 110)>> 印出 console.log 文字為「您的體重中度肥胖，健康指數為黑色」
printBmi(178, 130)>> 印出 console.log 文字為「您的體重重度肥胖，健康指數為綠色」
printBmi("身高","體重")>> 印出 console.log 文字為「您的數值輸入錯誤，請重新輸入」

第二階段程式碼如下:

//變數資訊
const bmiStatesData = {
  "overThin": {
    "state": "過輕",
    "color": "藍色"
  },
  "normal": {
    "state": "正常",
    "color": "紅色"
  },
  "overWeight": {
    "state": "過重",
    "color": "澄色"
  },
  "mildFat": {
    "state": "輕度肥胖",
    "color": "黃色"
  },
  "moderateFat": {
    "state": "中度肥胖",
    "color": "黑色"
  },
  "severeFat": {
    "state": "重度肥胖",
    "color": "綠色"
  },
}

//計算BMI
function printBmi(height, weight) {
  let bmi = (weight / (height / 100) ** 2).toFixed(2);
  let mode;
  console.log(bmi); //查看bmi計算的值是否正確
  if (bmi < 18.5) {
    mode = 'overThin';
  } else if (bmi >= 18.5 && bmi < 24) {
    mode = 'normal';
  } else if (bmi >= 24 && bmi < 27) {
    mode = 'overWeight';
  } else if (bmi >= 27 && bmi < 30) {
    mode = 'mildFat';
  } else if (bmi >= 30 && bmi < 35) {
    mode = 'moderateFat';
  } else if (bmi >= 35) {
    mode = 'severeFat';
  } else {
    console.log('您的數值輸入錯誤，請重新輸入');
    return;
  }
  bmiText(mode);
}

//加入變數資訊
function bmiText(mode) {
  console.log(`您的體重${bmiStatesData[mode].state}，健康指數為${bmiStatesData[mode].color}`);
}

//呼叫
printBmi(178, 20);
printBmi(178, 70);
printBmi(178, 85);
printBmi(178, 90);
printBmi(178, 110);
printBmi(178, 130);
printBmi("身高", "體重");

解題流程:

1. 首先了解題目需求
1. 第二階段跟第一階段相比，多了健康指數狀態顯示對應顏色，但這些資訊被賦予在bmiStatesData的物件中，所以勢必要去讀取物件中的對應資訊
1. 命名函式bmiText(mode)，此mode參數要讀取bmiStatesData中字串對應的資訊
1. 這裡將原本第一階段mode的字串改成bmiStatesData物件中的字串名稱
1. 最後把函式bmiText(mode)寫入函式printBmi(height, weight)

※程式碼與老師影片內容沒有太大差異，與第一階段的優化相同
1. 針對BMI結果去顯示console.log，後來想到的是我宣告一個變數為mode，並讓他被賦予題目需要的狀態，並帶入到函式bmiText(mode)中，最後用console.log顯示mode被賦予變數的值

### 第三階段：儲存每筆計算資料，多一個變數為 bmiHistoryData，並賦予空陣列來儲存計算物件資料，若數值輸入錯誤，則不儲存

printBmi(178, 20) >> 印出 console.log 文字為「您的體重過輕，健康指數為藍色」
printBmi(178, 70) >> 印出 console.log 文字為「您的體重正常，健康指數為紅色」
printBmi(178, 85)>> 印出 console.log 文字為「您的體重過重，健康指數為澄色」
showHistoryData() >> 印出 console.log 文字為「您總共計算 3 次 BMI 紀錄，最後一次 BMI 指數為 26.83，體重過重！健康指數為澄色！」

第三階段程式碼如下:

//變數資訊
const bmiStatesData = {
  "overThin": {
    "state": "過輕",
    "color": "藍色"
  },
  "normal": {
    "state": "正常",
    "color": "紅色"
  },
  "overWeight": {
    "state": "過重",
    "color": "澄色"
  },
  "mildFat": {
    "state": "輕度肥胖",
    "color": "黃色"
  },
  "moderateFat": {
    "state": "中度肥胖",
    "color": "黑色"
  },
  "severeFat": {
    "state": "重度肥胖",
    "color": "綠色"
  },
}


let bmiHistoryData = [];

//計算BMI 
function printBmi(height, weight) {
  let bmi = (weight / (height / 100) ** 2).toFixed(2);
  let mode;
  console.log(bmi); //查看bmi計算的值是否正確
  if (bmi < 18.5) {
    mode = 'overThin';
  } else if (bmi >= 18.5 && bmi < 24) {
    mode = 'normal';
  } else if (bmi >= 24 && bmi < 27) {
    mode = 'overWeight';
  } else if (bmi >= 27 && bmi < 30) {
    mode = 'mildFat';
  } else if (bmi >= 30 && bmi < 35) {
    mode = 'moderateFat';
  } else if (bmi >= 35) {
    mode = 'severeFat';
  } else {
    console.log('您的數值輸入錯誤，請重新輸入');
    return;
  }
  
  bmiText(mode);
  addData(bmi, mode);
}
//加入變數資訊，
function bmiText(mode) {
  console.log(`您的體重${bmiStatesData[mode].state}，健康指數為${bmiStatesData[mode].color}`);
}

//加入陣列資料 
function addData(bmi, mode) {
  let obj = {};
  obj.bmi = bmi;
  obj.mode = bmiStatesData[mode].state;
  obj.color = bmiStatesData[mode].color;
  bmiHistoryData.push(obj);
}

//印出最後一次BMI紀錄 
function showHistoryData() {
  let len = bmiHistoryData.length; //陣列長度
  let record = bmiHistoryData[len - 1]; //陣列中的資料，因為陣列中的第一筆為0所以-1
  console.log(`您總共計算 ${len} 次 BMI 紀錄，最後一次 BMI 指數為 ${record.bmi}，體重${record.mode}！健康指數為${record.color}！`);
}

//呼叫
printBmi(178, 20);
printBmi(178, 70);
printBmi(178, 85);
// printBmi(178, 90);
// printBmi(178, 110);
// printBmi(178, 130);
// printBmi("身高", "體重");
showHistoryData();

解題流程:
1. 首先了解題目需求
1. 題目要求多一個變數為bmiHistoryData，並賦予空陣列來儲存資料，所以就必須宣告一個變數bmiHistoryData並賦予值為空陣列
1. 命名函式addData(bmi, mode)，把要加入的資料寫入一個物件中
1. 題目提到showHistoryData()要顯示一段文字，而文字內容來自陣列中的物件資料
1. 命名函式showHistoryData()顯示儲存在陣列中的物件資料

※程式碼與老師影片內容沒有太大差異，老師也有提出的建議(已修改)

1. 原先陣列中的資料我並沒有把他存入物件中，是直接把變數push進去陣列中導致相同字串過多程式也冗長，後來改用老師的建議，push嘗試用物件格式，將重要資訊存入屬性，消除了許多相同字串存放
1. 個人也針對showHistoryData()函式去設定變數，最後要讀取變數資料時不會讓程式碼過於複雜

### codepen網址:https://codepen.io/klrkicog/pen/poNOwBp?editors=0011

## 5.如何安排時間與頻率來進行訓練

其實沒有特別規劃什麼時間點去限制練習，因為很想拿到vue的書，哈哈哈!!!

所以禮拜五上完直播班的課程後就馬上去觀看老師錄製的影片內容，然後跟著練習

禮拜六早上開始思考老師撰寫的程式邏輯，一開始真的不管怎麼練習怎麼卡

有時候練習到一半甚至整個人突然呆滯，一直去思考自己的邏輯是否正確，懷疑人生...

後來反覆練習，反覆去思考如何優化自己的程式碼，多練習讓自己的邏輯清晰一些

最後才有現在寫出的code，並達到5分內，錄影時真的是蠻緊張的XD

接下來幾天我也會繼續去思考是否還有程式優化的空間

或是參考其他學員code、嘗試其他的寫法!!!加油!!!