DMUMC · minsik1014 · Sep 18, 2025 · Sep 24, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/week01/.DS_Store b/week01/.DS_Store
diff --git a/week01/Erlic/.DS_Store b/week01/Erlic/.DS_Store
diff --git a/week01/Erlic/dist/script.js b/week01/Erlic/dist/script.js
@@ -0,0 +1,64 @@
+"use strict";
+const todoInput = document.getElementById('todo-input');
+const todoForm = document.getElementById('todo-form');
+const todoList = document.getElementById('todo-list');
+const doneList = document.getElementById('done-list');
+let todos = [];
+let doneTasks = [];
+const renderTasks = () => {
+    todoList.innerHTML = '';
+    doneList.innerHTML = '';
+    todos.forEach((todo) => {
+        const li = createTodoElement(todo, false);
+        todoList.appendChild(li);
+    });
+    doneTasks.forEach((todo) => {
+        const li = createTodoElement(todo, true);
+        doneList.appendChild(li);
+    });
+};
+const getTodoText = () => todoInput.value.trim();
+const addTodo = (text) => {
+    todos.push({ id: Date.now(), text });
+    todoInput.value = '';
+    renderTasks();
+};
+const completeTodo = (todo) => {
+    todos = todos.filter((t) => t.id !== todo.id);
+    doneTasks.push(todo);
+    renderTasks();
+};
+const deleteTodo = (todo) => {
+    doneTasks = doneTasks.filter((t) => t.id !== todo.id);
+    renderTasks();
+};
+const createTodoElement = (todo, isDone) => {
+    const li = document.createElement('li');
+    li.classList.add('render-container_item');
+    li.textContent = todo.text;
+    const button = document.createElement('button');
+    button.classList.add('render-container_item-button');
+    if (isDone) {
+        button.textContent = '삭제';
+        button.style.backgroundColor = '#dc3545';
+    }
+    else {
+        button.textContent = '완료';
+        button.style.backgroundColor = '#28a745';
+    }
+    button.addEventListener('click', () => {
+        if (isDone)
+            deleteTodo(todo);
+        else
+            completeTodo(todo);
+    });
+    li.appendChild(button);
+    return li;
+};
+todoForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const text = getTodoText();
+    if (text)
+        addTodo(text);
+});
+renderTasks();
diff --git a/week01/Erlic/src/README.md b/week01/Erlic/src/README.md
@@ -0,0 +1 @@
+# Creating TODO with TypeScript
diff --git a/week01/Erlic/src/index.html b/week01/Erlic/src/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--css 파일 업로드 -->
+    <link rel="stylesheet" href="./style.css"/>
+    <!--js 파일 업로드-->
+    <script type="module" src="./dist/script.js" defer></script>
+    <title>UMC TODO</title>
+</head>
+<body>
+    <div class="todo-container">
+        <h1 class="todo-container__header">SIM TODO</h1>
+        <form id="todo-form" class="todo-container__form">
+            <input type="text" id="todo-input" class="todo-container__input" placeholder="할 일을 입력해주세요" required />
+            <button type="submit" class="todo-container__button">할일추가</button>
+        </form>
+        <div class="render-container">
+        <div class="render-container__section">
+            <h2 class="render-container__title">할 일</h2>
+            <ul id="todo-list" class="render-container__list"></ul>
+        </div>
+
+         <div class="render-container__section">
+            <h2 class="render-container__title">완료</h2>
+            <ul id="done-list" class="render-container__list"></ul>
+        </div>
+    </div>
+    </div>
+
+</body>
+</html>