透過尖端的設計和功能邁向時尚生產力。
管理任務不一定是枯燥的。透過此互動式高級待辦事項列表，我們將現代用戶介面的美觀與強大的功能相結合，提供了一款不僅實用而且視覺上令人驚嘆的應用程式。此待辦事項清單使用 HTML、CSS 和 JavaScript 構建，將任務管理提升到新的水平。
在本文中，我們將深入探討此應用程式背後的功能、實作細節和設計選擇。
功能一覽
響應式設計：無縫適應所有螢幕尺寸，確保在桌上型電腦、平板電腦和行動裝置上的可用性。
流暢的動畫：新增、完成或刪除任務時享受動態效果。
拖放：使用由 SortableJS 提供支援的拖放功能直觀地重新排序任務。
本機儲存：即使刷新或關閉瀏覽器後任務仍然存在。
輔助功能：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;
}
結果是一個視覺上引人注目的介面，增強了使用者參與度。
新增任務：使用者可以透過輸入欄位和按鈕新增任務。按 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
}
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中文網其他相關文章！
