::Devlog::

Step 2. To do list에 Item 추가하기두번째 단계. 이제 본격적인 코딩에 들어간다.list에 Item 을 생성해서 input tag에 입력한 값을 넣어주자.list를 추가하는 것과 추가한 list를 포함해, 전에 포함되어있던 list까지 보여줘야 하므로,다른 Step 보다 많은 작업량과 코드량을 요구한다. 1단계 . template.js 파일을 작성한다.1-1. 우선 list에 추가될 html 코드 조각을 template화 하자.template.js code>1234567891011function Template(){ console.log('template created'); this.defaultTemplate = '' + '' + '' + '{{title}}' + '' + '' + ''..

Step 1. 각 JS 파일 모듈화하고 의존성 관계 확립하기첫번째 단계. 코드를 작성할 모듈들을 준비하고,각각의 관계와 역할을 정리해두자. 우선, app.js 파일을 작성한다.app.js code>123456789101112(function(){ 'use strict'; function App(){ console.log('App created!'); this.storage = new app.Storage(name); this.model = new app.Model(this.storage); this.template = new app.Template(); this.view = new app.View(this.template); this.controller = new app.Controller(this.mo..

TodoList Project based MVC with Vanilla JS 프로젝트 시작 배경 프론트엔드 분야에서 빼놓을 수 없는 자바스크립트를 중점적으로 공부하고 있는데, 무엇인가를 직접 만드는 것보다 좋은 공부는 없다고 생각하여, 무엇을 만들지 고민하던 중에, 정말 정말 유명한 Todo List를 만들어보자고 생각했습니다. 지난 포스팅에서는 html, css, javascript 를 이용하여, 아무 구조도 갖추고 있지 않은 To do list 프로젝트로 만들어봤습니다. ( >> Todo list Basic >> ) 하지만 이번에는 To do list에 MVC 구조를 적용하여 보다 유지보수성이 높고 구조를 갖춘 To do MVC를 만드는 프로젝트입니다. To do MVC 공식 홈페이지에서는 각종 프레..

Final Step. 스타일링 최종 코드가 담인 github 주소이다.>>To do List Project with only JavaScript by Jbee >>처음에 목표로 했던 기능들을 모두 추가하였다.이제 디자인적 요소를 추가할 차례다. 일단 최종적인 코드를 먼저 보여주겠다. index.html code> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 To Do List a{ color:#000; } a:hover{ color:#000; text-decoration: none; } To do List Write and Press Enter! Done Colored by Color ..

Step 10. 삭제 버튼 구현하기 그러고보니 더블 클릭을 이동으로 변경하고 삭제하기를 할 수 있는 버튼을 만들지 않았다. 한 번 복습한다고 해보자. className을 통해 font-awesome을 이용하고, id 값을 설정해주고, appendChild를 통해 출력해준다. main.js code> 123456var minusIcon = document.createElement('i');minusIcon.className = 'fa fa-minus';minusIcon.id = 'minusIcon_' + id;minusIcon.onclick = deleteItem; listItem.appendChild(minusIcon);cs 수정 아이콘(연필 아이콘)처럼 마우스가 over 되었을 때만 나타나게 하기 위해..