URECA-ReCoder · jissssu · Aug 22, 2024 · Aug 25, 2024 · Aug 25, 2024 · Aug 26, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/index.html b/index.html
@@ -3,12 +3,26 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vanilla Todo</title>
+    <title>📚 TO DO LIST</title>
     <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <header>📚 투두리스트</header>
+      <div class="input-container">
+        <input type="text" placeholder="할 일을 입력하세요" />
+        <button>+</button>
+      </div>
+      <div class="todo-list-container">
+        <h2>🗒️ TO DO (0)</h2>
+        <ul class="todo-list"></ul>
+      </div>
+      <div class="done-list-container">
+        <h2>💿 DONE (0)</h2>
+        <ul class="done-list"></ul>
+      </div>
+    </div>
+    <script src="script.js"></script>
   </body>
-  <script src="script.js"></script>
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -1 +1,91 @@
-// 다들 화이팅!! ٩( *˙0˙*)۶
+const todoInput = document.querySelector(".input-container input");
+const addButton = document.querySelector(".input-container button");
+const todoList = document.querySelector(".todo-list");
+const doneList = document.querySelector(".done-list");
+const todoCount = document.querySelector(".todo-list-container h2");
+const doneCount = document.querySelector(".done-list-container h2");
+
+let todoItems = []; 
+let doneItems = []; 
+
+// 버튼 클릭 시 호출되는 이벤트 리스너를 설정
+addButton.addEventListener("click", () => {
+  const task = todoInput.value.trim();
+  if (task) {
+    addTodoItem(task);
+    todoInput.value = ""; // 입력 필드 초기화
+  }
+});
+
+// 새로운 할 일 항목을 배열에 추가
+function addTodoItem(task) {
+  todoItems.push(task);
+  renderTodoList(); // 할 일 목록을 렌더링
+}
+
+// 지정된 인덱스의 항목을 배열에서 제거
+function removeTodoItem(index) {
+  todoItems.splice(index, 1); // 인덱스에 해당하는 항목을 제거
+  renderTodoList(); // 업데이트된 할 일 목록을 렌더링
+}
+
+// 항목을 완료 목록으로 이동
+function completeTodoItem(index) {
+  const completedTask = todoItems.splice(index, 1); // 완료된 항목을 todoItems에서 제거
+  doneItems.push(completedTask[0]); // 완료된 항목을 doneItems에 추가
+  renderTodoList(); // 할 일 목록을 렌더링
+  renderDoneList(); // 완료된 항목 목록을 렌더링
+}
+
+// done 목록에서 항목을 제거
+function removeDoneItem(index) {
+  doneItems.splice(index, 1); // 인덱스에 해당하는 항목을 제거
+  renderDoneList(); // 업데이트된 완료된 항목 목록을 렌더링
+}
+
+// 할 일 목록을 화면에 렌더링
+function renderTodoList() {
+  todoList.innerHTML = ""; // 기존 목록 초기화
+  todoItems.forEach((item, index) => {
+    const li = document.createElement("li");
+    li.textContent = item;
+
+    // 삭제 버튼 생성
+    const deleteBtn = document.createElement("span");
+    deleteBtn.textContent = "🗑️";
+    deleteBtn.classList.add("delete-btn");
+    deleteBtn.addEventListener("click", () => removeTodoItem(index));
+
+    // 완료 버튼 생성
+    const completeBtn = document.createElement("span");
+    completeBtn.textContent = "✔️";
+    completeBtn.classList.add("complete-btn");
+    completeBtn.addEventListener("click", () => completeTodoItem(index));
+
+    li.appendChild(completeBtn);
+    li.appendChild(deleteBtn);
+    todoList.appendChild(li);
+  });
+  // 할 일 항목 수를 업데이트
+  todoCount.textContent = `🗒️ TO DO (${todoItems.length})`;
+}
+
+// 완료된 항목 목록을 화면에 렌더링
+function renderDoneList() {
+  doneList.innerHTML = ""; // 기존 목록 초기화
+  doneItems.forEach((item, index) => {
+    const li = document.createElement("li");
+    li.textContent = item;
+
+    // 삭제 버튼 생성
+    const deleteBtn = document.createElement("span");
+    deleteBtn.textContent = "🗑️";
+    deleteBtn.classList.add("delete-btn");
+    deleteBtn.addEventListener("click", () => removeDoneItem(index));
+
+    li.appendChild(deleteBtn);
+    doneList.appendChild(li);
+  });
+  // 완료된 항목 수를 업데이트
+  doneCount.textContent = `💿 DONE (${doneItems.length})`;
+}
diff --git a/style.css b/style.css
@@ -1 +1,74 @@
-/* 자유롭게 디자인 해 주세요! */
+/* 자유롭게 디자인 해 주세요! */
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: linear-gradient(to right, #d8bfd8, #ffb6c1);
+}
+
+.container {
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  width: 300px;
+}
+
+header {
+  font-size: 24px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.input-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+input[type="text"] {
+  flex-grow: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+button {
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.todo-list-container, .done-list-container {
+  margin-top: 20px;
+}
+
+ul {
+  list-style-type: none;
+}
+
+li {
+  display: flex;
+    justify-content: space-evenly;
+    align-items: baseline;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    margin-right: 40px;
+}
+
+li .delete-btn {
+  cursor: pointer;
-li .delete-btn {
-  cursor: pointer;
+li:hover {
+  cursor: pointer;
-li .delete-btn {
-  cursor: pointer;
+li:hover {
+  cursor: pointer;
+  color: red;
+}
+
+h2 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+