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

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

更新於 發佈於 閱讀時間約 2 分鐘
raw-image

Vanilla Calculator / GitHub

簡介

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

開發紀錄

  • 使用預處理器 Pug、Sass 撰寫 HTML、CSS
  • 使用原生 JavaScript 撰寫,並著重於物件導向式開發
  • 透過 JS 即時顯示計算結果,相較於傳統計算機,操作更直覺方便
  • 使用增減 HTML class 的方式做出文字響應式設計(數字長度超過螢幕時的自適應)
  • 使用 CSS animation 做出流暢的清除動畫
  • 透過 JS 讓重複輸入的運算符只顯示並計算最後一位,減少誤按導致計算錯誤的問題
  • 使用 `Math.round` 確保計算精度,並在結算時自動四捨五入到小數第三位,方便觀看計算結果
avatar-img
Ray C的沙龍
37會員
31內容數
短篇奇幻作品將不定期更新。
留言
avatar-img
留言分享你的想法!
Ray C的沙龍 的其他內容
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...