作為 Web 開發人員，我學會構建的第一批應用程序類型之一是待辦事項列表。這些簡單但功能強大的工具使我們能夠保持井井有條并專注于我們的任務，使它們成為任何希望提高工作效率的人的必備工具。在本教程中，我將引導您使用 html、css 和 JAVAScript 從頭到尾構建一個待辦事項列表應用程序。

第 1 步：設置 HTML

構建任何 Web 應用程序的第一步是設置 HTML 結構。對于我們的待辦事項列表應用程序，我們需要一些不同的元素：

添加任務的表單

用于輸入任務的輸入字段

提交任務按鈕

用于顯示任務的無序列表

下面是設置這些元素的 HTML 代碼：

<h1 class="text-2xl font-bold text-center mb-4">To-Do List</h1>

<form id="task-form" class="flex justify-center mb-4">
  <input type="text" id="task-input" class="w-full p-2 rounded-lg shadow-lg">
  <button type="submit" class="p-2 rounded-full bg-blue-500 text-white">Add</button>
</form>

<ul id="task-list" class="mx-auto w-1/2"></ul>

第 2 步：使用 CSS 設計樣式

現在我們已經設置了待辦事項列表應用程序的基本結構，是時候添加一些樣式以使其看起來更現代和更具視覺吸引力了。對于本教程，我們將使用流行的 CSS 框架 Tailwind CSS 來幫助我們快速設置應用程序的樣式。

首先，讓我們設計表單和輸入字段的樣式，使它們看起來更現代、更吸引人：

/* 給form添加間距和陰影 */
form {
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 使用一些填充和圓角邊框設計輸入字段*/
input {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}

/*使用一些填充和圓形邊框為按鈕設置樣式 */
button {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}

這將為輸入字段和按鈕添加一些填充和圓角邊框，并為表單添加框陰影。

接下來，讓我們設計任務列表的樣式，使其看起來更現代、更具視覺吸引力：

/* 在任務列表中添加一些間距和陰影*/
ul {
  margin-top: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 使用一些填充和圓角邊框設計任務項 */
li {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}

這將為任務項添加一些填充和圓角邊框，并為任務列表添加框陰影。

有了這些樣式，我們的待辦事項列表應用程序現在應該看起來更現代、更具視覺吸引力。

第 3 步：使用 JavaScript 添加功能

現在我們已經有了待辦事項列表應用程序的基本結構和樣式，是時候添加一些功能以使其功能齊全了。我們將使用 JavaScript 來處理以下任務：

向列表中添加新任務

編輯現有任務

從列表中刪除任務

首先，讓我們設置一些變量來保存對我們將與之交互的不同元素的引用：

// 獲取對表單、輸入字段和任務列表的引用
const taskForm = document.querySelector('#task-form');
const taskInput = document.querySelector('#task-input');
const taskList = document.querySelector('#task-list');

有了這些變量，我們現在可以開始向我們的待辦事項列表應用程序添加功能。

要向列表中添加新任務，我們需要監聽表單上的提交事件，然后創建一個包含任務內容的新列表項并將其添加到任務列表中。這是執行此操作的代碼：

// 提交表單時添加新任務
taskForm.addEventListener('submit', function(event) {
  event.preventDefault();

  //從輸入域獲取任務內容
  const taskContent = taskInput.value;

  // 確保任務內容不為空
  if (taskContent.trim()) {
    // 使用任務內容創建一個新的列表項
    const taskItem = document.createElement('li');
    taskItem.classList.add('task-item', 'flex', 'justify-between', 'p-2', 'rounded-lg', 'shadow-lg', 'bg-white', 'my-2');
    taskItem.innerHTML = `
      <span class="flex-1 ml-2 text-gray-800">${taskContent}</span>
      <button class="edit-btn p-1 rounded-full bg-gray-300 mr-2"><i class="fas fa-edit"></i></button>
      <button class="delete-btn p-1 rounded-full bg-red-500"><i class="fas fa-trash-alt"></i></button>
    `;

    // 將新任務項添加到任務列表
    taskList.AppendChild(taskItem);

    // 清除輸入字段
    taskForm.reset();
  }
});

此代碼將監聽表單上的提交事件，當它發生時，它將從輸入字段中獲取任務內容，并使用任務內容創建一個新的列表項。然后它將新任務項添加到任務列表并清除輸入字段。

有了這段代碼，我們現在可以通過在輸入字段中鍵入并單擊“添加”按鈕來將新任務添加到列表中。

編輯任務

為了允許用戶編輯現有任務，我們需要監聽編輯按鈕上的點擊事件，然后用輸入字段替換任務文本。然后用戶可以編輯任務文本并單擊更新按鈕以保存更改。這是執行此操作的代碼：

// 單擊編輯按鈕時編輯任務
taskList.addEventListener('click', function(event) {
  if (event.target.classList.contains('edit-btn')) {
    const taskItem = event.target.parentElement;
    const taskText = taskItem.querySelector('span').textContent;

    // 用輸入字段替換任務文本
    taskItem.innerHTML = `
      <input type="text" class="w-full p-2 rounded-lg shadow-lg" value="${taskText}">
      <button class="update-btn p-1 rounded-full bg-blue-500 text-white mr-2"><i class="fas fa-check"></i></button>
      <button class="cancel-btn p-1 rounded-full bg-red-500"><i class="fas fa-times"></i></button>
    `;
  }
});

此代碼將監聽編輯按鈕上的點擊事件

刪除任務

為了允許用戶刪除任務，我們需要監聽刪除按鈕上的點擊事件，然后從列表中刪除任務。這是執行此操作的代碼：

// 單擊刪除按鈕時刪除任務
taskList.addEventListener('click', function(event) {
  if (event.target.classList.contains('delete-btn')) {
    const taskItem = event.target.parentElement;
    taskList.removeChild(taskItem);
  }
});

此代碼將偵聽刪除按鈕上的單擊事件，并且在單擊時將從任務列表中刪除任務項。

有了這三個功能，我們的待辦事項列表應用程序現在功能齊全了！用戶可以根據需要添加新任務、編輯現有任務和刪除任務。

總結

在本教程中，我們學習了如何使用 HTML、CSS 和 JavaScript 從頭到尾構建待辦事項列表應用程序。我們設置了 HTML 結構，使用 Tailwind CSS 設計了應用程序的樣式，并使用 JavaScript 添加了功能。有了這些技能，您現在可以構建自己的待辦事項列表應用程序或自定義此應用程序以滿足您的需求。

希望本教程對您有所幫助！如果您有任何問題或意見，請隨時將其留在下面的評論部分。