CEOS-Developers · hae2ni · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/index.html b/index.html
@@ -1,14 +1,24 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vanilla Todo</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./style/todo.css" />
+    <title>혜인이의 TODO LIST</title>
   </head>
 
   <body>
-    <div class="container"></div>
+    <header>
+      <h1 id="todayDateId"></h1>
+    </header>
+    <main>
+      <div class="mainWrapper">
+        <section class="todoListWrapper">
+          <ul class="todosWrapper"></ul>
+        </section>
+        <button class="newTaskBtn">New Task</button>
+      </div>
+    </main>
   </body>
-  <script src="script.js"></script>
+  <script type="module" src="./js/main.js"></script>
 </html>
diff --git a/js/constants/date.js b/js/constants/date.js
@@ -0,0 +1,8 @@
+//헤더에 해당되는 날짜 상수화 파일입니다.
+
+// 오늘 날짜 가져오기
+const currentDate = new Date();
+
+//각각의 달, 일 가져오기
+export const todayMonth = currentDate.getMonth() + 1;
+export const todayDAY = currentDate.getDate();
diff --git a/js/constants/document.js b/js/constants/document.js
@@ -0,0 +1,11 @@
+//html에 있는 dom 요소들 상수화
+
+//header dom
+export const headerToday = document.getElementById("todayDateId");
+
+//할일 dom
+export const todolistWrapper = document.querySelector(".todoListWrapper");
+export const todosWrapper = document.querySelector(".todosWrapper");
+
+//할일 추가 button
+export const newTaskBtn = document.querySelector(".newTaskBtn");
diff --git a/js/constants/newTask.js b/js/constants/newTask.js
@@ -0,0 +1,17 @@
+//new Task를 눌렀을 때 나타나는 task input
+const newTodoInputEmoji = document.createElement("p");
+newTodoInputEmoji.textContent = "✨";
+
+let todoInput = document.createElement("input");
+todoInput.className = "todoInput";
+todoInput.type = "text";
+
+const confirmBtn = document.createElement("button");
+confirmBtn.className = "confirmBtn";
+confirmBtn.textContent = "확인";
+
+let newTodoInputContainer = document.createElement("div");
+newTodoInputContainer.className = "newTodoInputContainer";
+newTodoInputContainer.append(newTodoInputEmoji, todoInput, confirmBtn);
+
+export { todoInput, confirmBtn, newTodoInputContainer };
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,7 @@
+import { headerInsertDate } from "./utils/header.js";
+import { newTaskFn } from "./utils/makeNewTask.js";
+import { showTask } from "./utils/showTask.js";
+
+newTaskFn();
+headerInsertDate();
+showTask();
diff --git a/js/utils/handleNewTasks.js b/js/utils/handleNewTasks.js
@@ -0,0 +1,48 @@
+import { todosWrapper } from "../constants/document.js";
+import { handleDeleteStoreTask } from "./storeTask.js";
+
+//element 추가 함수
+export function handleNewTask(todoId, todoValue) {
+  let doneBtnContainer = document.createElement("div");
+  doneBtnContainer.className = "doneBtnContainer";
+
+  let doneBtn = document.createElement("input");
+  doneBtn.id = todoId;
+  doneBtn.type = "checkbox";
+
+  let doneBtnLabel = document.createElement("label");
+  doneBtnLabel.className = "doneBtnLabel";
+  doneBtnLabel.htmlFor = doneBtn.id;
+
+  doneBtnContainer.append(doneBtn, doneBtnLabel);
+
+  let deleteBtn = document.createElement("button");
+  deleteBtn.className = "deleteBtn";
+  deleteBtn.type = "button";
+  deleteBtn.textContent = "🗑️";
+  //삭제
+  deleteBtn.addEventListener("click", () => {
+    onetodoWrapper.remove();
+    handleDeleteStoreTask(todoId);
+  });
+
+  let onetodoWrapper = document.createElement("li");
+  onetodoWrapper.className = "onetodoWrapper";
+
+  let todoContent = document.createElement("p");
+  todoContent.className = "todoContent";
+
+  onetodoWrapper.append(doneBtnContainer, todoContent, deleteBtn);
+
+  //할일 입력됨
+  todoContent.textContent = todoValue;
+
+  doneBtn.addEventListener("change", () => {
+    if (doneBtn.checked) {
+      todoContent.style.textDecoration = "line-through";
+    } else {
+      todoContent.style.textDecoration = "none";
+    }
+  });
+  todosWrapper.append(onetodoWrapper);
+}
diff --git a/js/utils/header.js b/js/utils/header.js
@@ -0,0 +1,7 @@
+import { todayDAY, todayMonth } from "../constants/date.js";
+import { headerToday } from "../constants/document.js";
+
+//각 날짜 불러오기
+export function headerInsertDate() {
+  headerToday.append(todayMonth, "월", "  ", todayDAY, "일");
+}
diff --git a/js/utils/makeNewTask.js b/js/utils/makeNewTask.js
@@ -0,0 +1,29 @@
+import { newTaskBtn, todolistWrapper } from "../constants/document.js";
+import { confirmBtn, newTodoInputContainer } from "../constants/newTask.js";
+import { handleNewTask } from "./handleNewTasks.js";
+import { todoInput } from "../constants/newTask.js";
+import { handleStoreTask } from "./storeTask.js";
+
+//NewTask 버튼 눌렀을 때
+function onClickNewTaskBtn() {
+  newTaskBtn.addEventListener("click", () => {
+    todolistWrapper.appendChild(newTodoInputContainer);
+  });
+}
+
+//확인 눌렀을 때
+function onClickConfirmBtn() {
+  confirmBtn.addEventListener("click", (e) => {
+    let todoId = Math.random();
+    handleNewTask(todoId, todoInput.value);
+    handleStoreTask(todoId, todoInput.value);
+    todoInput.value = "";
+  });
+}
+
+function newTaskFn() {
+  onClickNewTaskBtn();
+  onClickConfirmBtn();
+}
+
+export { newTaskFn };
diff --git a/js/utils/showTask.js b/js/utils/showTask.js
@@ -0,0 +1,13 @@
+import { handleNewTask } from "./handleNewTasks.js";
+
+export function showTask() {
+  if (localStorage.length > 0) {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      const value = localStorage.getItem(key);
+      if (value) {
+        handleNewTask(key, value);
+      }
+    }
+  }
+}
diff --git a/js/utils/storeTask.js b/js/utils/storeTask.js
@@ -0,0 +1,7 @@
+export function handleStoreTask(id, value) {
+  window.localStorage.setItem(id, value);
+}
+
+export function handleDeleteStoreTask(id) {
+  window.localStorage.removeItem(id);
+}
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
diff --git a/style/checkbox.css b/style/checkbox.css
@@ -0,0 +1,151 @@
+.doneBtnContainer {
+  box-sizing: border-box;
+  --background-color: #fff;
+  --checkbox-height: 10px;
+}
+
+@-moz-keyframes dothabottomcheck-19 {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: calc(var(--checkbox-height) / 2);
+  }
+}
+
+@-webkit-keyframes dothabottomcheck-19 {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: calc(var(--checkbox-height) / 2);
+  }
+}
+
+@keyframes dothabottomcheck-19 {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: calc(var(--checkbox-height) / 2);
+  }
+}
+
+@keyframes dothatopcheck-19 {
+  0% {
+    height: 0;
+  }
+  50% {
+    height: 0;
+  }
+  100% {
+    height: calc(var(--checkbox-height) * 1.2);
+  }
+}
+
+@-webkit-keyframes dothatopcheck-19 {
+  0% {
+    height: 0;
+  }
+  50% {
+    height: 0;
+  }
+  100% {
+    height: calc(var(--checkbox-height) * 1.2);
+  }
+}
+
+@-moz-keyframes dothatopcheck-19 {
+  0% {
+    height: 0;
+  }
+  50% {
+    height: 0;
+  }
+  100% {
+    height: calc(var(--checkbox-height) * 1.2);
+  }
+}
+
+.doneBtnContainer input[type="checkbox"] {
+  display: none;
+}
+
+.doneBtnContainer .doneBtnLabel {
+  height: var(--checkbox-height);
+  width: var(--checkbox-height);
+  background-color: transparent;
+  border: calc(var(--checkbox-height) * 0.1) solid #000;
+  border-radius: 3px;
+  position: relative;
+  display: inline-block;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-transition: border-color ease 0.2s;
+  -o-transition: border-color ease 0.2s;
+  -webkit-transition: border-color ease 0.2s;
+  transition: border-color ease 0.2s;
+  cursor: pointer;
+}
+.doneBtnContainer .doneBtnLabel::before,
+.doneBtnContainer .doneBtnLabel::after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  position: absolute;
+  height: 0;
+  width: calc(var(--checkbox-height) * 0.2);
+  background-color: #d88fd8;
+  display: inline-block;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -o-transform-origin: left top;
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  border-radius: 5px;
+  content: " ";
+  -webkit-transition: opacity ease 0.5;
+  -moz-transition: opacity ease 0.5;
+  transition: opacity ease 0.5;
+}
+.doneBtnContainer .doneBtnLabel::before {
+  top: calc(var(--checkbox-height) * 0.72);
+  left: calc(var(--checkbox-height) * 0.41);
+  box-shadow: 0 0 0 calc(var(--checkbox-height) * 0.05) var(--background-color);
+  -moz-transform: rotate(-135deg);
+  -ms-transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+.doneBtnContainer .doneBtnLabel::after {
+  top: calc(var(--checkbox-height) * 0.37);
+  left: calc(var(--checkbox-height) * 0.05);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.doneBtnContainer input[type="checkbox"]:checked + .doneBtnLabel,
+.doneBtnContainer .doneBtnLabel.checked {
+  border-color: #d88fd8;
+}
+.doneBtnContainer input[type="checkbox"]:checked + .doneBtnLabel::after,
+.doneBtnContainer .doneBtnLabel.checked::after {
+  height: calc(var(--checkbox-height) / 2);
+  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
+  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
+  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
+  animation: dothabottomcheck-19 0.2s ease 0s forwards;
+}
+.doneBtnContainer input[type="checkbox"]:checked + .doneBtnLabel::before,
+.doneBtnContainer .doneBtnLabel.checked::before {
+  height: calc(var(--checkbox-height) * 1.2);
+  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
+  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
+  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
+  animation: dothatopcheck-19 0.4s ease 0s forwards;
+}