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

第 1 步：設(shè)置 HTML

構(gòu)建任何 Web 應(yīng)用程序的第一步是設(shè)置 HTML 結(jié)構(gòu)。 對于我們的待辦事項列表應(yīng)用程序，我們需要一些不同的元素：

添加任務(wù)的表單

用于輸入任務(wù)的輸入字段

提交任務(wù)按鈕

用于顯示任務(wù)的無序列表

下面是設(shè)置這些元素的 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 設(shè)計樣式

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

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

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

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

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

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

接下來，讓我們設(shè)計任務(wù)列表的樣式，使其看起來更現(xiàn)代、更具視覺吸引力：

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

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

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

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

第 3 步：使用 JavaScript 添加功能

現(xiàn)在我們已經(jīng)有了待辦事項列表應(yīng)用程序的基本結(jié)構(gòu)和樣式，是時候添加一些功能以使其功能齊全了。 我們將使用 JavaScript 來處理以下任務(wù)：

向列表中添加新任務(wù)

編輯現(xiàn)有任務(wù)

從列表中刪除任務(wù)

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

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

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

要向列表中添加新任務(wù)，我們需要監(jiān)聽表單上的提交事件，然后創(chuàng)建一個包含任務(wù)內(nèi)容的新列表項并將其添加到任務(wù)列表中。 這是執(zhí)行此操作的代碼：

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

  //從輸入域獲取任務(wù)內(nèi)容
  const taskContent = taskInput.value;

  // 確保任務(wù)內(nèi)容不為空
  if (taskContent.trim()) {
    // 使用任務(wù)內(nèi)容創(chuàng)建一個新的列表項
    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>
    `;

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

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

此代碼將監(jiān)聽表單上的提交事件，當(dāng)它發(fā)生時，它將從輸入字段中獲取任務(wù)內(nèi)容，并使用任務(wù)內(nèi)容創(chuàng)建一個新的列表項。 然后它將新任務(wù)項添加到任務(wù)列表并清除輸入字段。

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

編輯任務(wù)

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

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

    // 用輸入字段替換任務(wù)文本
    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>
    `;
  }
});

此代碼將監(jiān)聽編輯按鈕上的點擊事件

刪除任務(wù)

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

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

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

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

總結(jié)

在本教程中，我們學(xué)習(xí)了如何使用 HTML、CSS 和 JavaScript 從頭到尾構(gòu)建待辦事項列表應(yīng)用程序。 我們設(shè)置了 HTML 結(jié)構(gòu)，使用 Tailwind CSS 設(shè)計了應(yīng)用程序的樣式，并使用 JavaScript 添加了功能。 有了這些技能，您現(xiàn)在可以構(gòu)建自己的待辦事項列表應(yīng)用程序或自定義此應(yīng)用程序以滿足您的需求。

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