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
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
圖 :滿額立即刮。 【李婉如/ 報導】農曆新春腳步將近,早午餐品牌「拉亞漢堡」為你準備了豐富多項春節優惠,推出新春好運「過年限定刮刮樂」吃拉亞把iPhone15刮出來活動,2/6~3/10期間到拉亞漢堡全台門市消費,LAYA NOW APP 會員獨享,單筆消費滿 $200,且使用線上支付,即可
Thumbnail
篩選上下文是什麼 CALCULATE() Excel樞紐分析表的明細表 簡單來說
Thumbnail
如果工作的預估和實際的執行是一致的,就不會有《人月神話》中那一句話:用人月的前提必須是人力與工時可以互換的情況下。我並不是說反正執行結果都不會跟預估的一樣,所以團隊成員在 planning meeting 裡可以亂估,而是要回頭想一下,Scrum 裡 planning meeting 的本質是什麼?
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
圖 :滿額立即刮。 【李婉如/ 報導】農曆新春腳步將近,早午餐品牌「拉亞漢堡」為你準備了豐富多項春節優惠,推出新春好運「過年限定刮刮樂」吃拉亞把iPhone15刮出來活動,2/6~3/10期間到拉亞漢堡全台門市消費,LAYA NOW APP 會員獨享,單筆消費滿 $200,且使用線上支付,即可
Thumbnail
篩選上下文是什麼 CALCULATE() Excel樞紐分析表的明細表 簡單來說
Thumbnail
如果工作的預估和實際的執行是一致的,就不會有《人月神話》中那一句話:用人月的前提必須是人力與工時可以互換的情況下。我並不是說反正執行結果都不會跟預估的一樣,所以團隊成員在 planning meeting 裡可以亂估,而是要回頭想一下,Scrum 裡 planning meeting 的本質是什麼?