CEOS-Developers · SeieunYoo · Mar 17, 2022 · Mar 17, 2022 · Mar 17, 2022 · Mar 17, 2022
diff --git a/index.html b/index.html
@@ -1,14 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
-  <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" />
-  </head>
-
-  <body>
-    <div class="container"></div>
-  </body>
-  <script src="script.js"></script>
-</html>
+<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">
+    <title>To-do list</title>
+    <link rel ="stylesheet" href ="style.css"/>
+    <script src="https://kit.fontawesome.com/f9b359f751.js" crossorigin="anonymous"></script>
+
+
+
+</head>
+<body>
+    <div class ="whiteBox">
+        <div class ="todo-list-title-font">❗투두리스트❗</div>
+        <div class = "input-box">
+                <form id = "submit-form">
+                    <input id ="todo" placeholder="할 일을 입력하세요"></input>
+                    <i id ="todo-button" class="fa-solid fa-plus"></i>
+                </form>
+       </div>
+       <div class = "todo-box">
+        <div class ="title-font">✍️To Do<span id = "todo-info" >(0)</span></div>
+           <div id = "todo-list">
+           </div>
+       </div>
+       <div class = "done-box">
+           <div class ="title-font">👻Done<span id = "done-info" >(0)</span></div>
+           <div id = done-list>
+         </div>
+       </div>
+   </div>
+
+
+</body>
+
+<script src ="script.js"></script>   
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,104 @@
+document.body.style.background = `linear-gradient(to right, #c7efff, #ffccf6)`;
+
+const toDoButton = document.getElementById('todo-button');
+const toDo = document.getElementById('todo');
+const toDoList = document.getElementById('todo-list');
+const toDoInfo = document.getElementById('todo-info');
+const doneList = document.getElementById('done-list');
+const doneInfo = document.getElementById('done-info');
+const submitform = document.getElementById('submit-form');
+
+let toDoNum = 0;
+let doneNum = 0;
+
+//todo에서 삭제
+function deleteToDo(event) {
+  toDoNum <= 0 ? (toDoNum = 0) : toDoNum--;
+  toDoInfo.innerText = `(${toDoNum})`;
+
+  const deletetoDoList = event.target.parentElement;
+  deletetoDoList.remove();
+}
+
+function moveToDo(event) {
+  deleteToDo(event);
+
+  const removeList = document.createElement('div');
+  const removeItem = event.target;
+  const deleteButton = document.createElement('span');
+
+  deleteButton.innerText = '❌';
+
+  removeList.appendChild(removeItem);
+  removeList.appendChild(deleteButton);
+  doneList.appendChild(removeList);
+
+  doneNum++;
+
+  removeItem.removeEventListener('click', moveToDo);
+  removeItem.addEventListener('click', moveDoneToDo);
+  deleteButton.addEventListener('click', trashDoneToDo);
+
+  toDoInfo.innerText = `(${toDoNum})`;
+  doneInfo.innerText = `(${doneNum})`;
+}
+
+function moveDoneToDo(event) {
+  trashDoneToDo(event);
+
+  const removeList = document.createElement('div');
+  const removeItem = event.target;
+  const deleteButton = document.createElement('span');
+
+  deleteButton.innerText = '❌';
+
+  removeList.appendChild(removeItem);
+  removeList.appendChild(deleteButton);
+  toDoList.appendChild(removeList);
+
+  toDoNum++;
+
+  removeItem.removeEventListener('click', moveDoneToDo);
+  removeItem.addEventListener('click', moveToDo);
+  deleteButton.addEventListener('click', deleteToDo);
+
+  toDoInfo.innerText = `(${toDoNum})`;
+  doneInfo.innerText = `(${doneNum})`;
+}
+
+function trashDoneToDo(event) {
+  const li = event.target.parentElement;
+  li.remove();
+
+  doneNum <= 0 ? (doneNum = 0) : doneNum--;
+  doneInfo.innerText = `(${doneNum})`;
+}
+
+function toDoInput(event) {
+  event.preventDefault();
+  const newTodo = toDo.value;
+  toDo.value = '';
+  makeToDo(newTodo);
+}
+
+function makeToDo(newTodo) {
+  toDoNum++;
+  toDoInfo.innerText = `(${toDoNum})`;
+
+  const li = document.createElement('div');
+  const toDoItem = document.createElement('span');
+  const deleteButton = document.createElement('span');
+
+  toDoItem.innerText = newTodo;
+  deleteButton.innerText = '❌';
+
+  li.appendChild(toDoItem);
+  li.appendChild(deleteButton);
+  toDoList.appendChild(li);
+
+  toDoItem.addEventListener('click', moveToDo);
+  deleteButton.addEventListener('click', deleteToDo);
+}
+
+submitform.addEventListener('submit', toDoInput);
+toDoButton.addEventListener('click', toDoInput);
diff --git a/style.css b/style.css
@@ -0,0 +1,93 @@
+@font-face {
+  font-family: 'SuncheonB';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  font-family: 'SuncheonB';
+  font-size: 15px;
+  display: flex;
+  width: 100vh;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+}
+
+.whiteBox {
+  text-align: left;
+  width: 360px;
+  height: 600px;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid grey;
+  border-radius: 9px;
+  padding: 10px;
+}
+
+.title-font {
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+
+#todo {
+  width: 300px;
+  height: 50px;
+  border-radius: 9px;
+  font-family: 'SuncheonB';
+}
+
+#submit-form {
+  height: 76px;
+  margin-top: 10px;
+}
+.input-box {
+  height: 100px;
+  border-bottom: 1px solid grey;
+  text-align: center;
+}
+
+#todo-list {
+  cursor: pointer;
+  color: black;
+}
+
+#done-list {
+  color: grey;
+  text-decoration: line-through;
+  cursor: pointer;
+}
+.todo-box {
+  padding: 20px;
+  flex: 0.5;
+  border-bottom: 1px solid grey;
+
+  overflow: auto;
+}
+.todo-list-title-font {
+  font-size: 20px;
+  margin-left: 20px;
+}
+.done-box {
+  margin: 20px;
+  flex: 0.5;
+
+  overflow: auto;
+}
+
+#finish-todo {
+  margin-top: 30px;
+  font-size: 30px;
+}
+
+.hidden {
+  display: none;
+}
+
+#todo-button {
+  cursor: pointer;
+}