feat: counter, filters, todos 함수 구현

02. 렌더링/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;
+};

02. 렌더링/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;
+};

02. 렌더링/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;
+};