CEOS-Developers · gustn99 · Mar 11, 2025 · Mar 11, 2025 · Mar 11, 2025 · Mar 11, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>To Do List</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="todo-wrapper">
+      <header>
+        <h1>To Do List</h1>
+      </header>
+
+      <main>
+        <div>
+          <div class="todo-input">
+            <input type="text" placeholder="할 일을 입력하세요..." />
+            <button id="append-button">추가</button>
+          </div>
+
+          <ul class="todo-list"></ul>
+        </div>
+        <div class="side"></div>
+      </main>
+    </div>
+
+    <script src="script/date.js"></script>
+    <script src="script/todo.js"></script>
+    <script src="script/modal.js"></script>
+  </body>
+</html>
diff --git a/script/date.js b/script/date.js
@@ -0,0 +1,13 @@
+const header = document.querySelector("header");
+const date = document.createElement("div");
+const now = new Date();
+
+const options = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+  weekday: "long",
+};
+
+date.innerText = now.toLocaleDateString("ko-KR", options);
+header.appendChild(date);
diff --git a/script/modal.js b/script/modal.js
@@ -0,0 +1,66 @@
+function handleUncheckedDeleteButtonClick(e) {
+  const label = e.target.previousElementSibling;
+
+  // 완료되지 않은 투두 삭제 시 확인 모달
+  if (!label.classList.contains(CHECKED_CLASS)) {
+    openModal(label);
+  }
+}
+
+function openModal(label) {
+  const modalWrapper = document.createElement("div");
+  const modal = document.createElement("div");
+  const content = document.createElement("div");
+  const buttonWrapper = document.createElement("div");
+  const cancelButton = document.createElement("button");
+  const confirmButton = document.createElement("button");
+
+  modalWrapper.classList.add("modal-wrapper");
+  modal.classList.add("modal");
+  content.classList.add("modal-content");
+  buttonWrapper.classList.add("button-wrapper");
+  cancelButton.classList.add("cancel-button");
+  confirmButton.classList.add("confirm-button");
+
+  content.innerText = "완료되지 않은 투두입니다.\n정말로 삭제할까요?";
+  cancelButton.innerText = "취소";
+  confirmButton.innerText = "삭제";
+
+  modalWrapper.addEventListener("click", handleOutsideClick);
+  cancelButton.addEventListener("click", closeModal);
+  confirmButton.addEventListener("click", () =>
+    handleConfirmButtonClick(label)
+  );
+
+  modalWrapper.appendChild(modal);
+  modal.appendChild(content);
+  modal.appendChild(buttonWrapper);
+  buttonWrapper.appendChild(cancelButton);
+  buttonWrapper.appendChild(confirmButton);
+
+  document.body.appendChild(modalWrapper);
+
+  // 엔터 입력으로 확인 버튼이 눌릴 수 있도록 포커싱
+  confirmButton.focus();
+}
+
+function closeModal() {
+  const modalWrapper = document.querySelector(".modal-wrapper");
+  modalWrapper.remove();
+}
+
+function handleOutsideClick(e) {
+  if (e.target === e.currentTarget) {
+    closeModal();
+  }
+}
+
+function handleConfirmButtonClick(label) {
+  const li = label.parentElement;
+  li.remove();
+  closeModal();
+}
+
+deleteButtons.forEach((deletebutton) =>
+  deletebutton.addEventListener("click", handleUncheckedDeleteButtonClick)
+);
diff --git a/script/todo.js b/script/todo.js
@@ -0,0 +1,78 @@
+const todoInput = document.querySelector('input[type="text"]');
+const appendButton = document.querySelector("#append-button");
+const deleteButtons = document.querySelectorAll(".delete-button");
+const checkboxes = document.querySelectorAll(".todo-item input");
+
+const CHECKED_CLASS = "checked-todo-content";
+
+function handleEnterKeyDown(e) {
+  if (e.key === "Enter") {
+    submitNewTodo();
+  }
+}
+
+function submitNewTodo() {
+  if (todoInput.value === "") return;
+
+  const ul = document.querySelector(".todo-list");
+  const nth = ul.childElementCount;
+
+  const newTodo = document.createElement("li");
+  const checkbox = document.createElement("input");
+  const content = document.createElement("label");
+  const deleteButton = document.createElement("button");
+
+  newTodo.classList.add("todo-item");
+  deleteButton.classList.add("delete-button");
+
+  checkbox.type = "checkbox";
+  checkbox.id = `todo-${nth}`;
+  content.htmlFor = `todo-${nth}`;
+  content.innerText = todoInput.value;
+  deleteButton.innerText = "삭제";
+
+  checkbox.addEventListener("change", handleCheckboxChange);
+  deleteButton.addEventListener("click", handleDeleteButtonClick);
+  deleteButton.addEventListener("click", handleUncheckedDeleteButtonClick);
+
+  newTodo.appendChild(checkbox);
+  newTodo.appendChild(content);
+  newTodo.appendChild(deleteButton);
+
+  ul.appendChild(newTodo);
+
+  todoInput.value = "";
+}
+
+function handleDeleteButtonClick(e) {
+  const label = e.target.previousElementSibling;
+
+  // 완료된 투두 삭제
+  if (label.classList.contains(CHECKED_CLASS)) {
+    const li = e.target.parentElement;
+    li.remove();
+  }
+}
+
+function handleCheckboxChange(e) {
+  const checkboxId = e.target.id;
+  const label = document.querySelector(`label[for="${checkboxId}"]`);
+
+  if (e.target.checked) {
+    label.classList.add(CHECKED_CLASS);
+  } else {
+    label.classList.remove(CHECKED_CLASS);
+  }
+}
+
+todoInput.addEventListener("keydown", handleEnterKeyDown);
+
+appendButton.addEventListener("click", submitNewTodo);
+
+deleteButtons.forEach((deletebutton) =>
+  deletebutton.addEventListener("click", handleDeleteButtonClick)
+);
+
+checkboxes.forEach((checkbox) =>
+  checkbox.addEventListener("change", handleCheckboxChange)
+);
diff --git a/style.css b/style.css
@@ -0,0 +1,170 @@
+body {
+  background-color: rgb(240, 245, 240);
+  color: darkslategrey;
+
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  justify-content: center;
+  align-items: center;
+}
+
+header {
+  width: 100%;
+  border-bottom: 2px solid darkslategrey;
+  padding-block: 10px;
+}
+
+h1 {
+  font-size: 44px;
+  margin-right: auto;
+  margin-block: 2px;
+}
+
+main {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr 150px;
+  overflow-y: scroll;
+  scrollbar-width: none;
+}
+
+li {
+  list-style: none;
+}
+
+button {
+  width: 50px;
+  height: 31px;
+  margin-left: auto;
+  border: none;
+  border-radius: 2px;
+  color: darkslategrey;
+  cursor: pointer;
+}
+
+.todo-wrapper {
+  background-color: white;
+  width: 640px;
+  height: 800px;
+  padding: 40px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border: 2px solid darkslategrey;
+  box-shadow: 0 2px 8px 0 #00000020;
+}
+
+.todo-input {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  padding: 5px 8px;
+  box-sizing: border-box;
+  border-bottom: 1.5px solid darkslategrey;
+}
+
+.todo-input input {
+  padding: 8px 4px;
+  border: none;
+  outline: none;
+}
+
+.todo-list {
+  padding: 0 8px;
+  margin: 0;
+  color: black;
+}
+
+.todo-item {
+  width: 100%;
+  height: 31px;
+  padding: 5px 0;
+  border-bottom: 1.5px solid darkslategrey;
+
+  display: grid;
+  grid-template-columns: auto 1fr 50px;
+  gap: 4px;
+  align-items: center;
+
+  font-size: small;
+}
+
+.todo-item input {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid darkslategrey;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.todo-item input:checked {
+  background-color: darkslategrey;
+}
+
+.todo-item label {
+  padding: 7px 0;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
+.checked-todo-content {
+  color: rgb(150, 150, 150);
+  text-decoration: line-through;
+}
+
+.side {
+  border-left: 2px solid darkslategrey;
+}
+
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #00000050;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  width: 300px;
+  height: 150px;
+  padding: 20px;
+  box-sizing: border-box;
+
+  border-radius: 8px;
+  background-color: white;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  font-size: small;
+  text-align: center;
+}
+
+.modal-content {
+  margin: auto 0;
+}
+
+.button-wrapper {
+  display: flex;
+  gap: 8px;
+}
+
+.confirm-button {
+  background-color: indianred;
+  color: white;
+}