CEOS-Developers · seondal · Sep 15, 2022 · Sep 15, 2022 · Sep 15, 2022 · Sep 15, 2022
diff --git a/index.html b/index.html
@@ -8,7 +8,22 @@
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <div class="box">
+        <form id="todo-form">
+          <h2>☑️ 투두리스트 ☑️ </h2>
+          <input type="text" placeholder="할 일을 작성하세요" required maxlength="30"/>
+        </form>
+      </div>
+      <div class="box">
+        <h2>📝 할 일 목록 📝</h2>
+        <ul class="list" id="todo-list"></ul>
+      </div>
+      <div class="box">
+        <h2>💙 완료 목록 💙</h2>
+        <ul class="list" id="done-list"></ul>
+      </div>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,69 @@
+const todoForm = document.getElementById("todo-form");
+const todoInput = todoForm.querySelector("input");
+const todoList = document.getElementById("todo-list");
+const doneList = document.getElementById("done-list");
+
+todoForm.addEventListener("submit", submitTodo);
+
+function submitTodo(e) {
+  e.preventDefault();
+  createTodo(todoInput.value);
+  todoInput.value = "";
+}
+
+/* 
+코드 방식 어떤게 좋을까요.?.?
+createTodo() 처럼 변수를 생성하고 해당 변수에 대해 작업을 작성하는게 좋을지,
+completeTodo() 처럼 변수 생성을 한번에 하고 작업을 한번에 하는게 좋을지
+궁금해서 올려요!
+*/
+
+function createTodo(content) {
+  const todoSpan = document.createElement("span");
+  todoSpan.innerText = content;
+
+  const completeBtn = document.createElement("button");
+  completeBtn.innerText = "✅";
+  completeBtn.addEventListener("click", completeTodo);
+
+  const newTodoLi = document.createElement("li");
+  newTodoLi.append(todoSpan, completeBtn);
+
+  todoList.append(newTodoLi);
+}
+
+function completeTodo(e) {
+  const target = e.target.parentElement;
+
+  const doneLi = document.createElement("li");
+  const doneSpan = document.createElement("span");
+  const doneBtn = document.createElement("button");
+  const returnBtn = document.createElement("button");
+
+  doneSpan.innerText = target.querySelector("span").innerText;
+
+  doneBtn.innerText = "❌";
+  doneBtn.addEventListener("click", deleteTodo);
+
+  returnBtn.innerText = "🆙";
+  returnBtn.addEventListener("click", returnTodo);
+
+  doneLi.appendChild(doneSpan);
+  doneLi.appendChild(doneBtn);
+  doneLi.appendChild(returnBtn);
+
+  doneList.append(doneLi);
+
+  target.remove();
+}
+
+function returnTodo(e) {
+  const value = e.target.parentElement.querySelector("span").innerText;
+  createTodo(value);
+
+  deleteTodo(e);
+}
+
+function deleteTodo(e) {
+  e.target.parentElement.remove();
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,73 @@
+@font-face {
+    font-family: 'EarlyFontDiary';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EarlyFontDiary.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+html, body {
+    font-family: 'EarlyFontDiary';
+    height: 100%;
+    display: flex;
+    align-items : center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+    background-color: rgb(0, 70, 42);
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: whitesmoke;
+    width: 360px;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+.box {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    padding-bottom: 20px;
+    border-bottom: 1px solid gray;
+}
+
+form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+input {
+    box-sizing: border-box;
+    padding: 10px;
+    height: 50px;
+    width: 250px;
+    border: 1px solid lightgray;
+    border-radius: 10px;
+    box-shadow: none;
+}
+
+button {
+    border: 0;
+    background: none;
+    cursor: pointer;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    height: 200px;
+    overflow: hidden auto;
+}
+
+#done-list {
+    text-decoration: line-through;
+    color: gray;
+}