[1주차] 고윤정 미션 제출합니다. #6
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "trailingComma": "es5", | ||
| "tabWidth": 2, | ||
| "semi": true, | ||
| "singleQuote": true | ||
| } |
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1 +1,66 @@ | ||||||
| // 다들 화이팅!! ٩( *˙0˙*)۶ | ||||||
| const todoInput = document.querySelector('#todoInput'); //입력창 | ||||||
| const addBtn = document.querySelector('#addBtn'); //+ 버튼 | ||||||
| const todoList = document.querySelector('#todoList'); //TO DO | ||||||
| const doneList = document.querySelector('#doneList'); //DONE | ||||||
| const todoTitle = document.querySelector('.todo-box .list-title'); // TO DO 제목 | ||||||
| const doneTitle = document.querySelector('.done-box .list-title'); // DONE 제목 | ||||||
|
There was a problem hiding this comment.
There was a problem hiding this comment. 어떠한 기준을 가지고 나눈건 아니고 원래 기본적으로 |
||||||
|
|
||||||
| function EnterKeyDown() { | ||||||
| //엔터키로 추가 | ||||||
| if (window.event.keyCode === 13 && todoInput.value !== '') { | ||||||
|
There was a problem hiding this comment. VSCode를 통해 해당 라인을 보면 아래와 같은 경고문이 뜹니다! 
There was a problem hiding this comment. 그리고 There was a problem hiding this comment. 저도 동일한 방법으로 키 입력을 감지하는 방법을 알아보다가 There was a problem hiding this comment. window.event.keyCode도 키보드 이벤트가 발생했을 때 어떤 키가 눌렸는지 확인하기 위해 사용되는 속성이라는걸 처음 알았네요! 위에 주현님 코드리뷰도 보면서 어떤 메소드가 더 좋은건지 덕분에 배워갑니다! |
||||||
| addToDo(); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| addBtn.addEventListener('click', () => { | ||||||
| //+ 버튼으로 추가 | ||||||
| if (todoInput.value !== '') addToDo(); | ||||||
|
|
||||||
| }); | ||||||
|
|
||||||
| function addToDo() { | ||||||
| let todoContents = todoInput.value; | ||||||
|
|
||||||
| const li = document.createElement('li'); | ||||||
| const span = document.createElement('span'); | ||||||
| const btn = document.createElement('button'); | ||||||
|
|
||||||
| li.appendChild(span); //appendChild() : 선택한 요소 안에 자식요소를 추가 | ||||||
| li.appendChild(btn); | ||||||
|
|
||||||
| span.textContent = todoContents; //textContent : 노드 내의 모든 텍스트 추출 | ||||||
| btn.textContent = '✖️'; | ||||||
|
|
||||||
| todoList.appendChild(li); | ||||||
|
|
||||||
| todoInput.value = ' '; | ||||||
|
There was a problem hiding this comment. 이렇게 되면 할 일 추가 후 인풋 필드에 공백이 남아 있게 되니 아래처럼 수정해야 할 것 같습니다!
Suggested change
|
||||||
|
|
||||||
| updateCount(); | ||||||
|
|
||||||
| //완료 | ||||||
| li.addEventListener('click', () => { | ||||||
| li.classList.toggle('complete'); | ||||||
| if (li.classList.contains('complete')) { | ||||||
| doneList.appendChild(li); | ||||||
| } else { | ||||||
| todoList.appendChild(li); | ||||||
| } | ||||||
|
Comment on lines
+35
to
+40
There was a problem hiding this comment.
|
||||||
| // console.log(li.classList.contains('complete')); | ||||||
|
|
||||||
| updateCount(); | ||||||
| }); | ||||||
|
|
||||||
| //삭제 | ||||||
| btn.addEventListener('click', (e) => { | ||||||
| e.stopPropagation(); | ||||||
|
There was a problem hiding this comment. 이 부분은 삭제 버튼을 눌렀을 때 토글되는 문제 때문에 추가하신 거죠?! //완료
span.addEventListener('click', () => { ... })There was a problem hiding this comment. 헉 저도 이벤트 전파 때문에 |
||||||
| li.remove(); | ||||||
| updateCount(); | ||||||
| }); | ||||||
| } | ||||||
|
|
||||||
| function updateCount() { | ||||||
| const todoCnt = todoList.children.length; | ||||||
| const doneCnt = doneList.children.length; | ||||||
|
|
||||||
| todoTitle.textContent = `📝 TO DO (${todoCnt})`; | ||||||
| doneTitle.textContent = `✔️ DONE (${doneCnt})`; | ||||||
|
There was a problem hiding this comment. updateCount 함수 코드가 단순하면서도 필요한 기능을 효과적 작성하신 것 같아요! 저도 간결하고 좋은 코드 작성하고싶어요! |
||||||
| } | ||||||
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -1 +1,131 @@ | ||||||||
| /* 자유롭게 디자인 해 주세요! */ | ||||||||
| @font-face { | ||||||||
| font-family: 'LINESeedKR-Th'; | ||||||||
| src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Th.woff2') | ||||||||
| format('woff2'); | ||||||||
|
Comment on lines
+3
to
+5
There was a problem hiding this comment. 저도 폰트 적용해야하는데 어떤식으로 적용할지 잘 몰랐던 것 같아요! 다음에 저도 이런식으로 적용해야겠어요! |
||||||||
| font-weight: 100; | ||||||||
| font-style: normal; | ||||||||
| } | ||||||||
|
|
||||||||
| @font-face { | ||||||||
| font-family: 'LINESeedKR-Rg'; | ||||||||
| src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Rg.woff2') | ||||||||
| format('woff2'); | ||||||||
| font-weight: 400; | ||||||||
| font-style: normal; | ||||||||
| } | ||||||||
|
|
||||||||
| @font-face { | ||||||||
| font-family: 'LINESeedKR-Bd'; | ||||||||
| src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Bd.woff2') | ||||||||
| format('woff2'); | ||||||||
| font-weight: 700; | ||||||||
| font-style: normal; | ||||||||
| } | ||||||||
| body { | ||||||||
| margin: 0; | ||||||||
| display: flex; | ||||||||
| justify-content: center; | ||||||||
| align-items: center; | ||||||||
| background-image: linear-gradient( | ||||||||
|
|
||||||||
| to right, | ||||||||
| rgb(176, 196, 222), | ||||||||
| rgb(230, 239, 250) | ||||||||
| ); | ||||||||
| } | ||||||||
|
|
||||||||
| .container { | ||||||||
| margin-top: 120px; | ||||||||
| width: 360px; | ||||||||
| height: 500px; | ||||||||
| border-radius: 20px; | ||||||||
| padding: 24px; | ||||||||
| padding-top: 30px; | ||||||||
|
There was a problem hiding this comment.
Suggested change
이렇게 줄여 쓸 수도 있습니다! 순서대로 상 우 하 좌 (시계방향!) |
||||||||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); | ||||||||
| background-color: white; | ||||||||
| } | ||||||||
|
|
||||||||
| span.title { | ||||||||
| font-family: 'LINESeedKR-Bd'; | ||||||||
| font-size: 24px; | ||||||||
| color: rgb(59, 59, 59); | ||||||||
| } | ||||||||
|
|
||||||||
| span.list-title { | ||||||||
| font-family: 'LINESeedKR-Bd'; | ||||||||
| color: rgb(59, 59, 59); | ||||||||
| } | ||||||||
|
|
||||||||
| .division-line { | ||||||||
| border-top: 1px solid rgb(222, 222, 222); | ||||||||
| } | ||||||||
|
|
||||||||
| .todo-box { | ||||||||
| margin-top: 15px; | ||||||||
| } | ||||||||
|
|
||||||||
| .done-box { | ||||||||
| margin-top: 15px; | ||||||||
| } | ||||||||
|
|
||||||||
| .todo-d { | ||||||||
| height: 140px; | ||||||||
| font-family: 'LINESeedKR-Rg'; | ||||||||
| } | ||||||||
|
|
||||||||
| .done-d { | ||||||||
| height: 140px; | ||||||||
| } | ||||||||
|
|
||||||||
| input { | ||||||||
| width: 310px; | ||||||||
| height: 40px; | ||||||||
| border-radius: 30px; | ||||||||
| border-style: solid; | ||||||||
| border-width: 1.2px; | ||||||||
| border-color: rgb(222, 222, 222); | ||||||||
| font-size: 12px; | ||||||||
| padding-left: 12px; | ||||||||
| margin-top: 15px; | ||||||||
| margin-bottom: 15px; | ||||||||
| } | ||||||||
|
|
||||||||
| input:focus { | ||||||||
| outline: none; | ||||||||
| border-color: lightsteelblue; | ||||||||
| transition: 0.2s; | ||||||||
|
There was a problem hiding this comment. 해당 css 속성은 저도 몰랐던 부분이네요! 윤정님 코드 보면서 하나 더 알아갑니다! |
||||||||
| } | ||||||||
|
|
||||||||
| button { | ||||||||
| border: none; | ||||||||
| width: 25px; | ||||||||
| height: 40px; | ||||||||
| font-size: 20px; | ||||||||
| background-color: white; | ||||||||
| } | ||||||||
|
There was a problem hiding this comment. 버튼을 사용할 때에는 |
||||||||
|
|
||||||||
| button:hover { | ||||||||
| color: lightsteelblue; | ||||||||
| transition: 0.2s; | ||||||||
| } | ||||||||
|
Comment on lines
+109
to
+112
There was a problem hiding this comment. 오호 |
||||||||
|
|
||||||||
| ul li { | ||||||||
| cursor: pointer; | ||||||||
|
|
||||||||
| } | ||||||||
|
|
||||||||
| #todoList button { | ||||||||
| width: 34px; | ||||||||
| height: 20px; | ||||||||
| font-size: 14px; | ||||||||
| } | ||||||||
|
|
||||||||
| #doneList button { | ||||||||
| width: 34px; | ||||||||
| height: 20px; | ||||||||
| font-size: 14px; | ||||||||
| } | ||||||||
|
|
||||||||
| #doneList li.complete { | ||||||||
| text-decoration: line-through; | ||||||||
|
|
||||||||
| color: rgb(222, 222, 222); | ||||||||
| } | ||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
불필요한 코드나
console.log등은 나중에 지워 주세요!