CEOS-Developers · darkyam · Sep 11, 2025 · Sep 13, 2025 · Sep 13, 2025 · KWONDU
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>to do list</title>
+    <link rel="stylesheet" href="style.css">
+    </head>
+<body>
+    <header>투두리스트</header>
+    <main id="main_contents">
+        <section>
+        <div id="date_container">
+            <button id="date_prev"><</button>
+            &nbsp;
+            <span id="date_span">날짜</span>
+            &nbsp;
+            <button id="date_next">></button>
+        </div>
+        </section>
+<section>
+        <div id="input_container">
+            <input id="todo_input" type="text" placeholder="할 일을 적어주세요."/>
+            <button id="add_button">등록</button>
+        </div>
+</section>
+<section>
+        <div id="list_container">
+            <ul id="todo_list">
+            </ul>
+        </div>
+    </main>
+</section>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,80 @@
+const todoInput = document.getElementById('todo_input');
+const addButton = document.getElementById('add_button');
+const todoList = document.getElementById('todo_list');
+const dateSpan = document.getElementById('date_span');
+const prevButton = document.getElementById('date_prev');
+const nextButton = document.getElementById('date_next');
+
+let todos = JSON.parse(localStorage.getItem('todos')) || {};
+
+// 오늘 날짜
+let currentDate = new Date();
+
+// 날짜 포멧 변환
+function formatDate(date) {
+  return date.toISOString().split('T')[0];
+}
+
+// 날짜 갱신
+function updateDate() {
+  dateSpan.textContent = formatDate(currentDate);
+}
+
+// 투두 불러오기
+function renderTodos() {
+  const selectDate = formatDate(currentDate);
+  const todayTodos = todos[selectDate] || [];
+
+  todoList.innerHTML = '';
+
+  todayTodos.forEach((todo, index) => {
+    const li = document.createElement('li');
+    li.textContent = todo;
+
+    // 삭제 버튼 추가
+    const deleteButton = document.createElement('button');
+    deleteButton.textContent = '삭제';
+    deleteButton.addEventListener('click', () => {
+      todayTodos.splice(index, 1);
+      todos[selectDate] = todayTodos;
+      localStorage.setItem('todos', JSON.stringify(todos));
+      renderTodos();
+    });
+    li.appendChild(deleteButton);
+    todoList.appendChild(li);
+  });
+}
+
+// 투두 추가
+addButton.addEventListener('click', () => {
+  const text = todoInput.value.trim();
+  if (text === '') return;
+
+  const date = formatDate(currentDate);
+  if (!todos[date]) {
+    todos[date] = [];
+  }
+  todos[date].push(text);
+
+  localStorage.setItem('todos', JSON.stringify(todos));
+  todoInput.value = '';
+  renderTodos();
+});
+
+// 전날 버튼 클릭
+prevButton.addEventListener('click', () => {
+  currentDate.setDate(currentDate.getDate() - 1);
+  updateDate();
+  renderTodos();
+});
+
+// 다음날 버튼 클릭
+nextButton.addEventListener('click', () => {
+  currentDate.setDate(currentDate.getDate() + 1);
+  updateDate();
+  renderTodos();
+});
+
+// 초기화
+updateDate();
+renderTodos();
diff --git a/style.css b/style.css
@@ -0,0 +1,36 @@
+@font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
+    font-weight: 100;
+    font-display: swap;
+}
+body {
+    font-family: 'Pretendard';
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+#main_contents{
+    display: flex;
+ flex-direction: column;
+ justify-content: center;
+    align-items: center;
+}
+#list_container{
+    border: 1px solid black;
+    padding-right: 30px;
+    margin-top: 30px;
+}
+#date_container{
+    border: 1px solid black;
+    padding: 15px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+#input_container{
+    margin-top: 15px;
+}
+#todo_input{
+    padding: 5px;
+}