CEOS-Developers · youdame · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vanilla Todo</title>
     <link rel="stylesheet" href="./style/style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
   </head>
 
   <body class="container">
@@ -14,12 +15,19 @@ <h1>TODO-LIST</h1>
     </header>
     <main>
       <form class="input-form flex-center">
-        <input class="input" placeholder="할 일 입력하기" />
-        <button class="input-button">입력</button>
+        <div class="input-wrapper">
+          <input class="input" placeholder="할 일 입력" />
+          <button class="input-button">입력</button>
+        </div>
+        <p class="error"></p>
       </form>
-      <div class="todo-list flex-center">
-        <div class="todo">Todo</div>
-        <div class="done">Done</div>
+      <div class="list-container flex-center">
+        <ul class="list todo-list">
+          <h2 class="label">Todo</h2>
+        </ul>
+        <ul class="list done-list">
+          <h2 class="label">Done</h2>
+        </ul>
       </div>
     </main>
   </body>

diff --git a/js/script.js b/js/script.js
@@ -1,6 +1,5 @@
 import { $ } from './util.js';
 
-const dayToString = ['월', '화', '수', '목', '금', '토', '일'];
 const getTodayDate = () => {
   // 오늘 날짜
   const today = new Date();
@@ -11,8 +10,65 @@ const getTodayDate = () => {
   // 일
   const date = today.getDate().toString();
 
+  const dayToString = ['월', '화', '수', '목', '금', '토', '일'];
+
   const day = dayToString[today.getDay()];
   return `${year}년 ${month}월 ${date}일 ${day}요일`;
 };
 
-$('.date').innerText = getTodayDate();
+const addTodoList = (e) => {
+  e.preventDefault();
+
+  const inputValue = $('.input').value.trim();
+  if (!inputValue) return;
+
+  const newTodoItem = document.createElement('li');
+
+  // 동그라미 아이콘
+  const circleIcon = document.createElement('i');
+  circleIcon.classList.add('fa-regular', 'fa-circle', 'cursor-pointer');
+  newTodoItem.appendChild(circleIcon);
+
+  // 할 일 텍스트
+  const todoText = document.createTextNode(inputValue);
+  newTodoItem.appendChild(todoText);
+
+  // 쓰레기통 아이콘
+  const trashIcon = document.createElement('i');
+  trashIcon.classList.add('fa-solid', 'fa-trash-can', 'cursor-pointer');
+  newTodoItem.appendChild(trashIcon);
+
+  // 투두에 추가
+  const todoList = $('.todo-list');
+  todoList.append(newTodoItem);
+
+  circleIcon.addEventListener('click', moveToDoneList);
+  trashIcon.addEventListener('click', deleteItem);
+  $('.input').value = '';
+};
+
+const moveToDoneList = (e) => {
+  const circleIcon = e.target;
+  const clickedTodo = circleIcon.parentNode;
+
+  // 만약 .todo 안에 있는 항목이라면
+  if (clickedTodo.closest('.todo-list')) {
+    circleIcon.classList.remove('fa-circle');
+    circleIcon.classList.add('fa-check-circle');
+    $('.done-list').append(clickedTodo);
+  }
+  // 만약 .done-list 안에 있는 항목이라면
+  else if (clickedTodo.closest('.done-list')) {
+    circleIcon.classList.remove('fa-check-circle');
+    circleIcon.classList.add('fa-circle');
+    $('.todo-list').append(clickedTodo);
+  }
+};
+
+const deleteItem = (e) => {
+  const clickedTodo = e.target.parentNode;
+  clickedTodo.remove();
+};
+
+$('.date').textContent = getTodayDate();
+$('.input-form').addEventListener('submit', addTodoList);
diff --git a/style/style.css b/style/style.css
@@ -8,9 +8,17 @@ body {
 
 header {
   display: flex;
+  font-size: 2rem;
   flex-direction: column;
   gap: 1rem;
 }
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
 .container {
   display: flex;
   padding: 3rem 0;
@@ -19,26 +27,70 @@ header {
   align-items: center;
   flex-direction: column;
 }
+.input-wrapper {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+}
 
 .input-form {
   display: flex;
   width: 100%;
   padding: 1.2rem;
   border: 0.1rem solid #6d6afe;
-  gap: 2rem;
   border-radius: 1rem;
 }
 
-.todo-list {
+.list-container {
   display: flex;
   width: 100%;
   justify-content: space-between;
 }
 
 .input {
   width: 40rem;
-  height: 2rem;
+  height: 2.5rem;
+  padding: 1rem;
+  font-size: 1.5rem;
+}
+
+.input::-webkit-input-placeholder {
+  font-size: 1.5rem;
 }
+
 .input-button {
   font-size: 2rem;
 }
+
+.list {
+  display: flex;
+  width: 20rem;
+  height: 40rem;
+  padding: 2rem;
+  border: 0.1rem solid #6d6afe;
+  gap: 1rem;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 2rem;
+  overflow: auto;
+}
+
+// 스크롤바 css가 안 먹는 이유를 모르겠음..
+/* 스크롤바 막대 */
+.list::-webkit-scrollbar-thumb {
+  background-color: black; /*스크롤바의 색상*/
+}
+
+.list::-webkit-scrollbar-track {
+  background-color: yellow; /*스크롤바 트랙 색상*/
+}
+
+.label {
+  font-size: 2rem;
+}
+
+li {
+  display: flex;
+  font-size: 2rem;
+  gap: 1rem;
+}