CEOS-Developers · dragunshin · Sep 12, 2025 · Sep 12, 2025 · Sep 12, 2025 · Sep 13, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Vanilla Todo</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div class="app">
+            <header>
+                <h1>To Do List</h1>
+                <br /></br>
+                <p id="date"></p>
+                <h4><span id="currentTask">0</span> tasks</h4>
+                <br /></br>
+                <input type="date" id="userDate">
+            </header>
+        </div>
+
+
+        <div class="inputContainer">
+            <input type="text" id="taskInput" placeholder="Add a new task">
+            <button id="addTaskButton">enter
+                <!--<i class="fa fa-plus"></i>-->
+            </button>
+
+        </div>
+
+        <div class="taskList">
+            <ul id="taskList"></ul>
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,106 @@
+const dateElement = document.getElementById('date');
+const taskInput = document.getElementById('taskInput');
+const addTaskButton = document.getElementById('addTaskButton');
+const taskList = document.getElementById('taskList');
+const currentTask = document.getElementById('currentTask');
+const userDate = document.getElementById('userDate');
+
+let todosByDate = JSON.parse(localStorage.getItem('todos') || '{}');
+
+function renderTasks() {
+    const selectedDate = userDate.value;
+
+    taskList.innerHTML = "";
+
+    const tasksForSelectedDate = todosByDate[selectedDate] || [];
+
+    tasksForSelectedDate.forEach((task, index) => {
+        const li = document.createElement('li');
+
+        if(task.completed){
+            li.classList.add('completed');
+        }
+
+        li.dataset.index = index;
+
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.checked = task.completed;
+
+        const span = document.createElement('span');
+        span.textContent = task.text;
+
+        const deleteButton = document.createElement('button');
+        deleteButton.textContent = 'Delete';
+
+        li.appendChild(checkbox);
+        li.appendChild(span);
+        li.appendChild(deleteButton);
+        taskList.appendChild(li);
+        });
+
+    updateTaskCount();
+}
+
+function updateTaskCount() {
+    const selectedDate = userDate.value;
+    const tasksSelectedDate = todosByDate[selectedDate] || [];
+
+    const uncompletedTasks = tasksSelectedDate.filter(task => !task.completed).length;
+    currentTask.textContent = uncompletedTasks;
+}
+
+function addTask() {
+    const taskText = taskInput.value.trim();
+    const selectedDate = userDate.value;
+
+    if (!selectedDate) {
+        alert('Select a date.');
+        return;
+    }
+    if (taskText === '') {
+        alert('Please enter a task.');
+        return;
+    }
+    // 날짜의 배열이 없으면 빈 배열 생성
+    if (!todosByDate[selectedDate]) {
+        todosByDate[selectedDate] = [];
+    }
+    todosByDate[selectedDate].push({text: taskText, completed: false});
+
+    taskInput.value = "";
+
+    saveData();
+    renderTasks();
+}
+
+function saveData() {
+    localStorage.setItem('todos', JSON.stringify(todosByDate));
+}
+
+addTaskButton.addEventListener('click', addTask);
+taskInput.addEventListener('keypress', function(event) {
+    if (event.key === 'Enter') {
+        addTask();
+    }
+});
+
+userDate.addEventListener('change', renderTasks);
+
+taskList.addEventListener('click', function(event) {
+    const targetElement = event.target;
+    const li = targetElement.closest('li');
+
+    const selectedDate = userDate.value;
+    const taskIndex = li.dataset.index;
+
+    if(targetElement.type === 'checkbox') {
+        todosByDate[selectedDate][taskIndex].completed = !todosByDate[selectedDate][taskIndex].completed;
+    }
+    if(targetElement.tagName === 'BUTTON') {
+        todosByDate[selectedDate].splice(taskIndex,1);
+    }
+
+    saveData();
+    renderTasks();
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,74 @@
+* {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #f4f4f4;
+    display: grid;
+    justify-content: center;
+    padding: 50px;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-bottom: 40px;
+    color:brown;
+}
+
+div {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 400px;
+
+}
+input[type="text"] {
+    padding: 10px;
+    width: 300px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+input[type="date"] {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+button {
+    padding: 5px;
+    background-color: brown;
+    color: white;
+    border: none;
+    width: 50px;
+    height: 30px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+button:hover {
+    background-color: darkred;
+}
+ul {
+    list-style-type: none;
+    width: 100%;
+}
+
+li {
+    margin-bottom: 10px;
+    padding: 20px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+li.completed span {
+    text-decoration: line-through;
+    color: gray;
+}
diff --git a/vercel.json b/vercel.json
@@ -0,0 +1,5 @@
+{
+    "rewrites": [
+        {"source": "/(.*)", "destination": "/"}
+    ]
+}