CEOS-Developers · ryu-won · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 7, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/icon/NotCheck.svg b/icon/NotCheck.svg
diff --git a/icon/check.svg b/icon/check.svg
diff --git a/icon/checkComplete.svg b/icon/checkComplete.svg
diff --git a/index.html b/index.html
@@ -8,7 +8,25 @@
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <div class="header">✓ To Do</div>
+      <div class="todoContainer">
+        <h1 class="title">TO DO LIST</h1>
+        <p id="todayDate">9월 6일 금요일</p>
+
+        <!-- input container -->
+        <div class="WriteForm">
+          <form id="todoForm" class="writeTodoForm">
+            <img src="./icon/check.svg" class="check_icon">
+            <input type="text" class="TodoInput" placeholder="Add a To Do">
+            <button class="addBtn">Add</button>
+          </form>
+        </div>
+
+        <!-- todo list -->
+        <ul class="todoList"></ul>
+      </div>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,82 @@
-//😍CEOS 20기 프론트엔드 파이팅😍
+const addBtn = document.querySelector('.addBtn');
+const TodoInput = document.querySelector('.TodoInput');
+const todoList = document.querySelector('.todoList');
+const todoForm = document.querySelector('.writeTodoForm');
+const todoIcon = document.querySelector('.todoForm img');
+
+
+function addTodo(e) {
+    e.preventDefault();
+
+    const Todo = TodoInput.value.trim();
+
+    if (Todo) {
+        createTodoElement(Todo);
+        TodoInput.value = '';
+    } else {
+        alert('To Do를 입력하세요');
+    }
+}
+
+todoForm.addEventListener('submit', addTodo);
+
+//투두 추가 함수 
+function createTodoElement(Todo) {
+    const listItem = document.createElement('li');
+
+    // 완료 토글 아이콘
+    const toggleIcon = document.createElement('img');
+    toggleIcon.src = './icon/notCheck.svg';  
+    toggleIcon.alt = 'Toggle unComplete';
+    toggleIcon.classList.add('toggle-icon');
+
+    toggleIcon.addEventListener('click', () => {
+        listItem.classList.toggle('completed');
+        todoText.classList.toggle('completed-text');
+        if (listItem.classList.contains('completed')) {
+            toggleIcon.src = './icon/checkComplete.svg';
+            toggleIcon.alt = 'Toggle Complete';
+        } else {
+            toggleIcon.src = './icon/notCheck.svg';
+            toggleIcon.alt = 'Toggle unComplete';
+        }
+    });
+
+    // 투두 텍스트
+    const todoText = document.createElement('span');
+    todoText.textContent = Todo;
+
+    // 삭제 버튼
+    const deleteBtn = document.createElement('button');
+    deleteBtn.textContent = '삭제';
+    deleteBtn.classList.add('delete-btn');
+    deleteBtn.addEventListener('click', () => {
+        todoList.removeChild(listItem);
+    });
+
+    // HTML 구조에 맞게 요소 추가
+    listItem.appendChild(toggleIcon);
+    listItem.appendChild(todoText);
+    listItem.appendChild(deleteBtn);
+    todoList.appendChild(listItem);
+}
+
+
+// 날짜 표시 함수
+function formatDateKorean(date) {
+    const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
+    const months = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
+
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    const dayOfWeek = days[date.getDay()];
+
+    return `${month} ${day}일 ${dayOfWeek}`;
+}
+
+// 페이지 로드 시 오늘 날짜 표시
+document.addEventListener('DOMContentLoaded', () => {
+    const todayDateElement = document.getElementById('todayDate');
+    const today = new Date();
+    todayDateElement.textContent = formatDateKorean(today);
+});
diff --git a/style.css b/style.css
@@ -1 +1,44 @@
-/* 본인의 디자인 감각을 최대한 발휘해주세요! */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+ li {
+    list-style: none;
+    display: flex;
+    align-items: center;
+ } 
+
+ /**/
+
+ .todoContainer {
+    background-color: #f1f3ff;}
+header{
+    padding-left: 45px;
+
+}
-}
+    max-height: 70vh; 
+    overflow-y: auto;
+}
-}
+    max-height: 70vh; 
+    overflow-y: auto;
+}
+
+
+.completed-text {
+    text-decoration: line-through;
+    color: #888;
+}
+
+.toggle-icon, .delete-icon {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.toggle-icon {
+    margin-right: 10px;
+}
+
+.delete-icon {
+    margin-left: auto;
+}
+
+span {
+    flex-grow: 1;
+}