Bina Laman Web Senarai Todo-tutorial css-php.cn

Build a Todo List Website

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

Salin selepas log masuk

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:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Todo-List
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web anda untuk mula menggunakan aplikasi Todo List.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Tambah tugas dengan menaip dalam medan input dan menekan "Enter."
Edit atau padam tugasan menggunakan pilihan yang disediakan.
Tandai tugas sebagai selesai dengan menandakan kotak pilihan yang sepadan.
Tapis tugas mengikut statusnya menggunakan pilihan penapis di bahagian atas senarai.
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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <title>ToDo</title>
  </head>
  <body>
    <div class="main">
      <div id="logo">
        <img
          src="./logo/175e8acd1b69064c1fafe52ed5b12019-removebg-preview.png"
          alt=""
        />
      </div>
      <div class="wrapper">
        <div class="task-input">
          <input type="text" placeholder="Add a new task" />
        </div>

        <div class="controls">
          <div class="filters">
            <span id="all" class="active">All</span>
            <span id="pending">Pending</span>
            <span id="completed">Completed</span>
          </div>
          <button class="clear-btn">Clear All</button>
        </div>
        <ul class="task-box"></ul>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Salin selepas log masuk

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

Salin selepas log masuk

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 += `<li class="task">
                    <label for="${id}">
                        <input onclick="updateStatus(this)" type="checkbox" id="${id}" ${completed}>
                        <p class="${completed}">${todo.name}</p>
                    </label>
                    <div class="settings">
                        <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
                        <ul class="task-menu">
                            <li onclick='editTask(${id}, "${todo.name}")'><i class="uil uil-pen"></i>Edit</li>
                            <li onclick='deleteTask(${id}, "${filter}")'><i class="uil uil-trash"></i>Delete</li>
                        </ul>
                    </div>
                </li>`;
            }
        });
    }

    taskBox.innerHTML = liTag || `<span>You don't have any task here</span>`;
    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);
    }
});

Salin selepas log masuk

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.