STEP1. 투두리스트의 기본 디자인과 기능 완성하기

주요 기능

투두리스트 추가하기
투두리스트 수정, 삭제
체크한 투두리스트 줄 긋기

디렉터리 구조

my-todo-list/
│
├── src/
│ ├── js/
│ │ └── main.js
│ ├── css/
│ │ └── main.css
│ └── assets/
│
│
├── index.html
├── README.md
└── package.json

소스파일

index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Todo List</title>

  <link rel="stylesheet" href="./src/css/main.css" />

  <script defer src="./src/js/main.js"></script>

</head>

<body>
  <div class="todo-wrapper">
    <header class="todo-header">
      <h1 class="todo-title">TODO</h1>

    </header>
    <div class="todo-main">
      <input type="text" class="todo-input">

      <div class="todo-board">
        <ul class="todo-list">
          <!-- 추가된 투두리스트 영역 -->
        </ul>
        <button class="todo-deleteBtn">삭제</button>
      </div>
    </div>

  </div>


</body>

</html>

main.css

body {
  font-family: sans-serif;
}

header img {
  position: relative;
  width: auto;
  left: -100px;
  top: 100px;
}

.todo-wrapper {
  position: relative;
  width: 1100px;
  height: 100vh;
  margin: 0 auto;
}
.todo-header {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 50px;
}
.todo-title {
  width: 100px;
  margin-left: calc((1100px - 100px) / 2);
}
.todo-main {
  position: absolute;
  width: 50%;
  /* height: 60%; */
  top: 175px;
  left: 25%;
  border: 3px solid #333;
  border-radius: 10px;
  box-sizing: border-box;
}
.todo-input {
  font-size: 20px;
  height: 2.5rem;
  width: 100%;
  outline: none;
  box-sizing: border-box;
  border: 0;
  border-bottom: 3px solid #333;
  text-align: center;
  font-weight: 700;
  background-color: beige;
  border-radius: 7px 7px 0px 0px;
}
.todo-list {
  font-size: 20px;
  border-bottom: 2px;
  font-weight: 700;
  list-style: none;
  padding: 0;
  margin-top: 0px;
  margin-bottom: 0px;
}
.todo-list li {
  height: 2rem;
  border-bottom: 3px dashed #333;
  margin-top: 10px;
}
.todo-list li .checkBox {
  /* display: none; */
}
.todo-list li label {
  display: inline-block;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: 0.5s;
}
.todo-list li span {
  margin-left: 10px;
}
.todo-list li .editInput {
  font-size: 20px;
  height: 2rem;
  width: 90%;
  outline: none;
  box-sizing: border-box;
  border: 0;
  margin-left: 10px;
  text-align: left;
  font-weight: 700;
}
.todo-deleteBtn {
  margin: 5px 0px 5px 10px;
  border-radius: 4px;
  background-color: #d9aa8a;
  border: 1px solid #333;
  box-shadow: 3px 3px 3px black;
  cursor: pointer;
  transition: 0.3s;
}
.todo-deleteBtn:active {
  margin-top: 5px;
  margin-left: 15px;

  box-shadow: none;
}

주요 동작 코드

투두리스트 추가
투두리스트 더블클릭으로 수정하기
체크박스 체크 시 줄 긋기
체크한 투두리스트 삭제하기

const todoInput = document.querySelector(".todo-input");
const todoList = document.querySelector(".todo-list");
const todoDeleteBtn = document.querySelector(".todo-deleteBtn");

todoInput.addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    appendTodo(); //투두리스트 추가
    todoInput.value = ""; //인풋창 비워주기
  }
});

// 투두리스트 추가 함수
function appendTodo(todo) {
  if (todoInput.value === "") {
    alert("내용을 입력해주세요.");
    return;
  }
  const newTodoItem = document.createElement("li");
  newTodoItem.addEventListener("dblclick", function () {
    editTodo(newTodoItem, todoText);
  });

  const todoText = document.createElement("span");
  todoText.textContent = todoInput.value;

  const todoCheckBox = document.createElement("input");
  todoCheckBox.classList.add("checkBox");
  todoCheckBox.type = "checkbox";
  todoCheckBox.addEventListener("change", function () {
    todoText.style.textDecoration = todoCheckBox.checked
      ? "line-through"
      : "none";
  });

  todoDeleteBtn.addEventListener("click", function () {
    const checkBoxes = document.querySelectorAll(".todo-list .checkBox");
    checkBoxes.forEach(function (checkBox) {
      if (checkBox.checked) {
        todoList.removeChild(checkBox.parentElement);
      }
    });
  });

  newTodoItem.appendChild(todoCheckBox);
  newTodoItem.appendChild(todoText);

  todoList.appendChild(newTodoItem);
}

// 할 일 수정 함수
function editTodo(todoItem, todoText) {
  const editInput = document.createElement("input");
  editInput.classList.add("editInput");
  editInput.type = "text";
  editInput.value = todoText.textContent;
  editInput.addEventListener("blur", function () {
    todoText.textContent = editInput.value;
    todoItem.replaceChild(todoText, editInput);
  });
  editInput.addEventListener("keyup", function (event) {
    if (event.key === "Enter") {
      editInput.blur(); // Enter 키를 누르면 수정 완료
    }
  });

  todoItem.replaceChild(editInput, todoText);
  editInput.focus();
}

JS로 투두리스트 만들기에 첫 발을 내디뎠는데 작은 프로젝트이지만 생각보다 많은 노력이 소요되었다.

앞으로 부족한 디자인 수정과 투두리스트를 저장하는 기능을 추가할 예정이다.

추가적으로 피드백 댓글 환영합니다!

'Frontend > JS' 카테고리의 다른 글

JS 엔진의 구조와 작동원리 (JS 런타임 환경까지) (0)	2024.08.16
JS 동기/비동기 처리 - 콜백부터 async/await (0)	2024.08.14
JS 함수 (0)	2024.03.06
JS 연산자 (0)	2024.03.06
JS 데이터 타입 (0)	2024.03.06

JavaScript로 간단한 투두리스트 만들기

STEP1. 투두리스트의 기본 디자인과 기능 완성하기

주요 기능

디렉터리 구조

소스파일

index.html

main.css

주요 동작 코드

'Frontend > JS' 카테고리의 다른 글

티스토리툴바