iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
自我挑戰組

網站主題切換功能 系列

在這30天中,我將會使用CSS、JavaScript去嘗試製作一個可以切換主題的網站,讓使用者可以在不同的外觀風格之間進行切換。

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11:重構 JavaScript

前言 昨天,我成功實現了主題預覽功能,但在我撰寫程式碼的過程中,我發現自己花了許多時間尋找需要的程式碼,這讓我寫程式的效率變差了。所以,在我完成主題預覽功能後,...

2023-09-21 ‧ 由 May0240 分享
DAY 12

Day12:字體選擇和分支設定

前言 今天的內容比較簡單一些,我會著重於介紹明天將要使用到的字體選擇,以及如何在 GitHub 上創建新分支。 字體選擇 我為待辦事項清單網站選擇了以下幾種字體...

2023-09-22 ‧ 由 May0240 分享
DAY 13

Day13:字體切換功能

前言 在今天的任務中,我將實現字體切換功能。我會將昨天選擇的所有字體加入到網頁中,讓使用者可以自由選擇不同的字體風格。 字體切換功能 準備工作 在開始實作之前,...

2023-09-23 ‧ 由 May0240 分享
DAY 14

Day14:字體大小切換功能

前言 我今天的目標為實現切換字體大小功能。因為我有時也會在網頁中調整字體的大小,所以我也希望將此功能加到待辦事項網站上。 CSS 的 font-size 屬性...

2023-09-24 ‧ 由 May0240 分享
DAY 15

Day15:JavaScript重構和字體調整

前言 今天的目標為以下內容: 重構 JavaScript 中重複的程式碼 調整字體為 "辰宇落雁體" 時,網頁的字體大小 將程式碼合併至...

2023-09-25 ‧ 由 May0240 分享
DAY 16

Day16:保存主題設置與本地儲存(1)

前言 今天的目標是實現一個我個人認為很重要的功能,就是將使用者選擇的設定保存到本地儲存中。這樣,當我下一次開啟待辦事項網頁時,就可以直接看到我上一次選擇的主題設...

2023-09-26 ‧ 由 May0240 分享
DAY 17

Day17:保存主題設置與本地儲存(2)

前言 在今天的實作中,我將專注在完成保存主題設置的功能。昨天已經完成當我按下保存按鈕後,設定會儲存在本地儲存中,但不會自動反映在待辦事項網頁上。今天我會進一步優...

2023-09-27 ‧ 由 May0240 分享
DAY 18

Day18:整理程式碼和模組化 SCSS

前言 在開發過程中,隨著網頁功能增多,程式碼也變得越來越龐大,尤其是 SCSS 檔案。所以我決定再花費今天一天的時間將程式碼整理一遍。希望程式碼可以變得更加明瞭...

2023-09-28 ‧ 由 May0240 分享
DAY 19

Day19:為設定選項添加CSS樣式(1)

前言 今天的目標是為設定選項添加 CSS 樣式,讓使用者可以一眼看出現在選擇了什麼設定。 為已設定選項添加 CSS 樣式 首先,讓我先附上期望的結果圖: 我希望...

2023-09-29 ‧ 由 May0240 分享
DAY 20

Day20:為設定選項添加CSS樣式(2)

前言 今天的目標是解決昨天功能尚未完善的地方。就是當網頁重新啟動時,我昨天設定的效果並不會立刻顯示在網頁上,而是只有在點擊選項後才會看到設定的效果。為了解決這個...

2023-09-30 ‧ 由 May0240 分享