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

閱讀時間約 1 分鐘

簡介

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

開發紀錄

  • 使用預處理器 Pug、Sass 撰寫 HTML、CSS
  • 使用原生 JavaScript 撰寫,並著重於物件導向式開發
  • 透過 JS 即時顯示計算結果,相較於傳統計算機,操作更直覺方便
  • 使用增減 HTML class 的方式做出文字響應式設計(數字長度超過螢幕時的自適應)
  • 使用 CSS animation 做出流暢的清除動畫
  • 透過 JS 讓重複輸入的運算符只顯示並計算最後一位,減少誤按導致計算錯誤的問題
  • 使用 `Math.round` 確保計算精度,並在結算時自動四捨五入到小數第三位,方便觀看計算結果
為什麼會看到廣告
37會員
31內容數
短篇奇幻作品將不定期更新。
留言0
查看全部
發表第一個留言支持創作者!
Ray C的沙龍 的其他內容
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
圖 :滿額立即刮。 【李婉如/ 報導】農曆新春腳步將近,早午餐品牌「拉亞漢堡」為你準備了豐富多項春節優惠,推出新春好運「過年限定刮刮樂」吃拉亞把iPhone15刮出來活動,2/6~3/10期間到拉亞漢堡全台門市消費,LAYA NOW APP 會員獨享,單筆消費滿 $200,且使用線上支付,即可
Thumbnail
篩選上下文是什麼 CALCULATE() Excel樞紐分析表的明細表 簡單來說
Thumbnail
如果工作的預估和實際的執行是一致的,就不會有《人月神話》中那一句話:用人月的前提必須是人力與工時可以互換的情況下。我並不是說反正執行結果都不會跟預估的一樣,所以團隊成員在 planning meeting 裡可以亂估,而是要回頭想一下,Scrum 裡 planning meeting 的本質是什麼?
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
圖 :滿額立即刮。 【李婉如/ 報導】農曆新春腳步將近,早午餐品牌「拉亞漢堡」為你準備了豐富多項春節優惠,推出新春好運「過年限定刮刮樂」吃拉亞把iPhone15刮出來活動,2/6~3/10期間到拉亞漢堡全台門市消費,LAYA NOW APP 會員獨享,單筆消費滿 $200,且使用線上支付,即可
Thumbnail
篩選上下文是什麼 CALCULATE() Excel樞紐分析表的明細表 簡單來說
Thumbnail
如果工作的預估和實際的執行是一致的,就不會有《人月神話》中那一句話:用人月的前提必須是人力與工時可以互換的情況下。我並不是說反正執行結果都不會跟預估的一樣,所以團隊成員在 planning meeting 裡可以亂估,而是要回頭想一下,Scrum 裡 planning meeting 的本質是什麼?