具有現代 UI 的互動式高級待辦事項列表

透過尖端的設計和功能邁向時尚生產力。

管理任務不一定是枯燥的。透過此互動式高級待辦事項列表，我們將現代用戶介面的美觀與強大的功能相結合，提供了一款不僅實用而且視覺上令人驚嘆的應用程式。此待辦事項清單使用 HTML、CSS 和 JavaScript 構建，將任務管理提升到新的水平。

在本文中，我們將深入探討此應用程式背後的功能、實作細節和設計選擇。

功能一覽
響應式設計：無縫適應所有螢幕尺寸，確保在桌上型電腦、平板電腦和行動裝置上的可用性。
流暢的動畫：新增、完成或刪除任務時享受動態效果。
拖放：使用由 SortableJS 提供支援的拖放功能直觀地重新排序任務。
本機儲存：即使刷新或關閉瀏覽器後任務仍然存在。
輔助功能：ARIA 屬性和鍵盤支援確保包容性。
可自訂的使用者介面：體驗令人驚嘆的漸層、發光效果和適應性強的主題，打造精緻的現代美感。
通知系統：回饋訊息讓使用者了解他們的操作，例如新增或刪除任務。
分解組件

1. HTML 結構 待辦事項清單的基礎始於乾淨且語意化的 HTML 結構：

標題：具有動畫圖示的視覺吸引力標題。
輸入部分：用於新增任務的使用者友善的輸入欄位和按鈕。
過濾器：用於在「全部」、「活動」和「已完成」任務之間切換的按鈕。
任務清單：動態

顯示任務的

元素。 這是一個片段：

<header>
  <h1>
<i class="fas fa-check-circle"></i> My To-Do List</h1>
</header>
<section class="input-section">
  <input type="text">


<ol>
<li>CSS: Modern Aesthetics
To ensure a premium look and feel, we used modern CSS techniques, including:</li>
</ol>

<p>CSS Variables: For easy theming and consistent styling.<br>
Gradients and Glow Effects: Subtle gradients and glow animations elevate the design.<br>
Keyframes: Smooth animations bring the app to life.<br>
Example of the glowing background:<br>
</p>

<pre class="brush:php;toolbar:false">.todo-container::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background: linear-gradient(45deg, var(--accent-color), #6a00f4, #ff4081, var(--accent-color));
  background-size: 400% 400%;
  filter: blur(50px);
  animation: pulseGlow 6s ease-in-out infinite;
}

結果是一個視覺上引人注目的介面，增強了使用者參與度。

1. JavaScript 功能 JavaScript 實現處理動態交互，確保無縫的使用者體驗。

新增任務：使用者可以透過輸入欄位和按鈕新增任務。按 Enter 也會觸發此操作。
任務完成：透過勾選該方塊來切換任務已完成，這會更新任務的外觀。
刪除任務：刪除具有淡出動畫的任務以實現平滑過渡。
本機儲存：任務儲存到瀏覽器的本機儲存體中，以便使用者稍後可以重新存取其清單。
新增任務的工作原理如下：

function addTask(text, completed = false) {
  const li = document.createElement('li');
  li.classList.add('task-item');
  if (completed) li.classList.add('completed');

  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.checked = completed;

  const span = document.createElement('span');
  span.classList.add('task-text');
  span.textContent = text;

  const deleteBtn = document.createElement('button');
  deleteBtn.classList.add('delete-btn');
  deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';

  li.appendChild(checkbox);
  li.appendChild(span);
  li.appendChild(deleteBtn);
  taskList.appendChild(li);

  saveTasks(); // Save tasks to localStorage
}

1. 輔助功能 包容性是這個應用程式的首要任務。我們確保：

ARIA 屬性：正確的角色和標籤使應用程式螢幕閱讀器友好。
鍵盤導航：所有互動元素可透過鍵盤對焦和使用。
例：

<header>
  <h1>
<i class="fas fa-check-circle"></i> My To-Do List</h1>
</header>
<section class="input-section">
  <input type="text">


<ol>
<li>CSS: Modern Aesthetics
To ensure a premium look and feel, we used modern CSS techniques, including:</li>
</ol>

<p>CSS Variables: For easy theming and consistent styling.<br>
Gradients and Glow Effects: Subtle gradients and glow animations elevate the design.<br>
Keyframes: Smooth animations bring the app to life.<br>
Example of the glowing background:<br>
</p>

<pre class="brush:php;toolbar:false">.todo-container::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background: linear-gradient(45deg, var(--accent-color), #6a00f4, #ff4081, var(--accent-color));
  background-size: 400% 400%;
  filter: blur(50px);
  animation: pulseGlow 6s ease-in-out infinite;
}

我們如何增強使用者體驗
拖放：透過 SortableJS 啟用，使用者可以透過拖曳任務來重新排序任務。
篩選器：快速檢視「活動」、「已完成」或「所有」任務。
本機儲存：任務在會話中持續存在，讓使用者安心。
微妙的動畫：元素平滑地過渡到位，提供精美的體驗。
自己試試看
？ CodePen 上的現場演示：https://codepen.io/HanGPIIIErr/pen/poMYBwV

結論
此互動式高級待辦事項清單結合了功能性和美觀性，提供了引人入勝的任務管理解決方案。透過整合現代網頁設計原則、可訪問性和本地存儲，我們建立了一個在形式和功能上都脫穎而出的工具。

？發現更多
探索角鬥士之戰：在 https://gladiatorsbattle.com 深入了解創新的網路體驗和史詩般的遊戲。

加入我們的社群：

推特：https://x.com/GladiatorsBT
GitHub：https://github.com/your-repo
將您的生產力和創造力提升到一個新的水平 - 無論您是在規劃任務還是創建沉浸式專案！

以上是具有現代 UI 的互動式高級待辦事項列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！