Vanilla Calculator|立即顯示結果的優雅計算機
Ray C
Ray C

Vanilla Calculator|立即顯示結果的優雅計算機

2022-03-25|閱讀時間約 1 分鐘

簡介

我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時做出文字響應式設計;以及按 C 鍵清除數字時,讓使用者享受到俐落動畫所帶來的流暢使用體驗;另外在細節設定上,透過 JS 讓重複輸入運算符時只顯示和計算最後一位,以及按下 = 鍵結算時只保留小數到第三位,這些細節都讓操作流程變得更好。雖然這次主題一開始是懷著配合漂亮外觀的 JS 實作,不過途中加入了許多自己的 UI/UX 設計,也做了許多陣列、字串和數字之間轉換的練習,是個令我感到成就感滿滿的作品!

開發紀錄

  • 使用預處理器 Pug、Sass 撰寫 HTML、CSS
  • 使用原生 JavaScript 撰寫,並著重於物件導向式開發
  • 透過 JS 即時顯示計算結果,相較於傳統計算機,操作更直覺方便
  • 使用增減 HTML class 的方式做出文字響應式設計(數字長度超過螢幕時的自適應)
  • 使用 CSS animation 做出流暢的清除動畫
  • 透過 JS 讓重複輸入的運算符只顯示並計算最後一位,減少誤按導致計算錯誤的問題
  • 使用 `Math.round` 確保計算精度,並在結算時自動四捨五入到小數第三位,方便觀看計算結果
0
贊助支持創作者,成為他繼續創作的動力吧!
作者介紹
Ray C
Ray C
居住於台北市,熱衷網站開發和設計,認為兩者相輔相臣,致力於做到開發如同揮劍一般優雅。更多關於我:https://rayc.dev/links
本文發佈於
嗯... 就把專案設計和開發的紀錄放在這邊吧!
如果要發表留言,請先登入註冊會員
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限