透過 DOM 專案提升您的前端技能：新手開發人員的遊樂場
透過DOM 專案改變您的學習體驗！深入研究 20 多個使用 HTML、CSS 和 JavaScript 建構的實用專案。非常適合新手和經驗豐富的開發人員，您會發現一些可以挑戰和激勵您的東西。
以下是 DOM 專案的與眾不同之處：
邊做邊學： DOM 專案直接深入前端開發的實際面向。您將透過建立實際專案來學習，鞏固對核心概念的理解。
漸進式學習： DOM 專案提供了按難度分類的精選專案。從適合初學者的專案開始，例如“計數器”或“滾動動畫”，並逐漸進展到更高級的專案，例如“高級待辦事項”或“REST 用戶端”。
開源與協作： DOM 專案的美妙之處在於其開源特性。您不僅可以從現有專案中學習，還可以將您的創作貢獻給該平台，從而培養一個充滿活力的學習者和開發者社群。
輕鬆設定：設定 DOM 專案輕而易舉。不涉及複雜的安裝過程。只需分叉存儲庫，將其克隆到本地計算機，然後在瀏覽器中打開 index.html 文件。您已準備好開始您的程式設計冒險！
深入研究專案：
DOM Projects擁有20 多個專案，每個專案都針對特定技能和概念精心設計。以下是一些激發您興趣的詳細範例：
計數器
描述：一個簡單的計數器專案，允許使用者增加和減少螢幕上顯示的數字。它還包括一個用於將計數器重置為零的按鈕。
學習理念：
DOM 操作：了解如何使用 JavaScript 存取和修改 HTML 元素。
事件處理：了解如何擷取使用者互動（在本例中為點擊）並使用 JavaScript 觸發特定操作。
基本 JavaScript 函數：探索如何寫函數來執行遞增、遞減和重置計數器值等任務。
爸爸笑話
描述：該專案使用 JavaScript 中的非同步技術從外部 API 獲取隨機爸爸笑話。一旦檢索到，笑話就會顯示在網頁上供您娛樂。
學習理念：
非同步程式設計：了解如何處理需要時間才能完成的操作（例如從 API 取得資料）而不阻塞 JavaScript 中的主執行緒。
Fetch API：了解如何使用內建瀏覽器功能向 API 發出 HTTP 請求並擷取資料。
使用 API：探索如何與外部 API 互動以存取這些服務提供的資料或功能。
表單驗證
描述：此專案示範了使用 JavaScript 進行客戶端表單驗證。它在提交之前驗證表單中的使用者輸入。此外，驗證成功後，它會顯示成功訊息並允許使用者以唯讀格式預覽提交的資料。
學習理念：
表單驗證：了解如何使用 JavaScript 在提交之前驗證表單中的使用者輸入。這有助於確保資料完整性並防止處理無效資料。
DOM 操作：了解如何根據驗證結果存取和修改表單元素（例如顯示錯誤訊息或停用輸入欄位）。
事件處理：使用 JavaScript 擷取表單提交事件並觸發驗證邏輯。
隨機用戶
描述：此專案利用 API 產生隨機使用者資訊。它會取得姓名、電子郵件、頭像等資料，並將其顯示在網頁上，模擬隨機使用者設定檔。
學習理念：
非同步程式設計：與專案 2 (DadJokes) 類似，此專案強化了 JavaScript 中的非同步操作。
Fetch API：繼續練習使用工具向 API 發出 HTTP 請求並檢索資料。
使用 API：進一步探索與外部 API 互動以存取特定功能或資料。
摩斯電碼翻譯器
描述：此專案允許使用者在摩斯電碼和文字之間進行翻譯。使用者可以鍵入文字並查看對應的摩斯電碼，也可以輸入摩斯電碼並查看翻譯後的文字。
學習理念：
字串操作：了解如何在 JavaScript 中使用字串，包括拆分、連接和字元操作的函數，這對於摩斯電碼翻譯至關重要。
條件語句：學習如何在 JavaScript 中使用條件語句（if/else）來實現基於使用者輸入（文字或摩斯電碼）的翻譯邏輯。
基本計算機
描述：該專案使用 JavaScript 建立一個最基本的計算器應用程式。它允許使用者執行基本算術運算，例如加法、減法、乘法和除法。使用者可以輸入數字並使用螢幕上的按鈕選擇所需的操作。計算器顯示計算結果。
學習理念：
事件處理：與先前的專案類似，此專案練習捕捉使用者對計算器按鈕的點擊並觸發操作（更新計算和結果）。
DOM 操作：示範如何使用 JavaScript 更新計算器介面中顯示的數字和結果。
JavaScript 中的基本數學運算：探索使用 JavaScript 內建的數學運算子和函數來執行加法、減法、乘法和除法等計算。
普通計算機
描述：該專案建立在基本計算器的基礎上，為標準數學計算提供更全面的使用者體驗。它適合熟悉基本計算器功能的使用者。
學習理念：
基於現有專案：示範對基本計算器概念的擴展，以建立更用戶友好且功能豐富的計算器。
增強的使用者互動：引入改進使用者與計算器互動的技術，例如處理小數輸入或合併記憶體功能。
科學計算機
描述：此專案透過提供三角函數（正弦、餘弦、正切）、對數和指數等科學函數，將計算器功能提升到一個新的水平。它迎合需要高級數學計算的用戶。
學習理念：
建立複雜的應用程式：示範如何建立具有先進科學功能的更複雜的應用程式。
JavaScript 中的數學函數：介紹使用 JavaScript 內建的數學函數進行高階計算
簡單的一切應用程式
描述：該專案是一個基本的待辦事項清單應用程式。使用者可以新增任務、將其標記為已完成以及從清單中刪除它們。它演示了管理和追蹤任務。
**學習理念：
DOM 操作：此專案強化了使用 JavaScript 動態新增、刪除和修改 HTML 中的清單專案的實務。
陣列：它演示了在 JavaScript 中使用陣列儲存和管理任務資料。
使用者介面更新：探索如何根據使用者互動更新待辦事項清單的視覺表示（新增、完成、刪除任務）。
個人資料表和卡片
描述：此專案允許使用者使用表單建立動態個人資料卡。用戶可以輸入他們的訊息，提交後，將建立一個新的個人資料卡並顯示在頁面上。它還包括刪除現有個人資料卡的功能。
學習理念：
表單處理：該專案基於表單驗證（專案 3）的概念，重點關注捕獲表單資料並將其用於進一步的操作。
DOM 建立和操作：它超越了基本的 DOM 操作，根據使用者輸入動態建立新的 HTML 元素（個人資料卡）。
事件處理：繼續練習捕獲使用者與表單和刪除按鈕的互動並觸發適當的操作。
PC元件過濾
描述：該專案允許使用者根據他們的選擇過濾電腦部件。使用者可以從各種選項中進行選擇，例如 CPU 品牌、RAM 大小、顯示卡類型等，顯示的元件清單將動態更新以反映所選的篩選器。
學習理念：
DOM 操作：與先前的專案類似，此專案實踐根據使用者選擇動態更新顯示的元件清單。
陣列和資料過濾：探索使用陣列來存儲計算機部件資料，並在 JavaScript 中實現過濾邏輯以匹配用戶選擇。
使用者介面更新：重點是根據應用的過濾器更新元件列表的視覺表示。
天氣應用程式
描述：該專案是一個天氣應用程式，允許用戶透過城市名稱搜尋當前的天氣資訊。它利用外部天氣 API 來獲取資料並在螢幕上顯示溫度、濕度和天氣狀況等詳細資訊。
學習理念：
非同步程式設計：與 DadJokes（專案 2）等專案類似，此專案強化了處理非同步操作以獲取天氣資料的概念。
Fetch API：繼續練習使用工具向 API 發出 HTTP 請求並檢索天氣資料。
使用 API：進一步探索與外部 API 互動以存取天氣資訊。
感言滑塊
描述：此專案建立一個具有滑桿功能的推薦部分。它顯示使用者的引言或推薦，使用者可以使用滑桿控制來瀏覽它們。
學習理念：
DOM 操作：示範如何根據滑桿位置操作建議元素的可見性。
事件處理：捕捉使用者與滑桿控制項的互動並觸發滑動動畫。
滾動動畫
描述：此專案包含向下捲動頁面時觸發的動畫。當使用者滾動時，網頁上的不同元素會變成動畫，增加視覺趣味和互動性。
學習理念：
CSS 動畫：探索使用 CSS 動畫來建立根據滾動位置啟動的視覺效果。
用於捲動事件的 JavaScript：介紹使用 JavaScript 來偵測滾動事件並相應地觸發動畫。
搜尋字段顯示
描述：此專案利用動畫來增強使用者體驗。它會建立一個搜尋字段，在使用者互動（例如，點擊按鈕）時透過動畫顯示自身。
學習理念：
CSS 動畫：介紹使用 CSS 動畫為搜尋欄位顯示建立動態視覺效果。
事件處理：涵蓋捕獲使用者互動（例如按鈕單擊）並使用 JavaScript 觸發動畫。
問題清單及進展
描述：此專案示範了 JavaScript 中常見的 DOM 操作技術。它具有問題清單和進度指示器，進度指示器會隨著使用者回答問題而更新。
學習理念：
DOM 操作：此專案強調根據使用者與問題的互動來操作進度指示器等元素。
事件處理：捕捉使用者與問題元素的互動並觸發更新進度指示器等操作。
莫代爾
描述：該專案會建立一個模式窗口，它是一個覆蓋頁面主要內容的彈出元素。它通常用於登入表單、註冊提示或警報訊息等內容。
學習理念：
DOM 操作：重點是根據使用者互動顯示和隱藏模式視窗元素。
事件處理：捕捉觸發元素和模式的關閉按鈕上的點擊以控制其可見性。
高級待辦事項
描述：該專案基於簡單的待辦事項應用程式（專案 8）建置，提供過濾、編輯和刪除任務等高級功能。使用者可以對任務進行分類、編輯現有任務以及從清單中刪除不需要的任務。
學習理念：
基於現有專案：與科學計算器（專案 7）類似，該專案演示了對基本概念（待辦事項清單）的擴展以建立更高級的應用程式。
使用者介面更新：擴展了更新待辦事項清單的概念，包括過濾、編輯任務內容和刪除任務等功能。
復古計算器
描述：該專案實現了經典的計算器設計，並支援實體鍵盤輸入。它允許用戶使用類似於傳統計算器的佈局輸入數字並執行計算。
學習理念：
事件處理：與其他專案類似，該專案側重於捕獲用戶交互，但在本例中，它包括處理計算器按鈕上的點擊和鍵盤上的按鍵。
DOM 操作：根據使用者輸入和計算結果更新計算器顯示。
物件導向程式設計：此專案引入了 JavaScript 中物件導向程式設計 (OOP) 的概念，用於建立更模組化且可重複使用的計算器功能。
簡單的測驗應用程式
描述：該專案建立一個簡單的測驗應用程式，用戶可以在其中回答問題並查看結果。它包括每個問題的計時器，以加入時間壓力元素。
學習理念：
- DOM 操作：更新測驗介面以顯示問題、處理答案選擇並顯示最終結果
進階測驗應用程式
描述：該專案建立在簡單的測驗應用程式的基礎上，提供更多自訂選項。使用者可以在開始測驗之前設定問題數量、選擇主題並定義難度等級。
學習理念：
基於現有專案：與其他專案（科學計算器、高級待辦事項清單）類似，該專案演示了透過附加功能擴展基本概念。
使用者輸入驗證：它引入了驗證自訂選項的使用者輸入的概念（例如，確保選擇有效數量的問題）。
條件語句：在此專案中發揮更重要的作用，因為 JavaScript 邏輯需要根據使用者定義的參數來調整測驗。
採取下一步：
準備好開始您的前端開發之旅了嗎？以下是如何開始使用 DOM 專案：
造訪 GitHub 上的 DOM 專案儲存庫： https://github.com/Jisan-mia/dom-projects
瀏覽專案清單並選擇一個符合您的技能水平和興趣的專案。
請按照設定說明進行操作並在瀏覽器中開啟專案。
深入研究程式碼、實驗並學習！
DOM 專案中的每個專案都可以讓您練習編碼技能，並幫助您理解前端開發中的關鍵概念。無論您是剛起步的初學者，還是希望提高技能的經驗豐富的開發人員，DOM 專案都能滿足每個人的需求。
請記住，最好的學習方法是實踐。所以，捲起袖子，選擇一個專案，然後開始編碼吧！快樂學習！
原文出處：https://dev.to/jisan/20-dom-projects-your-frontend-breakthrough-1h8a
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式