할일 목록 웹사이트 구축-CSS 튜토리얼-php.cn

Build a Todo List Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 Todo List 애플리케이션을 소개하게 되어 기쁩니다. 이 프로젝트는 실용적이고 널리 사용되는 도구를 사용하여 JavaScript 기술을 향상시키려는 모든 사람에게 적합합니다. 이제 막 시작했거나 기술을 향상시키려는 경우 Todo 목록을 작성하는 것은 사용자 입력 처리, 데이터 관리 및 DOM 동적으로 업데이트하는 방법을 배울 수 있는 좋은 방법입니다.

프로젝트 개요

Todo List 애플리케이션은 사용자가 작업을 효율적으로 관리할 수 있는 간단하면서도 강력한 도구입니다. 사용자가 작업을 추가, 편집, 삭제할 수 있고 완료된 것으로 표시하고 상태에 따라 작업을 필터링할 수 있는 직관적인 인터페이스가 특징입니다. 이 프로젝트는 localStorage를 사용한 이벤트 처리 및 데이터 지속성을 포함하여 웹 개발의 핵심 개념을 이해하는 좋은 방법입니다.

특징

사용자 친화적인 인터페이스: 깔끔하고 직관적인 디자인으로 작업 관리가 쉬워졌습니다.
작업 추가, 편집 및 삭제: 작업을 효과적으로 관리할 수 있는 모든 기능을 갖춘 컨트롤입니다.
작업을 완료로 표시: 작업을 완료로 쉽게 표시하고 상태에 따라 필터링합니다.
영구 데이터: 모든 작업은 localStorage에 저장되므로 페이지를 새로 고친 후에도 목록이 그대로 유지됩니다.
반응형 디자인: 레이아웃은 반응형이며 데스크톱과 모바일 장치 모두에서 원활하게 작동합니다.

사용된 기술

HTML: 웹페이지와 입력 요소를 구성합니다.
CSS: 사용자 친화적인 경험을 제공하기 위해 인터페이스 스타일을 지정합니다.
JavaScript: 작업 추가, 편집, 삭제, 필터링은 물론 localStorage의 데이터 관리를 위한 로직을 처리합니다.

프로젝트 구조

프로젝트 구조에 대한 간략한 개요는 다음과 같습니다.

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

로그인 후 복사

index.html: Todo List 애플리케이션의 HTML 구조를 포함합니다.
styles.css: CSS 스타일을 포함하여 Todo 목록의 모양과 반응성을 향상시킵니다.
script.js: 작업 관리 및 localStorage 작업을 포함한 애플리케이션 로직을 관리합니다.

설치

Todo List 프로젝트를 시작하려면 다음 단계를 따르세요.

저장소 복제:

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

로그인 후 복사

프로젝트 디렉토리 열기:
```
cd Todo-List
```
로그인 후 복사
프로젝트 실행:
- Todo List 애플리케이션 사용을 시작하려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

웹사이트를 엽니다 웹 브라우저에서
작업을 추가 입력 필드에 입력하고 "Enter"를 누르세요.
제공된 옵션을 사용하여 작업을 편집하거나 삭제하세요.
작업을 완료로 표시 해당 확인란을 선택하세요.
목록 상단에 있는 필터 옵션을 사용하여 상태별로 작업을 필터링하세요.
모든 작업을 지우고 "모두 지우기" 버튼을 사용하여 새로 시작하세요.

코드 설명

HTML

index.html 파일은 작업 추가를 위한 입력 필드, 작업 필터링을 위한 버튼, 작업을 표시하는 목록을 포함하여 Todo List 애플리케이션의 구조를 제공합니다. 간략한 개요는 다음과 같습니다.

<!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>

로그인 후 복사

CSS

styles.css 파일은 Todo List 애플리케이션의 스타일을 지정하여 깔끔하고 반응성이 뛰어난 디자인을 보장합니다. 주요 스타일은 다음과 같습니다.

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

로그인 후 복사

자바스크립트

script.js 파일에는 작업 추가, 편집, 삭제 및 필터링을 위한 논리가 포함되어 있습니다. 주요 기능의 개요는 다음과 같습니다.

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

로그인 후 복사

라이브 데모

여기에서 Todo List 애플리케이션의 라이브 데모를 확인하세요.

결론

이 Todo List 애플리케이션을 구축하는 것은 통찰력 있는 경험이었으며 JavaScript, DOM 조작 및 데이터 지속성에 대한 이해를 심화할 수 있었습니다. 이 프로젝트가 여러분이 자신만의 작업 관리 도구를 만드는 데 영감이 되기를 바랍니다. 즐거운 코딩하세요!