BMI 計算器

JS 入門篇-最終作業

HTML

首先要刻出 HTML 和 CSS，再由 JS 手動變更 HTML 和 CSS。

有使用到一點Bootstrapt：

// Utilities 
text-hide     // 圖片取代文字
text-center   // 文字至中
// Components
form-group    // 表單群組
form-control  // 表單樣式
// Layout
container     // 容器（使內容居中）

CSS

mixin 寫法

@mixin size($w, $h) {
  width: $w;
  height: $h;
}

include 代入 mixin 和參數

.footerLogo {
  @include size(55px,55px);
}

變更 placeholder 字的樣式

input {
  &::placeholder {        /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: rgba(#fff,0.5);
     opacity: 1;            /* Firefox */
  }
  &:-ms-input-placeholder { /* Internet Explorer 10-11 */
     color: rgba(#fff,0.5);
  }
  &::-ms-input-placeholder { /* Microsoft Edge */
     color: rgba(#fff,0.5);
  }
}

rotate(*turn)

transform: rotate(-0.5turn);  // 負值：逆時針旋轉
                              // 正值：順時針旋轉
                              // 1：轉一圈、0.5：轉半圈。以此類推。

lighten(color, %)、darken(color, %)

background: lighten($color-dark, 60%);    // 變亮 60%
background: darken($color-secondary,20%); // 變暗 20%

filter

filter: grayscale(100%) invert(80%); // 套灰階 負片 濾鏡

box-shadow

box-shadow: 0 1px 6px 3px $color-secondary;
1. offset-x      // 偏移 x 軸
2. offset-y      // 偏移 y 軸
3. blur-radius   // 模糊的程度
4. spread-radius // 擴散的程度
5. color         // 顏色

偽類選擇器（:first-child、:last-child、:nth-child(*) ）

& :first-child {      // & 後方留空格 代表 裡面的子元素
  margin-left: 12px;
}
& :nth-child(odd) {   // odd 奇數； even 偶數； 或直接給數字。
  margin-left: 7px;
}
& :last-child {
  color: red;
}

JavaScript

通常都是在處理三件事情：資料(model)、事件(event)、 介面(view)。

選擇 dom 節點

宣告一組陣列 用來裝所有輸入的資料

當有資料輸入之後，從 localStorage 取出的資料，經由轉型 JSON.parse() 將字串轉型成「陣列」。

一開始是空資料 [] 尚未輸入任何資料。

用 ||(或是) 才不會出錯，而且「空資料 []」一定要放在後面，不然更新頁面時，可能會吃到[]，就無法抓到 localStorage 的資料。

事件監聽 addEventListener

計算 BMI 的 function

1. 代入參數（user’s 體重, user’s 身高）
2. toEixed(*) 「取小數點後*位數 」 number.toEixed(2) // 取小數點後兩位數
3. return 將計算完的值帶出來。

描述 BMI 狀態文字的 function

1. 先宣告變數 str，用來裝字串（狀態文字）。
2. if 判斷式，符合條件時，str 代入字串（狀態文字）。
3. return 將字串帶出來。

變更 border-left 顏色的 function

1. 先宣告變數 color，用來裝字串（顏色色碼）。
2. if 判斷式，符合條件時，color 代入字串（顏色色碼）。
3. return 將字串帶出來。

新增資料（click 事件的 function）

1. e.preventDefault() // 取消默認行為
2. .value // 取得輸入欄位 input 輸入的資料
3. new Date() 取得 目前時間 （使用方法連結）

new Date();
var today = new Date();
var dateStr = today.getFullYear() + '-' + today.getMonth() + '-' + today.getDate();

4. 將資料 給定成 物件的格式

5. 輸入欄位空白時 return 中止下方程式

6. 用 push 的方式 推入每一筆 物件object 資料

7. 更新 並 印在網頁上 的 function 會重複用到 所以拉出來寫

8. click 之後替換結果圓圈。style 給的值是 ” 字串 ”

更新資料的 function（新增或刪除資料時都會重新渲染）

1. for迴圈抓出每一筆資料 做加總（裡面給Html字串+陣列變數）
2. 把資料用 innerHTML 掛在 ul 上，印在 HTML 上。
3. 存在 localStorage 要轉成 字串 JSON.stringify
4. 第二個 for 迴圈 用來顯示結果的 circle（裡面給Html字串+陣列變數）
5. 把資料用 innerHTML 掛在 .d-None 上，印在 HTML 上。

刪除資料（click 事件的 function）

1. e.target 指向的位置
2. dataset.num 自定義屬性 的 編號（num＝for 迴圈的 i）
3. nodeName 節點名稱（大寫字串，例：”UL”、”A”）
4. 加入判斷式，如果指向的位置不是 A 時，則 return 中止下方程式
5. 用 splice 刪除 (第幾筆資料, 共刪除幾筆)。array.splice(i, number)
6. 刪除完之後，加入更新資料 function，重新渲染網頁。updateData(data)

花了三天時間，完全按照之前所學，沒有參考別人作品，一步一步做出來的 final test。

但是發現一個 bug： header 如果是「已顯示結果的圓圈（轉換成不同顏色）」，此時把下面的紀錄資料清單全部刪除後，「已顯示結果的圓圈」就會消失並顯示 undefined。 尚未解決

filter 濾鏡 參考、UI 介面樣式連結