42organization · greatSweetMango · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023 · Oct 13, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <!-- 부트스트랩 JavaScript 파일을 추가 -->
+    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <title>TODO</title>
+
+</head>
+
+<body>
+    <h1>TODO LIST</h1>
+    <div class="todo-wrapper">
+        <div class="container-fluid pb-3 ">
+            <div class="d-grid gap-3 todo-list-container">
+                <div class="bg-body-tertiary border rounded-3 list-wrapper">
+                    <ul id="todo-list">
+                    </ul>
+                </div>
+                <div class="bg-body-tertiary border rounded-3 list-wrapper">
+                    <ul id="done-list">
+                    </ul>
+                </div>
+            </div>
+
+            <div class="modal">
+                <div class="modal_body">
+                    <h3>Add Todo</h3>
+                    <form id="todo-form">
+                        <input id="todo-input" type="text" required>
+                        <button class="btn-add-todo">Enter</button>
+                    </form>
+                </div>
+            </div>
+            <div class="d-grid justify-content-center mt-3">
+                <button class="btn-open-popup">Add Todo</button>
+            </div>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,119 @@
+const body = document.querySelector('body');
+const modal = document.querySelector('.modal');
+const btnOpenPopup = document.querySelector('.btn-open-popup');
+const btnAddTodo = document.querySelector('.btn-add-todo');
+const todoInput = document.querySelector('#todo-input');
+const todoList = document.querySelector('#todo-list');
+const doneList = document.querySelector('#done-list');
+
+const TODO_KEY = 'todoDataList'
+let todoDataList = JSON.parse(localStorage.getItem(TODO_KEY)) || [];
+todoDataList.map(printTodo);
+
+//addTodo popup
+btnOpenPopup.addEventListener('click', () => {
+  modal.classList.toggle('show');
+
+  if (modal.classList.contains('show')) {
+    body.style.overflow = 'hidden';
+  }
+});
+
+modal.addEventListener('click', (event) => {
+  if (event.target === modal) {
+    modal.classList.toggle('show');
+  }
+});
+
+btnAddTodo.addEventListener('click', handleTodoSubmit);
+
+function handleTodoSubmit(event) {
+  event.preventDefault();
+  if (todoInput.value.trim() === '') {
+    alert('내용을 입력해 주세요');
+    return ;
+  }
+  const newTodo = {
+    id: 'todoItem-' + Date.now(),
+    content: todoInput.value,
+    isDone: false,
+  }
+  printTodo(newTodo);
+  modal.classList.remove('show');
+  todoInput.value = null;
+  todoDataList.push(newTodo);
+  saveTodoDataList(newTodo);
+}
+
+function handleTodoDelete(event) {
+  const li = event.target.closest('li');
+  if (li) {
+    eraseTodo(li.id);
+  }
+  todoDataList = todoDataList.filter(todoData => todoData.id !== li.id);
+  saveTodoDataList();
+}
+
+
+function handleTodoDone(event) {
+  const li = event.target.closest('li');
+  console.log(li);
+  let todoData = todoDataList.find(todoData => todoData.id == li.id);
+  todoData.isDone = true;
+  eraseTodo(todoData.id);
+  printTodo(todoData);
+  saveTodoDataList();
+}
+
+function handleTodoUndone(event) {
+  const li = event.target.closest('li');
+  let todoData = todoDataList.find(todoData => todoData.id == li.id);
+  todoData.isDone = false;
+  eraseTodo(li.id);
+  printTodo(todoData);
+  saveTodoDataList();
+}
+
+function eraseTodo(todoId) {
+  const todoItem = document.querySelector('#' + todoId);
+  if (todoItem) {
+    todoItem.remove();
+  }
+}
+
+function printTodo(todoData) {
+  const li = document.createElement('li');
+  li.id = todoData.id;
+
+  const btnDelete = document.createElement('button');
+  btnDelete.classList.add('btn-delete');
+  btnDelete.addEventListener('click', handleTodoDelete);
+  btnDelete.innerText = '삭제';
+
+  const taskDiv = document.createElement('div');
+  taskDiv.innerText = todoData.content;
+
+  if (todoData.isDone == false) {
+    const btnDone = document.createElement('button');
+    btnDone.classList.add('btn-todo-done');
+    btnDone.addEventListener('click', handleTodoDone);
+
+    li.appendChild(btnDone);
+    li.appendChild(taskDiv);
+    li.appendChild(btnDelete);
+    todoList.appendChild(li);
+  } else {
+    const btnDone = document.createElement('button');
+    btnDone.classList.add('btn-todo-undone');
+    btnDone.addEventListener('click', handleTodoUndone);
+
+    li.appendChild(btnDone);
+    li.appendChild(taskDiv);
+    li.appendChild(btnDelete);
+    doneList.appendChild(li);
+  }
+}
+
+function saveTodoDataList() {
+  localStorage.setItem(TODO_KEY, JSON.stringify(todoDataList));
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,119 @@
+body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+}
+
+ul {
+    margin: 1px;
+    padding-left: 0;
+}
+
+.btn-open-popup {
+    background-color: aqua;
+    margin-left: 10px;
+}
+
+.todo-wrapper {
+    display: flex;
+    flex-direction: row;
+    width: 800px;
+    height: 400px;
+    padding: 30px;
+    background: gray;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    color: #333333;
+}
+
+.modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    display: none;
+
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal.show {
+    display: block;
+}
+
+.modal_body {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    width: 400px;
+    height: 200px;
+
+    padding: 40px;
+
+    text-align: center;
+
+    background-color: rgb(255, 255, 255);
+    border-radius: 10px;
+    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
+
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.btn-add-todo {
+    margin-top: 10px;
+}
+
+.list-wrapper {
+    overflow-y: auto;
+    height: 300px;
+}
+
+.todo-list-container {
+    grid-template-columns: 1fr 1fr;
+}
+
+.list-wrapper ul li {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    display: grid;
+    grid-template-columns: 30px 1fr 50px;
+    align-items: center; 
+}
+
+.list-wrapper ul li div{
+    white-space: nowrap;
+    overflow:hidden;
+    text-overflow: ellipsis;
+}
+
+.btn-todo-done {
+    width: 70%;
+    height: 70%;
+    border-radius: 3px;
+    margin-left: 10%;
+    background-color:greenyellow;
+}
+
+.btn-todo-undone {
+    width: 70%;
+    height: 70%;
+    border-radius: 3px;
+    margin-left: 10%;
+    background-color:rgb(214, 22, 22);
+}
+
+.btn-delete {
+    width: 50px;
+    margin-right: 100px;
+    color: Red;
+    background: none; /* 배경 제거 */
+    border: none; /* 테두리 제거 */
+    padding: 0; /* 내부 간격 제거 */
+}