# Super Junior’s Club Day8 分享者：rich --- # 今日目標：來寫個網速單位轉換器吧！ [Day09原文連結](https://ithelp.ithome.com.tw/articles/10220688) [Day10原文連結](https://ithelp.ithome.com.tw/articles/10221113) ---  --- ### 網速單位是什麼？ >測測看你的速度[台大測速](http://speed5.ntu.edu.tw/speed5/) ---  --- 常見der: >MB/s：Million <font color="#f00">bytes</font> per second >的縮寫 >Mbps：Million <font color="#f00">bits</font> per second >的縮寫 兩者只差在單位不一樣！ 所以縮寫會以 大寫 B 和 小寫 b 做區隔。 ### 結論：大寫的（資料量）就比較大。 --- ### byte bit 差在哪？ >Bit = 位元：一個電流的開(1)或關(0)，是電腦的最小、最基本單位。 >Byte = 位元組：是資料常用的基本單位，大小可以儲存一個英文字母。 >1 Byte = 8 bit --- ### 不太相關 || 補充 [Memory Usage Of Different Data Types in javascript](https://stackoverflow.com/questions/4905861/memory-usage-of-different-data-types-in-javascript)  [How many characters can you store with 1 byte?](https://stackoverflow.com/questions/21300929/how-many-characters-can-you-store-with-1-byte/21301130) --- # 複習單位大小 ### 1Byte=8Bit ### 1KB=1024Bytes ### 1MB=1024KB ### 1GB=1024MB ### 1TB=1024GB ### 1PB=1024TB --- ### 所以實際上 Mbps 的值需要「除以 8 」 ### 才是指每秒鐘可以有多少 MB 的傳輸量 Mbps/8 = MB ---  --- ### 又要改成 JSX 了 [自己動手做](https://codepen.io/PJCHENder/pen/WNemOjp) ---  --- ### 改完長[這樣](https://codepen.io/PJCHENder/pen/LYPaZvE) 有了樣子之後，要加上一些功能。 --- ## 最終但不是今日目標：  --- * 輸入 Mbps 自動轉換成 MB/s * 根據輸入的數字不同，最下方會呈現不同的樣式和文字說明 --- # 拿到使用者輸入並顯示於畫面上之步驟  ---- >在 React 中，常使用 handle 當作事件處理器的開頭，例如 onClick 對應到 handleClick，onChange 對應到 handleChange。 > --- 成功顯示後，再更改 `show` 那邊顯示的數值。 `value={inputValue/8}` 第一個目標完成了：輸入 Mbps 自動轉換成 MB/s --- ## 太多東西了，我要把它拆開 拆出 UnitControl, CardFooter --- 接著增加 CardFooter 的樣式 --- ``` const CardFooter = () => { // STEP 1：inputValue 是使用者輸入的數值，暫時先設成 30 let inputValue = 30; // STEP 2：定義 criteria 物件 let criteria; // STEP 3：根據 inputValue 改變要顯示的內容和背景色 if (!inputValue) { criteria = { title: '---', backgroundColor: '#d3d8e2', }; } else if (inputValue < 15) { criteria = { title: 'SLOW', backgroundColor: '#ee362d', }; } else if (inputValue < 40) { criteria = { title: 'GOOD', backgroundColor: '#1b82f1', }; } else if (inputValue >= 40) { criteria = { title: 'FAST', backgroundColor: '#13d569', }; } return ( <div className="card-footer" style={{ backgroundColor: criteria.backgroundColor }} > {criteria.title} </div> ); }; ``` --- 因為在 <CardFooter /> 中還沒辦法取得使用者實際上在對話框中輸入的 inputValue 因此還無法讓它自動根據使用者在對話框中輸入的值來自動變化。 未完成的部份下次待續～ --- # 謝謝大家～ ---