TO DO LIST 제작

할 일을 생성 하고 삭제하기 위해  TO DO LIST을 만들었다.

<div id="inputField">
	<input type="text" id="todoInput" placeholder="할 일 추가하기">
	<button class="btn btn-primary" type="button" id="addBtn">
		<span></span>
        <span></span>
	</button>
</div>
<ul id="todoList">
	<li class="todoCheck">
    	<button class="todoCheckbtn"></button>
        <span class="card-text"></span>
 	</li>
</ul>

 

 

위 과정에서 <li class="complete">를 toggle하여서 체크 박스의 On Off를 구현했다.

 

$(".todoCheckbtn").click(async function () {
            $(".todoCheck").toggleClass('complete');
})

 

 

toggle을 display를  On Off에만 사용하다가 CSS에 적용하여 디자인 효과를 줄 수 있다는 점을 알게되었다.

 

#todoList li.complete {
	text-decoration: line-through;
	color: green;
}