Week 4 課堂練習

week-4.md

Week 4 課堂練習

Calculator App

Resource

依照提供的檔案進行修改 (https://github.com/web-seminar/calculator)

參考 UI

Requirement

• 複製提供的專案
• 依照裡面已經提供的部份 UI 去完成整個 UI 的擺設

不實作的部分

• 正負號 (+/-)、百分比(%)、小數點(.) 這三個按鍵只需要有 UI，不需要功能

重置計算機

• AC (all clear) 按鍵，需要可以把計算狀態 (state) 全清空

數字按鍵

• 會跟一般計算機一樣按了會累積之後要當運算元的數字。例如依序按下 6, 1, 9, 8，會產生 6198 來當作運算元
• 因為不實作小數當作運算元，所以第一個數字按零可以忽略

運算子按鍵 (+, -, x, ÷, =)

1. 如果前面已經有 pending 的運算則先把前面的運算求值

例如：

• 按下 3, +, 6：這時候畫面還是 6
• 但再按下 (+, -, x, ÷, =) 任何一個就會更新運算結果

2. 如果前面也是運算子，則用新的運算子把舊的換掉

• 按下 3, +, -, 1, =：這時候結果為 2，+ 會被 - 換掉

3. 如果前面是運算元，則先 pending 存至 state

Optional

• 複製上階段的專案
• 改寫成記錄按下的運算式，直到按 = 才進行計算
• 計算後清掉前面紀錄的運算式，顯示計算結果
• 必須考慮先乘除後加減

Hint

• 先思考能暫存計算步驟的 state 長什麼樣子，然後放到 CalculatorApp Component 裡面
• 數字運算元跟運算子可能都必須儲存在 state

Step by step

• 把下面三排的 UI，照著前面兩排依法炮製
• 把 CalcButton 裡面夾的東西，也就是 children，照著計算機上面顯示的字放進去
• 做一個跨兩格的按鈕 0，需要有比較長的長度 width (參考 https://github.com/web-seminar/calculator/blob/master/style.css#L27)
• 設計 state 來存放前一次運算結果、現在 pending 的運算元 (數字)、運算子 (+, - , x , /)