[Todolist_Basic] Step 6. Donelist 생성하기

Step 6. Donelist 생성하기

삭제하는 것은 잘못 만들었을 때 삭제하는 것으로 기능을 바꾸고,

더블클릭을 하면 Done으로 되서 Donelist로 옮기는 기능으로 수정하는게 좀 더 직관적일 것 같다.

체크박스도 디자인상 보기가 안좋다.

그래서 체크박스를 생성하지 말고, 했다는 것을 Donelist로 옮겨서 style을 적용하자.

삭제 기능은 나중에 다른 아이콘을 통해 구현하자.

column을 쉽게 나누기 위해 부트스트랩 그리드를 적용했다.

>> 부트스트랩 그리드 관련 포스팅 >> 

index.html code>

<div class="container">
    <div class="row">
        <a href="todolist.html"><h1 id="todolistHeader">To do List</h1></a>
    </div>
 
    <div class="row">
        <div class="col-sm-6">
            <hr>
            <p id="enter">Write what to do and Press Enter!</p>
 
            <p class="inputarea">
                <input type="text" id="inputText" placeholder="what to do"/>
                <ul id="todolist"></ul>
            </p>
        </div>
        <div class="col-sm-6">
            <hr>
            <p id="enter">Done</p>
 
            <ul id="donelist"></ul>
 
        </div>
    </div>
</div>

removeItem( ) 함수와 비슷하다.

listItem을 잡은 다음 ( 이번 listItem도 local variable이다. )

그리고 appendChild를 다시 해주는 것이다.

main.js code>

var donelist = document.getElementById('donelist');
function moveItem(){
  //this === span
  var listItemId = this.id.replace('li_', '');
  var listItem = document.getElementById('li_' + listItemId);
  donelist.appendChild(listItem);
}

 

CSS 부분은 donelist 영역은 뭔가 다른 디자인으로 하면 좋을것 같아서

짧은 디자인 감각으로 바꾸어보았다.

style.css code>

#donelist li{
    border-bottom: 1px dashed #ccc;
    margin-bottom: 4px;
    width: 30em;
    height: 2.5em;
    padding: 5px 10px;

}

#donelist li span{
    font-size: 1.3em;
    font-weight: 200;
    padding-left: 10px;
    vertical-align: middle;
    cursor: default;
    text-decoration: line-through;
    color: red;
}

 

이젠 정말 그럴듯 해졌다!

- Step 6. The end -

 

Step 7. '수정' 버튼 생성하기. [이동]