[miniProject] 간단한 todolist 사이트 만들기

안녕하세요 오랜만입니다. 

 

자바스크립트 기능을 활용할 수 있는 간단한 주제를 찾아보다가 할 일 목록을 만드는 것을 보았습니다. 

 

목표

할 일 목록을 추가하거나 삭제할 수 있는 사이트

세부 목표 

• 체크박스에 체크하면 중간줄로 그으기
• list를 추가할 때는 text박스에 목표를 쓰고 ENTER를 누르거나 +버튼을 누른다
• list를 제거할 때는 왼쪽의 체크박스를 클릭하거나 그 문장을 클릭해서 체크된 상태로 만들고 -버튼을 누른다

만들면서 몰랐던 점 & 해결법 

1. 자바스크립트로 DOM객체를 만들 때 class프로퍼티를 어떻게 설정하는가?
   • 객체속성의 className을 사용하면 class프로퍼티를 설정할 수 있다. ex) item.className = 'thisItem'
2. input태그 checkbox type일 때 체크된 여부를 어떻게 확인하는가?
   1. https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=javaking75&logNo=220136692493 
   2. 객체속성의 checked를 사용하면 불 자료형 true, false가 반환된다.
3. css로 어떻게 가운데로 정렬시키는가?
   
   • margin:0 auto; 를 쓰자 ex) body{ margin: 0 auto; }

 

결과물 사진 

초기화면 

이런식으로 입력을 할 수 있습니다 그리고 옆에 있는 +버튼을 누르면 

이렇게 각 리스트가 추가되며 옆에는 체크박스가 있습니다. 

체크를 할 수 있고 체크를 하게 되면 가운데 줄을 긋습니다. 

-버튼을 누르게 되면 체크된 리스트들을 모두 삭제합니다.