diff --git a/index.html b/index.html index d241b1b..2c5b21a 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,40 @@ - - - - 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 e69de29..3a0612b 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,104 @@ +document.body.style.background = `linear-gradient(to right, #c7efff, #ffccf6)`; + +const toDoButton = document.getElementById('todo-button'); +const toDo = document.getElementById('todo'); +const toDoList = document.getElementById('todo-list'); +const toDoInfo = document.getElementById('todo-info'); +const doneList = document.getElementById('done-list'); +const doneInfo = document.getElementById('done-info'); +const submitform = document.getElementById('submit-form'); + +let toDoNum = 0; +let doneNum = 0; + +//todo에서 삭제 +function deleteToDo(event) { + toDoNum <= 0 ? (toDoNum = 0) : toDoNum--; + toDoInfo.innerText = `(${toDoNum})`; + + const deletetoDoList = event.target.parentElement; + deletetoDoList.remove(); +} + +function moveToDo(event) { + deleteToDo(event); + + const removeList = document.createElement('div'); + const removeItem = event.target; + const deleteButton = document.createElement('span'); + + deleteButton.innerText = '❌'; + + removeList.appendChild(removeItem); + removeList.appendChild(deleteButton); + doneList.appendChild(removeList); + + doneNum++; + + removeItem.removeEventListener('click', moveToDo); + removeItem.addEventListener('click', moveDoneToDo); + deleteButton.addEventListener('click', trashDoneToDo); + + toDoInfo.innerText = `(${toDoNum})`; + doneInfo.innerText = `(${doneNum})`; +} + +function moveDoneToDo(event) { + trashDoneToDo(event); + + const removeList = document.createElement('div'); + const removeItem = event.target; + const deleteButton = document.createElement('span'); + + deleteButton.innerText = '❌'; + + removeList.appendChild(removeItem); + removeList.appendChild(deleteButton); + toDoList.appendChild(removeList); + + toDoNum++; + + removeItem.removeEventListener('click', moveDoneToDo); + removeItem.addEventListener('click', moveToDo); + deleteButton.addEventListener('click', deleteToDo); + + toDoInfo.innerText = `(${toDoNum})`; + doneInfo.innerText = `(${doneNum})`; +} + +function trashDoneToDo(event) { + const li = event.target.parentElement; + li.remove(); + + doneNum <= 0 ? (doneNum = 0) : doneNum--; + doneInfo.innerText = `(${doneNum})`; +} + +function toDoInput(event) { + event.preventDefault(); + const newTodo = toDo.value; + toDo.value = ''; + makeToDo(newTodo); +} + +function makeToDo(newTodo) { + toDoNum++; + toDoInfo.innerText = `(${toDoNum})`; + + const li = document.createElement('div'); + const toDoItem = document.createElement('span'); + const deleteButton = document.createElement('span'); + + toDoItem.innerText = newTodo; + deleteButton.innerText = '❌'; + + li.appendChild(toDoItem); + li.appendChild(deleteButton); + toDoList.appendChild(li); + + toDoItem.addEventListener('click', moveToDo); + deleteButton.addEventListener('click', deleteToDo); +} + +submitform.addEventListener('submit', toDoInput); +toDoButton.addEventListener('click', toDoInput); diff --git a/style.css b/style.css index e69de29..e64a064 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,93 @@ +@font-face { + font-family: 'SuncheonB'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') + format('woff'); + font-weight: normal; + font-style: normal; +} + +body { + font-family: 'SuncheonB'; + font-size: 15px; + display: flex; + width: 100vh; + height: 100vh; + justify-content: center; + align-items: center; + margin: 0 auto; +} + +.whiteBox { + text-align: left; + width: 360px; + height: 600px; + background-color: white; + display: flex; + flex-direction: column; + border-bottom: 1px solid grey; + border-radius: 9px; + padding: 10px; +} + +.title-font { + font-size: 20px; + margin-bottom: 20px; +} + +#todo { + width: 300px; + height: 50px; + border-radius: 9px; + font-family: 'SuncheonB'; +} + +#submit-form { + height: 76px; + margin-top: 10px; +} +.input-box { + height: 100px; + border-bottom: 1px solid grey; + text-align: center; +} + +#todo-list { + cursor: pointer; + color: black; +} + +#done-list { + color: grey; + text-decoration: line-through; + cursor: pointer; +} +.todo-box { + padding: 20px; + flex: 0.5; + border-bottom: 1px solid grey; + + overflow: auto; +} +.todo-list-title-font { + font-size: 20px; + margin-left: 20px; +} +.done-box { + margin: 20px; + flex: 0.5; + + overflow: auto; +} + +#finish-todo { + margin-top: 30px; + font-size: 30px; +} + +.hidden { + display: none; +} + +#todo-button { + cursor: pointer; +}