昨天終於把番茄鐘和進度條接起來，完整完成一次番茄鐘後，進度就會增加 10%。
原本以為進度條做到這裡就差不多了，但實際測試之後，又發現一個小問題：

進度條雖然會增加，但我不知道現在到底是多少％。

只看白色進度條的長度，大概可以知道進度有增加，但如果想確認目前是 10%、20% 還是 30%，其實沒有那麼直覺。
所以今天就從這個小地方繼續修改。

先把百分比顯示出來

一開始先請 AI 在進度條旁加入目前的百分比。
加入之後，數字確實成功顯示，也會跟著目前的進度一起改變。

不過實際看到畫面後，我才發現百分比的位置跟原本想像的不太一樣。
我想要的其實是讓百分比顯示在整條進度條的右側外面，而不是放在進度條裡

|████████------------------------------| 20%

接著又調整位置，希望把百分比移到進度條外面。
原本以為只是改個位置，應該很快就可以解決。
結果改完之後，數字直接不見了。

移到外面後，數字反而不見了

一開始看到數字消失，還以為是不是顯示百分比的功能出了問題。
但檢查之後才發現，百分比其實還存在，只是沒有顯示在畫面上。

原本進度條的 .progress-bar 有設定 overflow: hidden，超出進度條範圍的內容會被隱藏。
百分比雖然看起來被移到了外側，但它其實還放在 .progress-bar 裡面，所以只要超出原本進度條的範圍，就一起被裁掉了。

換個方式處理

找到原因之後，就沒有再繼續調整百分比的位置，而是換了一個方式處理。
最後在外面增加一層 progress-wrapper，再把「進度條」和「百分比」一起放進這個外層。

這樣 .progress-bar 只需要負責原本的進度條外觀和白色填滿效果。
百分比則交給外面的 progress-wrapper 排列，不需要再硬把文字移出進度條。

progress-wrapper
├── progress-bar
└── progress-text（20%）

修改完成後，我又重新測試了幾次，百分比會跟著進度一起更新，重新整理網頁後也沒有消失。

有些問題真的要做出來才會發現

這次其實沒有遇到什麼很大的功能問題，反而都是在實際看到畫面之後，才慢慢發現原本沒有注意到的地方。

一開始覺得進度條會增加就好了，真的做出來後，才發現沒有百分比其實不夠清楚。
加上百分比之後，又覺得位置不太對，真的移出去之後，數字甚至直接消失。
整個過程反而變成：

先做出來 → 看實際結果 → 發現問題 → 再調整

最後一路測到 30%，進度條和百分比都能正常更新，重新整理之後也沒有不見。

現在除了看得到進度條往前走，也終於知道自己到底走到哪裡了