From a3972cae970a0d3321b3ce0bbc6f928676d48f31 Mon Sep 17 00:00:00 2001
From: 2wndrhs <2wndrhs@gmail.com>
Date: Thu, 11 Jan 2024 02:24:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20`counter`,=20`filters`,=20`todos`=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02/view/counter.js"                       | 16 +++++++++++++
 .../02/view/filters.js"                       | 11 +++++++++
 .../02/view/todos.js"                         | 23 +++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 "02. \353\240\214\353\215\224\353\247\201/02/view/counter.js"
 create mode 100644 "02. \353\240\214\353\215\224\353\247\201/02/view/filters.js"
 create mode 100644 "02. \353\240\214\353\215\224\353\247\201/02/view/todos.js"

diff --git "a/02. \353\240\214\353\215\224\353\247\201/02/view/counter.js" "b/02. \353\240\214\353\215\224\353\247\201/02/view/counter.js"
new file mode 100644
index 0000000..ae9c67e
--- /dev/null
+++ "b/02. \353\240\214\353\215\224\353\247\201/02/view/counter.js"	
@@ -0,0 +1,16 @@
+const getTodoCount = (todos) => {
+  const notCompleted = todos.filter((todo) => !todo.completed);
+
+  const { length } = notCompleted;
+  if (length === 1) {
+    return '1 Item left';
+  }
+
+  return `${length} Items left`;
+};
+
+export default (targetElement, { todos }) => {
+  const newCounter = targetElement.cloneNode(true);
+  newCounter.textContent = getTodoCount(todos);
+  return newCounter;
+};
diff --git "a/02. \353\240\214\353\215\224\353\247\201/02/view/filters.js" "b/02. \353\240\214\353\215\224\353\247\201/02/view/filters.js"
new file mode 100644
index 0000000..4d12b7a
--- /dev/null
+++ "b/02. \353\240\214\353\215\224\353\247\201/02/view/filters.js"	
@@ -0,0 +1,11 @@
+export default (targetElement, { currentFilter }) => {
+  const newCounter = targetElement.cloneNode(true);
+  Array.from(newCounter.querySelectorAll("li a")).forEach((a) => {
+    if (a.textContent === currentFilter) {
+      a.classList.add("selected");
+    } else {
+      a.classList.remove("selected");
+    }
+  });
+  return newCounter;
+};
diff --git "a/02. \353\240\214\353\215\224\353\247\201/02/view/todos.js" "b/02. \353\240\214\353\215\224\353\247\201/02/view/todos.js"
new file mode 100644
index 0000000..b6d358c
--- /dev/null
+++ "b/02. \353\240\214\353\215\224\353\247\201/02/view/todos.js"	
@@ -0,0 +1,23 @@
+const getTodoElement = (todo) => {
+  const { text, completed } = todo;
+
+  return `
+      <li ${completed ? 'class="completed"' : ""}>
+        <div class="view">
+          <input 
+            ${completed ? "checked" : ""}
+            class="toggle" 
+            type="checkbox">
+          <label>${text}</label>
+          <button class="destroy"></button>
+        </div>
+        <input class="edit" value="${text}">
+      </li>`;
+};
+
+export default (targetElement, { todos }) => {
+  const newTodoList = targetElement.cloneNode(true);
+  const todosElements = todos.map(getTodoElement).join("");
+  newTodoList.innerHTML = todosElements;
+  return newTodoList;
+};