CEOS-Developers · billy0904 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/index.html b/index.html
@@ -8,7 +8,29 @@
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <img src="./src/toYesterday.svg">
+      <div class="main">
+        <p class="leftNum">할 일 n개</p>
+        <h1 class="date">날짜</h1>
+        <p class="day">요일</p>
+
+        <div class="input">
+          <form id="inputForm">
+            <input type="text" class="todoInput" placeholder="To Do 입력 후 Enter">
+          </form>
+        </div>
+
+        <ul class="todoList">
+          <li>
+            <img src="./src/${checkedStatus}.svg" class="toggleComplete">
+            <span style="color: #000000;">세오스 1주차 과제 하기</span>
+            <img src="./src/deleteBtn.svg" class="deleteBtn" style="display: none;">
+          </li>
+        </ul>
-        <ul class="todoList">
-          <li>
-            <img src="./src/${checkedStatus}.svg" class="toggleComplete">
-            <span style="color: #000000;">세오스 1주차 과제 하기</span>
-            <img src="./src/deleteBtn.svg" class="deleteBtn" style="display: none;">
-          </li>
-        </ul>
+        <ul class="todoList">
+<!-- JS에서 동적으로 추가됨 -->
+        </ul>
-        <ul class="todoList">
-          <li>
-            <img src="./src/${checkedStatus}.svg" class="toggleComplete">
-            <span style="color: #000000;">세오스 1주차 과제 하기</span>
-            <img src="./src/deleteBtn.svg" class="deleteBtn" style="display: none;">
-          </li>
-        </ul>
+        <ul class="todoList">
+<!-- JS에서 동적으로 추가됨 -->
+        </ul>
+      </div>
+      <img src="./src/toTomorrow.svg">
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,114 @@
-//😍CEOS 20기 프론트엔드 파이팅😍
+// 날짜 포맷
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString();
+  const day = date.getDate().toString();
+  return `${year}년 ${month}월 ${day}일`;
+}
+
+// 요일 포맷
+function formatDay(date) {
+  const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
+  return days[date.getDay()];
+}
+
+function dateDisplay(date) {
+  document.querySelector('.date').innerHTML = formatDate(date);
+  document.querySelector('.day').innerHTML = formatDay(date);
+}
+
+// 투두 렌더링
+function loadTodoList(date) {
+  const todoList = getTodoList(date);
+  const todoListContainer = document.querySelector('.todoList');
+  todoListContainer.innerHTML= '';
+
+  todoList.forEach((todo, index) => {
+    const todoItem = document.createElement('li');
+    const checkedStatus = todo.completed ? 'checked' : 'unchecked';
+    const textColor = todo.completed ? '#C0C0C0' : '#000000';
+
+    todoItem.innerHTML = `
+      <img src="./src/${checkedStatus}.svg" class="toggleComplete">
+      <span style="color: ${textColor};">${todo.text}</span>
+      <img src="./src/deleteBtn.svg" class="deleteBtn" style="display: none;">
+    `;
+
+    // 투두 완료
+    todoItem.querySelector('.toggleComplete').addEventListener('click', () => {
+      todo.completed = !todo.completed;
+      saveTodoList(date, todoList);
+      loadTodoList(date);
+    });
+
+    // 삭제 버튼
+    todoItem.addEventListener('mouseover', () => {
+      todoItem.querySelector('.deleteBtn').style.display = 'inline';
+    });
+
+    todoItem.addEventListener('mouseout', () => {
+      todoItem.querySelector('.deleteBtn').style.display = 'none';
+    });
+
+    todoItem.querySelector('.deleteBtn').addEventListener('click', () => {
+      todoList.splice(index, 1);
+      saveTodoList(date, todoList);
+      loadTodoList(date);
+    });
+
+    todoListContainer.appendChild(todoItem);
+  });
+
+  updateLeftNum(todoList)
+}
+
+// 투두 추가
+function addTodoItem(date, todoText) {
+  if (!todoText) return;
+
+  const todoList = getTodoList(date);
+  const newTodo = { text: todoText, completed: false };
+  todoList.push(newTodo);
+  saveTodoList(date, todoList);
+  loadTodoList(date);
+}
+
+document.querySelector('#inputForm').addEventListener('submit', (e) => {
+  e.preventDefault();
+  const todoInput = document.querySelector('.todoInput');
+  addTodoItem(currentDate, todoInput.value);
+  todoInput.value = '';
+});
+
+// 남은 할 일 개수
+function updateLeftNum(todoList) {
+  const leftNum = todoList.filter(todo => !todo.completed).length;
+  document.querySelector('.leftNum').innerHTML = `할 일 ${leftNum}개`;
+}
+
+// 날짜 이동
+let currentDate = new Date();
+dateDisplay(currentDate);
+loadTodoList(currentDate);
+
+document.querySelector('img[src*="toYesterday"]').addEventListener('click', () => {
+  currentDate.setDate(currentDate.getDate() - 1);
+  dateDisplay(currentDate);
+  loadTodoList(currentDate);
+});
+
+document.querySelector('img[src*="toTomorrow"]').addEventListener('click', () => {
+  currentDate.setDate(currentDate.getDate() + 1);
+  dateDisplay(currentDate);
+  loadTodoList(currentDate);
+});
+
+// local storage 관련 코드
+function getTodoList(date) {
+  const storedTodos = localStorage.getItem(date.toDateString());
+  return storedTodos ? JSON.parse(storedTodos) : [];
+}
+
+function saveTodoList(date, todoList) {
+  localStorage.setItem(date.toDateString(), JSON.stringify(todoList));
+}
diff --git a/src/checked.svg b/src/checked.svg
diff --git a/src/deleteBtn.svg b/src/deleteBtn.svg
diff --git a/src/toTomorrow.svg b/src/toTomorrow.svg
diff --git a/src/toYesterday.svg b/src/toYesterday.svg
diff --git a/src/unchecked.svg b/src/unchecked.svg
diff --git a/style.css b/style.css
@@ -1 +1,94 @@
-/* 본인의 디자인 감각을 최대한 발휘해주세요! */
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css");
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Pretendard";
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: #F3FAFF;
+}
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 50%;
+    min-width: 550px;
+    max-width: 650px;
+    margin: 0 auto;
+}
+
+.main {
+    text-align:left;
+    background: white;
+    padding: 7% 15% 7% 15%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    flex-grow: 1;
+    margin: 0 20px;
+}
-}
+  max-height: 100vh;
+  overflow-y: auto; 
+ }
-}
+  max-height: 100vh;
+  overflow-y: auto; 
+ }
+
+.leftNum {
+    color: #91D1FF;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.day {
+    margin-top: 8px;
+    font-weight: 500;
+}
+
+.todoList {
+    list-style: none;
+    padding: 0;
+    margin-top: 20px;
+}
+
+.todoList li {
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid #C0C0C0;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+span {
+    margin-left: 5%;
+    width: 80%;
+}
+
+.todoList img {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.todoInput {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #91D1FF;
+    border-radius: 10px;
+}
+
+form {
+    margin-top: 20px;
+}
+
+img {
+    cursor: pointer;
+}
+
+img[src*="toYesterday"],
+img[src*="toTomorrow"] {
+    width: 40px;
+    height: 40px;
+}