【實戰】整個
「匯率換算器」

唱錢嗰陣心算半日?一撳即計,仲可以對住找換店個牌價較準,睇吓佢賺你幾多。

點解唔用現成嘅匯率App?

App Store 一大把匯率 App,但你真係用嗰吓就知:開 App 先彈 5 秒全屏廣告、匯率牌價唔知邊日嘅、想計「$8,500 港紙唱到幾多日圓」仲要撳十吓先輸入到。最嬲係去到日本嘅找換店門口,你只想快快手計一條數啫。

自己整一個:打開就係輸入框,預設好你成日用嘅貨幣組合,離線都計到(唱錢嗰陣成日冇 data)。仲可以加個「找換店牌價對照」功能,一眼睇出佢個價靚唔靚。

成品功能預覽

第一步:複製 Prompt 俾 AI

開啟 ChatGPT、Claude 或 Kimi,成段複製貼上:

【角色】你係資深前端工程師,擅長設計簡潔實用嘅金融計算工具。 【任務】生成一個「匯率換算器」網站,單一 HTML 檔案,可直接開啟使用。 【目標用戶】香港人,主要用嚟旅行唱錢同海外網購計數 【功能規格】 - 開頁時用 fetch 連接免費匯率 API「https://open.er-api.com/v6/latest/HKD」(免費、唔使 key),自動拎最新匯率 - 頂部一個大金額輸入框,下面兩個貨幣選擇(左邊「由」,右邊「兌」) - 預設貨幣:HKD 港元、JPY 日元、TWD 台幣、CNY 人民幣、USD 美金、GBP 英鎊、EUR 歐元、KRW 韓圜、THB 泰銖 - 每種貨幣顯示旗幟 Emoji + 貨幣代碼 + 中文名 - 輸入金額後即時顯示兌換結果,唔使撳掣 - 中間一個「⇄ 反轉」按鈕,互換兩邊貨幣 - 結果要顯示千分位(例如 ¥185,000)同埋「1 HKD = 20.3 JPY」呢類匯率參考 - 顯示匯率更新時間(用 API 返嚟嘅 time_last_update_utc) - 匯率拎到之後用 localStorage 快取,下次開頁離線都用到最近嗰次嘅匯率 - API 拎唔到(例如離線)就用快取或內置預設匯率,並顯示「離線模式,匯率或未能反映最新價格」 - 「手動模式」開關:開咗之後可以自己輸入任何貨幣兌港元嘅匯率(方便對準找換店牌價),修改後即時生效,並用 localStorage 記住 【設計要求】 - 簡潔風格,重點係個金額輸入框同結果要超大 - 手機優先設計(響應式),數字鍵盤友善(input type 用 decimal) - 主色調深藍色 【技術限制】 - 單一 HTML 檔案,內嵌 CSS + JavaScript - 唔使用外部圖片或框架,用 Emoji 做貨幣旗幟 - 程式碼要有中文註釋 【輸出】 請輸出完整 HTML code,我會直接儲存為 .html 檔案使用。

第二步:儲存做 HTML 檔案

1

複製 AI 輸出嘅完整代碼

由 <!DOCTYPE html> 到最後 </html>,一行都唔好漏。

2

記事本貼上,另存新檔

檔名 currency.html,儲存類型揀「所有檔案」,編碼 UTF-8。

3

雙擊開啟,試計一條數

打 1000 港紙,揀兌日元,應該即時見到結果。試撳「反轉」掣。

第三步:兩個模式點用?

個工具用嘅免費匯率 API(open.er-api.com)每日更新一次,唔使申請唔使錢。就算去到日本冇 data,開過一次之後匯率已經儲咗喺你部機,離線照計到。

按需要微調(直接同 AI 講)

常見問題 FAQ

Q:匯率係自動更新嘅?唔使自己入?

A:係!呢個版本會自動連接免費匯率 API,開頁就係最新價(每日更新一次)。唱錢嗰陣先開「手動模式」輸入找換店嘅牌價,計出嚟就係實收數。

Q:點解我計出嚟同找換店收嘅唔同?

A:因為網上匯率係「中間價」,找換店會食差價。所以你應該直接輸入找換店個牌價做匯率,咁先係實收數 —— 呢個正正係自己整工具嘅價值。

Q:可以放喺手機桌面當 App 用嗎?

A:可以!將個檔案傳上手機開啟,瀏覽器選單揀「加到主畫面」,以後撳 icon 直入,快過開 App 仲冇廣告。

總結

下次去旅行,唔使再喺找換店門口撳計數機撳到面阻阻。自己嘅匯率器,自己嘅牌價,一撳有數。整完之後,不妨睇埋 飯局 AA 制分帳器 —— 同朋友食飯夾錢都係一撳搞掂。

贊助商廣告