본문 바로가기

Dev.Project/Todolist_project

TodoList 만들기 Project_Basic Intro (HTML / CSS / JavaScript)




 

자바스크립트 연습 프로젝트


자바스크립트를 공부하면서 뭔가를 만들어보면서 하고 싶어졌는데,

가장 유명한 것이 To do list를 만드는 것이다.

검색해보니 난이도가 너무 높고, 이해도 안되고, (외국 사이트의 경우)

심지어 코드를 그대로 입력했는데 동작하지 않았다.

그러면서 여기 저기서 입수한 정보를 토대로 나만의 독자적인 To do list를 만들어가게 되었다.

이 포스팅은 그 프로젝트를 정리한 내용이다.

정말 기초적인 내용을 연습하는 프로젝트이다.



프로젝트 대상은 누구인가?

HTML과 CSS에 대한 기본적인 Markup Language에 대한 이해를 갖추주고 있고,

JavaScript 이론 공부에 대해서 한 번 정도 진행된 사람




준비해야할 사항

Chrome Browser 

프로젝트가 크롬을 기준으로 진행되기 때문에,

크로스 브라우징 이슈를 막기 위해 브라우저를 통일시키려고 한다.


Editor 

HTML/CSS/JavaScript 코드를 편집할 에디터.

참고로 필자는 Atom Editor를 쓰고 있다.

실시간 연동이 되는 Bracket Editor도 추천한다.

필자와 동일한 에디터를 사용할 필요는 없다.


만약 Bracket Editor를 제외한 다른 Editor를 사용한다면

http-server npm 이 필요하다. (http-server npm은 localhost와 연동을 시켜주는 npm이다.)

>> http-server npm 설치, 사용 방법 >>










 최종 결과물




해당 작업을 입력하고 Enter를 치면 차례대로 List가 생성된다.
수행한 작업에 대해서는 더블 클릭을 통해서 Done List로 옮겨준다.
List Item에 마우스를 올렸을 때 Event를 추가한다
List Item을 수정하거나 삭제하는 기능도 추가한다.
짧은 디자인 실력으로 CSS를 입혀봤다.
만약 디자이너분께서 이 프로젝트를 하시게 되면, 더 멋진 UI가 나올 것이라고 생각한다.











목차




Step 1. 기본적인 HTML / CSS / Javascript 구조 갖추기 [이동]
Step 2. 정적인 페이지를 어느 정도 동적으로 만들기. [이동]
Step 3. 동적인 부분에 대해서 사용자의 경험을 높이기. [이동]
Step 4. 완료한 항목을 표시하기. [이동]
Step 5. 수정하고 삭제하기. [이동]
Step 6. Donelist 생성하기. [이동]
Step 7. '수정' 버튼 생성하기. [이동]
Step 8. '수정' 버튼 사라지고 나타나게 하기. [이동]
Step 9. Donelist에서 다시 Todolist로 보내기. [이동]

Step 10. 삭제 버튼 구현하기. [이동]
Final Step. 스타일링하기 [이동] 






- Intro The end -