Senarai Tugasan Premium Interaktif dengan UI Moden

Satu langkah ke dalam produktiviti yang anggun dengan reka bentuk dan fungsi yang canggih.

Menguruskan tugasan tidak semestinya membosankan. Dengan Senarai Tugasan Premium Interaktif ini, kami telah menggabungkan estetika antara muka pengguna moden dengan fungsi yang berkuasa untuk menyampaikan apl yang bukan sahaja praktikal tetapi menakjubkan secara visual. Dibina dengan HTML, CSS dan JavaScript, senarai tugasan ini membawa pengurusan tugasan ke peringkat seterusnya.

Dalam artikel ini, kita akan menyelami ciri, butiran pelaksanaan dan pilihan reka bentuk di sebalik apl ini.

Ciri Sekilas Pandang
Reka Bentuk Responsif: Menyesuaikan dengan lancar pada semua saiz skrin, memastikan kebolehgunaan pada desktop, tablet dan peranti mudah alih.
Animasi Lancar: Nikmati kesan dinamik apabila menambah, menyelesaikan atau memadamkan tugasan.
Drag-and-Drop: Susun semula tugas secara intuitif menggunakan fungsi drag-and-drop yang dikuasakan oleh SortableJS.
Storan Tempatan: Tugasan berterusan walaupun selepas menyegarkan atau menutup penyemak imbas.
Kebolehcapaian: Atribut ARIA dan sokongan papan kekunci memastikan keterangkuman.
UI yang boleh disesuaikan: Alami kecerunan yang menakjubkan, kesan cahaya dan tema yang boleh disesuaikan untuk estetika moden yang digilap.
Sistem Pemberitahuan: Mesej maklum balas memastikan pengguna dimaklumkan tentang tindakan mereka, seperti menambah atau memadam tugas.
Memecahkan Komponen

1. Struktur HTML Asas senarai tugasan bermula dengan struktur HTML yang bersih dan semantik:

Tajuk: Tajuk yang menarik secara visual dipertingkatkan dengan ikon animasi.
Bahagian Input: Medan input dan butang yang mesra pengguna untuk menambah tugasan.
Penapis: Butang untuk bertukar antara tugas "Semua", "Aktif" dan "Selesai".
Senarai Tugas:

dinamik

elemen tempat tugasan dipaparkan. Berikut adalah coretan:

<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;
}

Hasilnya ialah antara muka yang menarik secara visual yang meningkatkan penglibatan pengguna.

1. Fungsi JavaScript Pelaksanaan JavaScript mengendalikan interaksi dinamik, memastikan pengalaman pengguna yang lancar.

Tambah Tugas: Pengguna boleh menambah tugas melalui medan input dan butang. Menekan Enter juga mencetuskan tindakan ini.
Penyelesaian Tugasan: Togol tugasan sebagai selesai dengan menandai kotak, yang mengemas kini penampilan tugasan.
Padam Tugasan: Mengalih keluar tugasan dengan animasi pudar untuk peralihan yang lancar.
Storan Tempatan: Tugasan disimpan ke storan setempat penyemak imbas, jadi pengguna boleh melawat semula senarai mereka kemudian.
Begini cara menambahkan tugasan berfungsi:

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. Kebolehaksesan Keterangkuman adalah keutamaan dalam apl ini. Kami memastikan:

Atribut ARIA: Peranan dan label yang betul menjadikan apl itu mesra pembaca skrin.
Navigasi Papan Kekunci: Semua elemen interaktif boleh difokuskan dan boleh digunakan melalui papan kekunci.
Contoh:

<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;
}

Cara Kami Mempertingkatkan UX
Drag-and-Drop: Didayakan dengan SortableJS, pengguna boleh menyusun semula tugas dengan menyeretnya.
Penapis: Lihat tugas "Aktif", "Selesai" atau "Semua" dengan cepat.
Storan Tempatan: Tugasan berterusan merentas sesi, memberikan ketenangan fikiran kepada pengguna.
Animasi Halus: Elemen beralih ke tempatnya dengan lancar, memberikan pengalaman yang digilap.
Cuba Sendiri
? Demo Langsung di CodePen: https://codepen.io/HanGPIIIErr/pen/poMYBwV

Kesimpulan
Senarai Tugasan Premium Interaktif ini menggabungkan fungsi dan estetika untuk menyampaikan penyelesaian pengurusan tugas yang menarik. Dengan menyepadukan prinsip reka bentuk web moden, kebolehcapaian dan storan setempat, kami telah membina alat yang menonjol dalam bentuk dan fungsi.

? Temui Lagi
Terokai Pertempuran Gladiators: Terokai pengalaman web yang inovatif dan permainan epik di https://gladiatorsbattle.com.

Sertai komuniti kami:

Twitter: https://x.com/GladiatorsBT
GitHub: https://github.com/your-repo
Tingkatkan produktiviti dan kreativiti anda ke tahap seterusnya—sama ada anda merancang tugasan atau mencipta projek yang mengasyikkan!

Atas ialah kandungan terperinci Senarai Tugasan Premium Interaktif dengan UI Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!