diff --git a/index.html b/index.html index d241b1b..9920096 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,46 @@ Vanilla Todo + + + -
+
+ + +
+

+

+
+ + +
+
+ +
+ + +
+
+
    +
    +
    +
    +
    + + +
    +
    Done
    +
    +
      +
      +
      +
      +
      +
      +
      + - diff --git a/script.js b/script.js index 52d54cd..9eb424b 100644 --- a/script.js +++ b/script.js @@ -1 +1,125 @@ -//CEOS 19기 프론트엔드 파이팅🔥 ദ്ദി˶ˊᵕˋ˵) +const inputField = document.querySelector('.todo-input'); //todo 입력창 +const TodoButton = document.querySelector('.todo-input-button'); //+추가 버튼 +const todoLists = document.querySelector('.todo-lists'); //todo list목록 +const doneLists = document.querySelector('.done-lists'); //done list목록 +const date = document.querySelector('h1#date'); //날짜 표기 +const week = document.querySelector('h3#week'); //요일 표기 +const showTodoNumber = document.querySelector('.show-todo-number'); //todo list div 개수 +const showDoneNumber = document.querySelector('.show-done-number'); //done list div 개수 + + +//lists 개수 세기 +function todoListsNumber(){ + const todoNumber = todoLists.getElementsByTagName("div"); + const doneNumber = doneLists.getElementsByTagName("div"); + + showTodoNumber.innerText = `${todoNumber.length} lists to do`; + showDoneNumber.innerText = `${doneNumber.length} lists are done! Way to go : )` +} +todoListsNumber(); + + +//+ 버튼 클릭시 todo에 list를 추가 +TodoButton.addEventListener('click', addTodo); +function addTodo(event){ + event.preventDefault(); //event에 대한 기본 동작 실행 방지 + + //todo list div 생성 + const todoDiv = document.createElement("div"); + todoDiv.classList.add("todo-div"); + + //todo list li 생성 + const todoLi = document.createElement("li"); + todoLi.classList.add("todo-li"); + + + //todo list 삭제 button 생성 + const deleteButton = document.createElement('button'); + deleteButton.innerHTML = '' + deleteButton.classList.add('delete-button'); + + //todo list done button 생성 + const doneButton = document.createElement('button'); + doneButton.innerHTML = ''; + doneButton.classList.add("done-button"); + + + //공백 여부에 따른 처리 + if(!inputField.value.trim()) + alert("할일을 추가해 보세요!"); + else{ + todoLi.innerText = inputField.value; + todoDiv.appendChild(todoLi); + todoDiv.appendChild(deleteButton); + todoDiv.appendChild(doneButton); + todoLists.appendChild(todoDiv); + todoListsNumber(); + } + + //input field 초기화 + inputField.value = ''; +} + +//enter키 입력시 + 버튼 누른 효과 +inputField.addEventListener("keyup", function (event) { + if (event.keyCode === 13) { + event.preventDefault(); + TodoButton.click(); + } +}); + + +//todoLists의 버튼 클릭 함수 +todoLists.addEventListener('click', deleteDoneTodo); +function deleteDoneTodo(e){ + const item = e.target; + + //delete 버튼 클릭시 삭제 + if(item.classList[0] === "delete-button"){ + const todoItem = item.parentElement; + todoItem.remove(); + todoListsNumber(); + } + + //done 버튼 클릭시 donelists로 이동 + if(item.classList[0] === "done-button"){ + const doneItem = item.parentElement; + doneLists.appendChild(doneItem); + doneItem.classList.add('done-div'); //done lists는 따로 css 부여 + todoListsNumber(); + } +} + +//doneLists의 삭제 버튼 클릭 함수 +doneLists.addEventListener('click', deleteDone); +function deleteDone(e){ + const item = e.target; + + if(item.classList[0] === 'delete-button'){ + const doneItem = item.parentElement; + doneItem.remove(); + todoListsNumber(); + } +} + + + +//날짜 표기 함수 +const getDate = () => { + const newDate = new Date(); + const year = newDate.getFullYear(); + const month = newDate.getMonth() + 1; //js 자체 오류 보정 + const day = newDate.getDate(); + + date.innerText = `${year}년 ${month}월 ${day}일`; +}; +//요일 표기 함수 +const getWeek = () => { + const daysOfWeek = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"]; + const newDate = new Date(); + const newWeek = daysOfWeek[newDate.getDay()]; + + week.innerText = `${newWeek}`; +}; +getDate(); +getWeek(); \ No newline at end of file diff --git a/style.css b/style.css index 599136a..c5ceb4e 100644 --- a/style.css +++ b/style.css @@ -1 +1,184 @@ -/* 본인의 디자인 감각을 최대한 발휘해주세요! */ +body{ + width: 100%; + height: 100%; + display: flex; + justify-content: center; +} + +.container{ + display: flex; + flex-direction: column; + width: 70%; + aspect-ratio: 7 / 4 ; + margin-top: 10vh; + border: 0.05rem solid #CBC0C0; + border-radius: 25px; + box-shadow: 5px 4px 4px #CBC0C0; + padding: 2rem; +} + +/* 상단 to do list */ +.logo{ + text-align: end; + color: #968E8E; + font-weight: 200; + font-size: 1.3rem; +} + + +/* 날짜 표기 */ +.date{ + border-bottom: 0.05rem solid #968E8E; +} +.date h1{ + margin: 0; + font-size: 3rem; + font-weight: bold; +} +.date h3{ + margin: 0.3rem; + font-size: 2rem; + font-weight: normal; +} + + +/* 하단 list 부분 */ +.show-lists{ + display: flex; + flex-direction: row; + width: 100%; + flex-grow: 1; + margin-top: 0.5rem; +} + + +/* todo list */ +.todo-list-container{ + width: 50%; + display: flex; + flex-direction: column; + align-items: center; +} + +.todo-list-input{ + width: 90%; + height: 2.5rem; + display: flex; + flex-direction: row; + border-bottom: 0.05rem solid #968E8E; +} + +.todo-input{ + border: none; + width: 90%; + color: black; + font-size: 1.3rem; + font-weight: normal; +} +::placeholder{ + color: black; + font-size: 1.3rem; + font-weight: normal; +} + +.todo-input-button{ + border: none; + margin-left: auto; + width: 10%; + background-color: #fff; + color: #2F82FE; + font-size: 3rem; + font-weight: normal; + display: flex; + align-items: center; + justify-content: center; +} + + + +/* done list 부분 */ +.done-list-container{ + width: 50%; + display: flex; + flex-direction: column; + align-items: center; +} +.done-title{ + width: 90%; + height: 3.3rem; + display: flex; + align-items: center; + color: black; + font-size: 1.3rem; + font-weight: normal; +} + + + +/* lists가 차지하는 부분 */ +.todo-list-wrapper, .done-list-wrapper{ + width: 90%; + height: max-content; +} + +.todo-list-wrapper,.done-list-wrapper{ + flex-grow: 1; + height: 100%; +} + +.todo-lists, .done-lists{ + display: flex; + flex-direction: column; + margin: 0; + padding: 0; +} + + +/* list 1개당 */ +.todo-div{ + background-color: #fff; + list-style-type: none; + width: 100%; + height: 3rem; + border: 0.05rem solid #CBC0C0; + border-radius: 10px; + box-shadow: 0px 4px 4px #CBC0C0; + margin: 0.3rem 0; + display: flex; + flex-direction: row; +} + +.todo-li{ + display: flex; + align-items: center; + flex-grow: 1; + padding: 0 1rem; +} + +.done-button, +.delete-button{ + border-radius: 10px; + border: 0.05rem solid #fff; + width: 10%; + background-color: #fff; +} + +.fa-circle-check, +.fa-circle-minus{ + pointer-events: none; +} + + +.done-div .delete-button{ + display: block; +} +.done-div .done-button{ + display: none; +} + + +/* list개수 표기 부분 */ +.show-todo-number, .show-done-number{ + font-size: 1rem; + color: #968E8E; +} \ No newline at end of file