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
留言分享你的想法!
avatar-img
Ray C的沙龍
37會員
31內容數
短篇奇幻作品將不定期更新。
Ray C的沙龍的其他內容
2023/01/14
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料...
Thumbnail
2023/01/14
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料...
Thumbnail
2022/04/03
去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
Thumbnail
2022/04/03
去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
Thumbnail
2022/03/25
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
Thumbnail
2022/03/25
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
本課程學習如何實作處理加、減、乘和除按鈕等計算機相關邏輯。
Thumbnail
本課程學習如何實作處理加、減、乘和除按鈕等計算機相關邏輯。
Thumbnail
本課程學習如何如何實作計算機介面,佈局文字元件及按鈕。學習使用 LinearLayout 垂直排列元件,調整背景色。透過 GridLayout 佈局計算機按鈕。
Thumbnail
本課程學習如何如何實作計算機介面,佈局文字元件及按鈕。學習使用 LinearLayout 垂直排列元件,調整背景色。透過 GridLayout 佈局計算機按鈕。
Thumbnail
專案分享-計算機 邏輯思維:首先,要建立幾個變數與函式,方便我們作業。接下來針對每一個函式進行解釋。 讓大家可以自己動手做一個簡易的計算機
Thumbnail
專案分享-計算機 邏輯思維:首先,要建立幾個變數與函式,方便我們作業。接下來針對每一個函式進行解釋。 讓大家可以自己動手做一個簡易的計算機
Thumbnail
專案項目:兩數範圍內的質數判斷 邏輯思維:當按下計算按鈕,如果兩個文字輸入盒當中,只要有一個沒有輸入數字,則判斷為真,顯示提示訊息,否則執行質數的判斷。
Thumbnail
專案項目:兩數範圍內的質數判斷 邏輯思維:當按下計算按鈕,如果兩個文字輸入盒當中,只要有一個沒有輸入數字,則判斷為真,顯示提示訊息,否則執行質數的判斷。
Thumbnail
如果要把這些欄位全部加上0,除了拖曳跟逐格填上0,有沒有其他方法?
Thumbnail
如果要把這些欄位全部加上0,除了拖曳跟逐格填上0,有沒有其他方法?
Thumbnail
努力了一個多月,終於將以下的重大改版完成,並通過Google審核,在昨天上線,有安裝"QuickCalc - 速算 : 多功能計算機"的朋友們,可以去更新了。
Thumbnail
努力了一個多月,終於將以下的重大改版完成,並通過Google審核,在昨天上線,有安裝"QuickCalc - 速算 : 多功能計算機"的朋友們,可以去更新了。
Thumbnail
我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時...
Thumbnail
我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時...
Thumbnail
【Quick Calc. 速算-多功能計算機】是一套簡易、清楚、直覺多功能的計算機,秉持著【簡潔】的設計理念,結合「經常使用」的計算模組,所開發出的計算機,全模組皆自行開發,非使用第三方計算機共用模組!
Thumbnail
【Quick Calc. 速算-多功能計算機】是一套簡易、清楚、直覺多功能的計算機,秉持著【簡潔】的設計理念,結合「經常使用」的計算模組,所開發出的計算機,全模組皆自行開發,非使用第三方計算機共用模組!
Thumbnail
承繼上一篇的數值加工想法,這次介紹取對數的效果
Thumbnail
承繼上一篇的數值加工想法,這次介紹取對數的效果
Thumbnail
數字快打提供四種數字轉換,原先是為行政、會計等人員設計,實際開發後發現這個功能大家都用的到!而且評價也非常高,用過的朋友都表示數字快打真的能提昇工作效率(灑花)不用離開本來的打字畫面,就可以計算數字!
Thumbnail
數字快打提供四種數字轉換,原先是為行政、會計等人員設計,實際開發後發現這個功能大家都用的到!而且評價也非常高,用過的朋友都表示數字快打真的能提昇工作效率(灑花)不用離開本來的打字畫面,就可以計算數字!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News