실습) TODO 앱 만들기

 

< Todo앱 특징>

할일 리스트를 작성하고 지울 수 있는 Todo 앱이다. 추가 버튼을 누르면 리스트 박스가 생성이 되고 edit 버튼을 누르면 편집, remove 버튼을 삭제가 된다.

또한 체크박스에 체크를 하면 빨간줄과 함께 다시 체크하기 전까지는 편집을 못하도록 만들어 보자.

 

 

1. HTML 작성

 

TODO라는 전체 클래스 안에 제목 Todo와 new_add_todo id를 갖는 버튼을 생성했다.

마짐가에는 todo-list 이름을 갖는 클래스와 list이름을 갖는 id를 생성해 주었다.

• TODO 클래스 : 전체 틀
• new_add_todo button : 리스트를 추가할 수 있는 버튼
• todo-list class : 생성된 리스트 속성을 담는 클래스 

 

2. CSS 작성

 

 

3. Java Script 작성

 

html에서 선언했던 new_add_todo id요소를 listBtn 변수로, list id 요소는 같은 이름으로 변수를 선언하였다

listchild 배열을 생성하여 화면에 요소 리스트를 만든다.

listBtn 변수를 통해  즉, new_add_todo 버튼을 클릭했을 시 createNewTodo 함수가 실행되도록 하였다.

 

* function createNewTodo 함수 

item 객체 생성 

 

listchild.unshift(item) 

* unshit 메소드 : 배열 처음에 새로운 item 추가

 

all_listboxEl과 inputEl이라는 요소를 생성

list.prepend(all_listboxEl)

리스트 요소 안에 방금 생성한 아이템 요소 추가(가장 첫번째 요소로 추가)

 

inputEl.removeAttribute('disabled'); 

disabled 속성 제거

 

inputEl.focus();

input 요소에 focus : 바로 글을 쓸 수 있게 해준다