Bina Laman Web Senarai Todo

pengenalan

Helo, pembangun! Saya sangat teruja untuk memperkenalkan projek terbaharu saya: aplikasi Todo List. Projek ini sesuai untuk sesiapa sahaja yang ingin meningkatkan kemahiran JavaScript mereka dengan mengusahakan alat yang praktikal dan digunakan secara meluas. Sama ada anda baru bermula atau ingin memperhalusi kemahiran anda, membina Senarai Tugasan ialah cara terbaik untuk belajar tentang pengendalian input pengguna, mengurus data dan mengemas kini DOM secara dinamik.

Gambaran Keseluruhan Projek

Aplikasi Todo List ialah alat yang ringkas namun berkuasa yang membolehkan pengguna mengurus tugas mereka dengan cekap. Ia menampilkan antara muka intuitif di mana pengguna boleh menambah, mengedit dan memadam tugas, menandakannya sebagai selesai dan menapis tugas berdasarkan status mereka. Projek ini ialah cara terbaik untuk memahami konsep teras pembangunan web, termasuk pengendalian acara dan ketekunan data menggunakan localStorage.

Ciri-ciri

• Antara Muka Mesra Pengguna: Reka bentuk yang bersih dan intuitif yang memudahkan pengurusan tugasan.
• Tambah, Edit dan Padam Tugas: Kawalan berfungsi sepenuhnya untuk mengurus tugas anda dengan berkesan.
• Tandai Tugasan sebagai Selesai: Tandai tugasan sebagai selesai dengan mudah dan tapiskannya berdasarkan statusnya.
• Data Gigih: Semua tugasan disimpan dalam localStorage, jadi senarai anda kekal utuh walaupun selepas memuat semula halaman.
• Reka Bentuk Responsif: Reka letak responsif dan berfungsi dengan lancar pada kedua-dua desktop dan peranti mudah alih.

Teknologi yang Digunakan

• HTML: Menstruktur halaman web dan elemen input.
• CSS: Menggayakan antara muka untuk memberikan pengalaman yang mesra pengguna.
• JavaScript: Mengendalikan logik untuk menambah, mengedit, memadam dan menapis tugas, serta mengurus data dalam localStorage.

Struktur Projek

Berikut ialah gambaran keseluruhan ringkas tentang struktur projek:

Todo-List/
├── index.html
├── styles.css
└── script.js

• index.html: Mengandungi struktur HTML untuk aplikasi Todo List.
• styles.css: Termasuk gaya CSS untuk meningkatkan penampilan dan responsif Senarai Tugasan.
• script.js: Mengurus logik aplikasi, termasuk pengurusan tugasan dan operasi LocalStorage.

Pemasangan

Untuk bermula dengan projek Todo List, ikut langkah ini:

1. Klon repositori:
   

   git clone https://github.com/abhishekgurjar-in/Todo-List.git
   

2. Buka direktori projek:
   

   cd Todo-List
   

3. Jalankan projek:

   • Buka fail index.html dalam penyemak imbas web anda untuk mula menggunakan aplikasi Todo List.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Tambah tugas dengan menaip dalam medan input dan menekan "Enter."
3. Edit atau padam tugasan menggunakan pilihan yang disediakan.
4. Tandai tugas sebagai selesai dengan menandakan kotak pilihan yang sepadan.
5. Tapis tugas mengikut statusnya menggunakan pilihan penapis di bahagian atas senarai.
6. Kosongkan semua tugasan menggunakan butang "Kosongkan Semua" untuk bermula baharu.

Penerangan Kod

HTML

Fail index.html menyediakan struktur untuk aplikasi Todo List, termasuk medan input untuk menambah tugas, butang untuk menapis tugas dan senarai untuk memaparkan tugas. Berikut ialah gambaran ringkas:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    acd8feeb3a0ea7477b979779de32785a
    26faf3d1af674280d03ba217d87e9421
    73257fa2e73da4b56055a059cf2c27e2
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
    b2386ffb911b14667cb8f0f91ea547a7ToDo6e916e0f7d1e588d4f442bf645aedb2f
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    473a967da286a3c736825b4619e7dc30
      e10ab5513b15fdfc05a0ecf2f711572e
        a683dcf6e0b5ef887480b78331d45d15
      16b28748ea4df4d9c2150843fecfba68
      c207c066cd0c19ad1de5cb71593baf42
        5b40833dfba6231bb262b7cb7d40720a
          27edb8eff74dfbe137cb327a54c09cd9
        16b28748ea4df4d9c2150843fecfba68

        fccd6c3d41d50bdb5145cd7baaf75220
          9982b5e8126d3c25c4db469c03af9785
            44a095991fd29b28f5ddd6d6881ff2deAll54bdf357c58b8a65c66d7c19c8e4d114
            1564f9c588334ed32b77da60b52f207dPending54bdf357c58b8a65c66d7c19c8e4d114
            36d459e191cfdecb91f095072ecb0270Completed54bdf357c58b8a65c66d7c19c8e4d114
          16b28748ea4df4d9c2150843fecfba68
          6f57af0aa841765e232198c3fe8dff4eClear All65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        afbc96bc18d6d08be58ec6f19ec91ba7929d1f5ca49e04fdcb27f9465b944689
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

Fail styles.css menggayakan aplikasi Todo List, memastikan reka bentuk yang bersih dan responsif. Berikut ialah beberapa gaya utama:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #fff;
}

.main {
  min-height: 85vh;
}

#logo {
  width: 100%;
  height: 7vh;
  display: flex;
  align-items: bottom;
  justify-content: center;
}

img {
  width: 300px;
  height: 222px;
}

::selection {
  color: #fff;
  background: #1e293b;
}

.wrapper {
  max-width: 405px;
  background: #64d1ef;
  margin: 137px auto;
  padding: 28px 0 30px;
  border-radius: 7px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.401);
}

.task-input {
  height: 52px;
  padding: 0 25px;
  position: relative;
}

.task-input input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  border-radius: 5px;
  padding: 0 20px 0 10px;
  border: 1px solid #7a7a7a;
}

.task-input input:focus,
.task-input input.active {
  padding-left: 10px;
  border: 2px solid #1e293b;
}

.task-input input::placeholder {
  color: #bfbfbf;
}

.controls,
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.controls {
  padding: 18px 25px;
  border-bottom: 1px solid #000000a4;
}

.filters span {
  margin: 0 8px;
  font-size: 17px;
  color: #444;
  cursor: pointer;
}

.filters span:first-child {
  margin-left: 0;
}

.filters span.active {
  color: #101216;
}

.controls .clear-btn {
  border: none;
  opacity: 0.6;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 4px;
  background: #1e293b;
  letter-spacing: 0.3px;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.clear-btn.active {
  opacity: 0.9;
  pointer-events: auto;
}

.clear-btn:active {
  transform: scale(0.93);
}

.task-box {
  margin-top: 20px;
  margin-right: 5px;
  padding: 0 20px 10px 25px;
}

.task-box.overflow {
  overflow-y: auto;
  max-height: 300px;
}

.task-box::-webkit-scrollbar {
  width: 5px;
}

.task-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.task-box::-webkit-scrollbar-thumb {
  background: #e6e6e6;
  border-radius: 25px;
}

.task-box .task {
  list-style: none;
  font-size: 17px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  align-items: flex-start;
  border-bottom: 1px solid #2c2a2a;
}

.task-box .task:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.task-box .task label {
  display: flex;
  align-items: flex-start;
}

.task-box label input {
  margin-top: 7px;
  accent-color: #1e293b;
}

.task-box label p {
  user-select: none;
  margin-left: 12px;
  word-wrap: break-word;
}

.task label p.checked {
  text-decoration: line-through;
}

.task-box .settings {
  position: relative;
}

.settings :where(i, li) {
  cursor: pointer;
}

.settings .task-menu {
  z-index: 10;
  right: -5px;
  bottom: -65px;
  padding: 5px 0;
  background: #fff;
  position: absolute;
  border-radius: 4px;
  transform: scale(0);
  transform-origin: top right;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.task-box .task:last-child .task-menu {
  bottom: 0;
  transform-origin: bottom right;
}

.task-box .task:first-child .task-menu {
  bottom: -65px;
  transform-origin: top right;
}

.task-menu.show {
  transform: scale(1);
}

.task-menu li {
  height: 25px;
  font-size: 16px;
  margin-bottom: 2px;
  padding: 17px 15px;
  cursor: pointer;
  justify-content: flex-start;
}

.task-menu li:last-child {
  margin-bottom: 0;
}

.settings li:hover {
  background: #f5f5f5;
}

.settings li i {
  padding-right: 8px;
}

.footer {
  text-align: center;
  margin: 40px;
}

@media (max-width: 400px) {
  body {
    padding: 0 10px;
  }

  .wrapper {
    padding: 20px 0;
  }

  .filters span {
    margin: 0 5px;
  }

  .task-input {
    padding: 0 20px;
  }

  .controls {
    padding: 18px 20px;
  }

  .task-box {
    margin-top: 20px;
    margin-right: 5px;
    padding: 0 15px 10px 20px;
  }

  .task label input {
    margin-top: 4px;
  }
}

JavaScript

Fail script.js mengandungi logik untuk menambah, mengedit, memadam dan menapis tugas. Berikut ialah gambaran keseluruhan fungsi utama:

const taskInput = document.querySelector(".task-input input"),
    filters = document.querySelectorAll(".filters span"),
    clearAll = document.querySelector(".clear-btn"),
    taskBox = document.querySelector(".task-box");

let editId,
    isEditTask = false,
    todos = JSON.parse(localStorage.getItem("todo-list"));

// Filter tasks based on status (all, completed, pending)
filters.forEach(btn => {
    btn.addEventListener("click", () => {
        document.querySelector("span.active").classList.remove("active");
        btn.classList.add("active");
        showTodo(btn.id);
    });
});

function showTodo(filter) {
    let liTag = "";
    if (todos) {
        todos.forEach((todo, id) => {
            let completed = todo.status == "completed" ? "checked" : "";
            if (filter == todo.status || filter == "all") {
                liTag += `e029e5d392d348318f81d313d242be24
                    5fff4821aebc6f59c799852013eb329d
                        7d31d2aac35b6939be3087c0de01d3d2
                        661f0b2a50b24b4897728ef8d70ba230${todo.name}94b3e26ee717c64999d7867364b1b4a3
                    8c1ecd4bb896b2264e0711597d40766c
                    c6db5d538232746250a0e449769cee05
                        b65d4e0c206129088f74c31fc3907be972ac96585ae54b6ae11f849d2649d9e6
                        fa22e1ce105d2afcd0970cbeebc4a51b
                            8d123e5d0648644572870b71b5ec3fceb9cf7eaaa094f1c8f9c6951a675f823d72ac96585ae54b6ae11f849d2649d9e6Editbed06894275b65c1ab86501b08a632eb
                            a97406ec15980bdd18a31642e9f618a43de93f0a9ec92f094fff8cf50de7dafd72ac96585ae54b6ae11f849d2649d9e6Deletebed06894275b65c1ab86501b08a632eb
                        929d1f5ca49e04fdcb27f9465b944689
                    16b28748ea4df4d9c2150843fecfba68
                bed06894275b65c1ab86501b08a632eb`;
            }
        });
    }

    taskBox.innerHTML = liTag || `45a2772a6b6107b401db3c9b82c049c2You don't have any task here54bdf357c58b8a65c66d7c19c8e4d114`;
    let checkTask = taskBox.querySelectorAll(".task");
    !checkTask.length ? clearAll.classList.remove("active") : clearAll.classList.add("active");
    taskBox.offsetHeight >= 300 ? taskBox.classList.add("overflow") : taskBox.classList.remove("overflow");
}

showTodo("all"); // Show all tasks by default

// Function to show the menu for task options
function showMenu(selectedTask) {
    let menuDiv = selectedTask.parentElement.lastElementChild;
    menuDiv.classList.add("show");
    document.addEventListener("click", e => {
        if (e.target.tagName != "I" || e.target != selectedTask) {
            menuDiv.classList.remove("show");
        }
    });
}

// Function to update the status of a task (completed or pending)
function updateStatus(selectedTask) {
    let taskName = selectedTask.parentElement.lastElementChild;
    if (selectedTask.checked) {
        taskName.classList.add("checked");
        todos[selectedTask.id].status = "completed";
    } else {
        taskName.classList.remove("checked");
        todos[selectedTask.id].status = "pending";
    }
    localStorage.setItem("todo-list", JSON.stringify(todos));
}

// Function to edit an existing task
function editTask(taskId, textName) {
    editId = taskId;
    isEditTask = true;
    taskInput.value = textName;
    taskInput.focus();
    taskInput.classList.add("active");
}

// Function to delete a task
function deleteTask(deleteId, filter) {
    isEditTask = false;
    todos.splice(deleteId, 1);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo(filter);
}

// Clear all tasks
clearAll.addEventListener("click", () => {
    isEditTask = false;
    todos.splice(0, todos.length);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo();
});

// Add a new task or update an existing one
taskInput.addEventListener("keyup", e => {
    let userTask = taskInput.value.trim();
    if (e.key == "Enter" && userTask) {
        if (!isEditTask) {
            todos = !todos ? [] : todos;
            let taskInfo = { name: userTask, status: "pending" };
            todos.push(taskInfo);
        } else {
            isEditTask = false;
            todos[editId].name = userTask;
        }
        taskInput.value = "";
        localStorage.setItem("todo-list", JSON.stringify(todos));
        showTodo(document.querySelector("span.active").id);
    }
});

Demo Langsung

Lihat demo langsung aplikasi Todo List di sini.

Kesimpulan

Membina aplikasi Todo List ini merupakan pengalaman yang bernas, membolehkan saya memperdalam pemahaman saya tentang JavaScript, manipulasi DOM dan ketekunan data. Saya harap projek ini menjadi inspirasi untuk anda mencipta alatan pengurusan tugas anda sendiri. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada usaha berterusan saya untuk menguasai pembangunan web, memfokuskan pada aplikasi praktikal yang meningkatkan produktiviti harian.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Senarai Todo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!