CEOS-Developers · yujinnieOhh · Mar 14, 2026 · Mar 14, 2026 · Wannys26 · Mar 14, 2026
diff --git a/app.js b/app.js
@@ -0,0 +1,86 @@
+import { todoActions, todos, currentDate } from "./todoLogic.js";
+
+const dateElement = document.getElementById("today-date");
+const prevBtn = document.getElementById("prev-day");
+const nextBtn = document.getElementById("next-day");
+const todoForm = document.getElementById("todo-form");
+const todoInput = document.getElementById("todo-input");
+const todoList = document.getElementById("todo-list");
+const todoCount = document.getElementById("todo-count");
+
+//날짜
+function formatDate(date) {
+  return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
+}
+
+function getDateKey(date) {
+  return date.toISOString().split("T")[0];
+}
+
+// 렌더링
+function render() {
+  //날짜 관련
+  dateElement.innerText = formatDate(currentDate);
+  const currentKey = getDateKey(currentDate);
+  const filteredTodos = todos.filter((todo) => todo.date === currentKey);
+
+  todoList.innerHTML = "";
+
+  // map 함수 느낌
+  filteredTodos.forEach((todo) => {
+    const li = document.createElement("li");
+    li.className = `todo-item ${todo.completed ? "completed" : ""}`;
+
+    li.innerHTML = `
+      <label class="checkbox-container">
+        <input type="checkbox" class="todo-checkbox" ${
+          todo.completed ? "checked" : ""
+        }>
+        <span class="checkmark"></span>
+      </label>
+      <p class="todo-text">${todo.text}</p>
+      <button class="delete-button">삭제</button>
+    `;
+
+    // 체크박스 클릭 이벤트
+    li.querySelector(".todo-checkbox").addEventListener("change", () => {
+      todoActions.toggleTodo(todo.id);
+      render();
+    });
+
+    // 삭제 버튼 클릭 이벤트
+    li.querySelector(".delete-button").addEventListener("click", () => {
+      todoActions.deleteTodo(todo.id);
+      render();
+    });
+
+    todoList.appendChild(li);
+  });
+
+  const remaining = filteredTodos.filter((todo) => !todo.completed).length;
+  todoCount.innerText = `${remaining}개`;
+}
+
+// 날짜 이동
+prevBtn.addEventListener("click", () => {
+  todoActions.changeDate(-1); // 전날
+  render();
+});
+
+nextBtn.addEventListener("click", () => {
+  todoActions.changeDate(1); // 다음날
+  render();
+});
+
+//투두 등록
+todoForm.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const text = todoInput.value.trim();
+  if (text) {
+    todoActions.addTodo(text, getDateKey(currentDate));
+    todoInput.value = "";
+    render();
+  }
+});
+
+render();
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="kor">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>TodoList</title>
+  </head>
+  <body>
+    <header>
+      <span>To Do</span>
+      <div class="date-controller">
+        <button id="prev-day">◀</button>
+        <time id="today-date">0000년 00월 00일</time>
+        <button id="next-day">▶</button>
+      </div>
+    </header>
+    <main>
+      <form id="todo-form">
+        <input
+          type="text"
+          id="todo-input"
+          placeholder="오늘의 할일을 적어주세요!"
+          required
+        />
+        <div>
+          <span id="todo-count">0개</span>
+          <button type="submit" id="submit-button">등록</button>
+        </div>
+      </form>
+      <ul id="todo-list"></ul>
+    </main>
+
+    <script src="app.js" type="module"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,152 @@
+/* body */
+body {
+  background-color: #9bbbd4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* header */
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  gap: 20px;
+}
+
+header span {
+  font-size: 32px;
+  font-weight: bold;
+  color: #3a1d1d;
+  margin-bottom: 20px;
+}
+
+.date-controller {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+#today-date {
+  font-size: 20px;
+  font-weight: 600;
+  color: #3a1d1d;
+}
+
+.date-controller button {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #3a1d1d;
+  transition: transform 0.2s;
+}
+
+.date-controller button:hover {
+  transform: scale(1.2);
+}
+
+/* todo form */
+#todo-form {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 15px;
+  padding: 10px 20px;
+  gap: 20px;
+  width: 300px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
+
+/* todo input */
+#todo-input {
+  flex-grow: 1;
+  border: 0;
+}
+
+#submit-button {
+  background-color: #f7e600;
+  color: #3a1d1d;
+  border: 0;
+  border-radius: 10px;
+  padding: 5px 10px;
+  font-weight: 500;
+}
+
+/* todo item */
+#todo-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+/* ul 안의 li들은 기본적으로 paddiing left 40px을 가짐.. 이걸 없애줘야 가운데 정렬됨 */
+
+.todo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f7e600;
+  color: #3a1d1d;
+  border-radius: 15px;
+  margin-top: 15px;
+  padding: 10px;
+  width: 300px;
+  box-sizing: border-box;
+}
+
+.todo-item.completed .todo-text {
+  text-decoration: line-through;
+  color: gray;
+}
+
+.todo-checkbox {
+  display: none;
+}
+
+.checkmark {
+  width: 25px;
+  height: 25px;
+  background-color: white;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-right: 15px;
+  position: relative;
+}
+
+.todo-checkbox:checked + .checkmark {
+  background-color: #5bd15f;
+}
+
+.todo-checkbox:checked + .checkmark::after {
+  content: "✔";
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.todo-text {
+  flex-grow: 1;
+  text-align: center;
+  margin: 0 10px;
+  word-break: break-all;
+}
+
+.delete-button {
+  background-color: #3a1d1d;
+  color: #f7e600;
+  border: none;
+  border-radius: 12px;
+  padding: 8px 15px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.delete-button:hover {
+  background-color: black;
+}
diff --git a/todoLogic.js b/todoLogic.js
@@ -0,0 +1,34 @@
+export let todos = [];
+export let currentDate = new Date();
+
+export const todoActions = {
+  //날짜 변경
+  changeDate: (offset) => {
+    currentDate.setDate(currentDate.getDate() + offset);
+    return currentDate;
+  },
+
+  // 투두 추가
+  addTodo: (text, dateStr) => {
+    const newTodo = {
+      id: Date.now(),
+      text: text,
+      completed: false,
+      date: dateStr,
+    };
+    todos = [...todos, newTodo];
+    return todos;
+  },
+
+  deleteTodo: (id) => {
+    todos = todos.filter((todo) => todo.id !== id);
+    return todos;
+  },
+
+  toggleTodo: (id) => {
+    todos = todos.map((todo) =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    );
+    return todos;
+  },
+};