鐵人檔案
作為程式初學者，常常無法精準預估完成作業或階段性任務所需的時間。市面上的計時器大多以「強制專注」為主，有時反而會在進入心流狀態時被番茄鐘硬生生打斷。因此，我希望能打造一款專為紀錄「實際耗時」設計的任務計時器，未來能更精準地評估專案時程。
本系列將以 Local-first（在地優先） 為核心，完全不依賴後端伺服器，並運用目前學到的初階前端技術，挑戰打造一個真正解決自身痛點的產品。
30 天內容將涵蓋完整的產品開發流程：從UI/UX設計、介面切版、前端邏輯、數據視覺化。希望這不只是一系列記錄文章，更是未來陪伴自己持續成長與學習的利器！
今天我們要針對任務清單上半部的「管理主任務」、「新增子任務」的操作按鈕進行實作，這邊會使用到的元件是 Modal（彈跳視窗 / 對話框）。 1. 先來認識...
這篇要來整理之前還沒有講到，但很常見非常實用的Bootstrap 元件：Dropdown（下拉選單） 與 Input Group（輸入框組）。 1. Drop...
完成切版之後，接下來要進入 JavaScript 實作。 在讓計時器動起來之前，先做一些準備： 建立與載入 all.js DOM 元素選取與狀態變數初始...
在準備好了時間格式化工具與變數之後，接下來要解決計時器的關鍵問題：如何讓數字每秒自動加 1 並更新到畫面上？ 我們可以使用JavaScript 的原生函式－ s...
前兩天的實作中，成功地讓計時器開始動起來，但當按下開始計時後，按鈕的UI卻沒有變化，今天就要來完成這一部分：點擊「開始」時動態隱藏/顯示按鈕，並實現「暫停/繼續...
這幾天的功能實作中，順利完成了計時器的啟動、按鈕UI的切換，一切看起來都在完美運作。但我發現如果把網頁切換到別的分頁，計時器似乎變慢了。 所以這篇要來找出為什麼...
做好計時器邏輯之後，我們要來實作計時結束後的互動——當使用者按下停止計時時，自動彈出 Modal 彈窗，讓使用者編輯當次備註、勾選任務完成狀態，並提供 「儲存紀...
在前幾天的實作中，已經完成了計時器核心運作與計時結束後的紀錄 Modal。但在實際的應用場景中，「計時」並非單獨存在，它必須精確地隸屬於某個「主任務」下的「子任...
接下來我們要處理任務的狀態（未開始、進行中、已完成）。 使用者建立任務時，會自動分類成「未開始」；當該子任務有計時紀錄時，會自動轉為「進行中」；只有已完成是需要...
完成了狀態管理與 Modal 互動視窗後，接下來的目標是將任務清單（Accordion 摺疊區塊）動態化，讓主任務與子任務的新增、修改、刪除（CRUD）能即時反...
