diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8d8fbe9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+ Vanilla Todo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e27a77f
--- /dev/null
+++ 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
new file mode 100644
index 0000000..fae5ebe
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..4179678
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,5 @@
+{
+ "rewrites": [
+ {"source": "/(.*)", "destination": "/"}
+ ]
+}
\ No newline at end of file