diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..1dc7164 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true +} \ No newline at end of file diff --git a/index.html b/index.html index d241b1b..d0195b4 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,26 @@ - Vanilla Todo + 📚 TO DO LIST -
+
+
📚 투두리스트
+
+ + +
+
+

🗒️ TO DO (0)

+ +
+
+

💿 DONE (0)

+ +
+
+ - - + \ No newline at end of file diff --git a/script.js b/script.js index b0ec50d..1ff8a8d 100644 --- a/script.js +++ b/script.js @@ -1 +1,96 @@ -// 다들 화이팅!! ٩( *˙0˙*)۶ \ No newline at end of file +const todoInput = document.querySelector(".input-container input"); +const addButton = document.querySelector(".input-container button"); +const todoList = document.querySelector(".todo-list"); +const doneList = document.querySelector(".done-list"); +const todoCount = document.querySelector(".todo-list-container h2"); +const doneCount = document.querySelector(".done-list-container h2"); + +const todoItems = []; +const doneItems = []; + +// 버튼 클릭 시 호출되는 이벤트 리스너를 설정 +addButton.addEventListener("click", () => { + const task = todoInput.value.trim(); + if (task) { + addTodoItem(task); + todoInput.value = ""; // 입력 필드 초기화 + } +}); + +// 새로운 할 일 항목을 배열에 추가 +function addTodoItem(task) { + todoItems.push(task); + renderTodoList(); // 할 일 목록을 렌더링 +} + +// 지정된 인덱스의 항목을 배열에서 제거 +function removeTodoItem(index) { + todoItems.splice(index, 1); // 인덱스에 해당하는 항목을 제거 + renderTodoList(); // 업데이트된 할 일 목록을 렌더링 +} + +// 항목을 완료 목록으로 이동 +function completeTodoItem(index) { + const completedTask = todoItems.splice(index, 1); // 완료된 항목을 todoItems에서 제거 + doneItems.push(completedTask[0]); // 완료된 항목을 doneItems에 추가 + renderTodoList(); // 할 일 목록을 렌더링 + renderDoneList(); // 완료된 항목 목록을 렌더링 +} + +// done 목록에서 항목을 제거 +function removeDoneItem(index) { + doneItems.splice(index, 1); // 인덱스에 해당하는 항목을 제거 + renderDoneList(); // 업데이트된 완료된 항목 목록을 렌더링 +} + +// 할 일 목록을 화면에 렌더링 +function renderTodoList() { + todoList.innerHTML = ""; // 기존 목록 초기화 + todoItems.forEach((item, index) => { + const li = document.createElement("li"); + li.textContent = item; + + // 삭제 버튼 생성 + const deleteBtn = document.createElement("span"); + deleteBtn.textContent = "🗑️"; + deleteBtn.classList.add("delete-btn"); + deleteBtn.addEventListener("click", () => removeTodoItem(index)); + + // 완료 버튼 생성 + const completeBtn = document.createElement("span"); + completeBtn.textContent = "✔️"; + completeBtn.classList.add("complete-btn"); + completeBtn.addEventListener("click", () => completeTodoItem(index)); + + li.appendChild(completeBtn); + li.appendChild(deleteBtn); + todoList.appendChild(li); + }); + // 할 일 항목 수를 업데이트 + todoCount.textContent = `🗒️ TO DO (${todoItems.length})`; +} + +// 완료된 항목 목록을 화면에 렌더링 +function renderDoneList() { + doneList.innerHTML = ""; // 기존 목록 초기화 + doneItems.forEach((item, index) => { + const li = document.createElement("li"); + const itemText = document.createElement("span"); + itemText.textContent = item; + itemText.classList.add("done-item-text"); + + // 삭제 버튼 생성 + const deleteBtn = document.createElement("span"); + deleteBtn.textContent = "🗑️"; + deleteBtn.classList.add("delete-btn"); + deleteBtn.addEventListener("click", () => removeDoneItem(index)); + + li.appendChild(itemText); + li.appendChild(deleteBtn); + + doneList.appendChild(li); + }); + // 완료된 항목 수를 업데이트 + doneCount.textContent = `💿 DONE (${doneItems.length})`; +} + diff --git a/style.css b/style.css index dd32f0e..de9ccf5 100644 --- a/style.css +++ b/style.css @@ -1 +1,84 @@ -/* 자유롭게 디자인 해 주세요! */ \ No newline at end of file +/* 자유롭게 디자인 해 주세요! */ + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(to right, #d8bfd8, #ffb6c1); +} + +.container { + background: white; + border-radius: 10px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 300px; +} + +header { + font-size: 24px; + margin-bottom: 20px; + text-align: center; +} + +.input-container { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +input[type="text"] { + flex-grow: 1; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 10px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.todo-list-container, .done-list-container { + margin-top: 20px; +} + +ul { + list-style-type: none; +} + +li { + display: flex; + justify-content: space-evenly; + align-items: baseline; + padding: 10px; + border-bottom: 1px solid #ccc; + margin-right: 40px; +} + +li .delete-btn { + cursor: pointer; + color: red; +} + +h2 { + font-size: 18px; + margin-bottom: 10px; +} + + /* 완료된 항목 텍스트에 대한 스타일 */ +.done-item-text { + color: gray; + text-decoration: line-through; +} + +/* 삭제 버튼의 스타일 */ +.delete-btn { + color: red; + cursor: pointer; +} \ No newline at end of file