今天是第一部分的結尾，第一部分我著重在「準備和基礎學習」，為未來的實作打下一點基礎，而第七天的進度是回顧第一週的學習內容，確保對每個知識都有一定的掌握。

回顧內容

1.HTML

• <div>：分組元素，例如前幾天記帳小工具的輸入和輸出區域使用了這個分組元素。
• <input>：創建輸入框，讓使用者能輸入支出類別、金額和備註。
• <ul>：創建一個無序列表的容器（用在不需要強調項目順序時）。
• <li>：在無序列表裡面新增項目。
  *補充：<ol>是有序列表。

<ul>
	<li>第一項</li>
	<li>第二項</li>
	<li>第三項</li>
</ul>

• <id=”expense-list>：標識元素，讓JavaScript可以使用。

2.CSS

• 基本樣式：CSS可以幫助我們設置網頁的背景顏色、字體和按鈕外觀等。
• CSS選擇器：選擇器可以告訴瀏覽器，哪些HTML元素應用指定樣式。有class選擇器和id選擇器，class選擇器用來選擇所有帶有相同class屬性的HTML元素，這個方便將同一種樣式應用在多個元素（語法：.className）。id選擇器則是選擇帶有指定id的唯一元素，所以只能用在一個元素上（語法：#idName）。

3.JavaScript

• 設計函數：用function處理使用者的輸入，以及動態改變頁面。
• DOM操作：當在瀏覽器打開一個網頁時，HTLM檔會被解析成一個DOM樹，這個樹表示了HTML的結構，而每個元素都是一個節點。這讓原本HTML檔被轉換成DOM後，能透過JavaScript動態修改網頁內容。所以像之前使用到的document.getElementById()和creatElement()等都是DOM操作。

4.專案結構

• 各個檔案有邏輯的組織，才能讓維護更清晰方便，也能減少錯誤風險。

進一步思考

未來還希望這個記帳小工具能加上一些其他功能：

• 總金額
• 刪除某指定記錄
• 收入
• 預算模式
• 圖表（圓餅圖）顯示
• 使用者反饋

今天做了一點回顧，來鞏固之前學習到的概念，為未來更進階的功能做準備。明天將開始進行到第二階段「進階功能與互動」，加油！！！

參考資料

https://chatgpt.com/