SideProject #1 Todo-list

SideProject #1 Todo-list

앞으로 일주일에 한~두개 씩 큰 작업이든 작은 작업이든 상관 없이 SideProject를 하려고 한다. 공부하면서 그냥 강의들을 따라 하는 것 보단 이렇게 뭔가를 제작하는게 더 도움이 된다는 걸 느껴서... 아무튼 유투브에서 어느 프로그래머의 영상을 보다가 자바스크립트 공부를 마쳤으면 다른 프레임워크들을 사용하기전에 자바스크립트만 이용해서 무언가 만들어보라고 한 말이 생각나서 첫번째 SideProject로 todo-list를 제작해보았다.

디자인은 정말 심플하다. (디자인 감각이 부족해서...)

처음에 타이틀로 'Todo-List'라고 되어있고 아래 버튼이 4개 있는데 3개는 필터 역할을 하는 버튼이고 1개는 list를 추가하는 버튼이다. 버튼 밑에는 list와 해당 list의 상태를 알 수 있게 해두었다.

마우스를 해당 리스트 위에 올리거나 complete 상태로 체크하면 아래와 같은 효과로 보이게 처리했다.

그리고 필터에서 complete를 선택하면 체크된 항목만 보이도록, incomplete를 선택하면 체크되지 않은 항목만 보이도록 javascript를 구성했고, 모바일에 대한 반응형 대응 또한 width 980px에서 해주었다. 

이 프로젝트는 html, css, javascript를 사용해 만들었으며, 데모 페이지와 깃허브 주소는 아래에 있으니 참고하기 바란다. 

Demo / GitHub