jQuery로 간단한 todo 만들기

제이쿼리로 투두리스트 간단하게 만들어봤습니다.

인풋박스에서 텍스트 작성하고 엔터치면 리스트 추가되도록 했습니다.

 

<div id="main">
   <h1>jQuery Todo List</h1>
   <input type="text" placeholder="입력창">
   <ul>
      <li>청소하기 <span class="chk">check</span><span class="btn_remove">del</span></li>
      <li>장보기 <span class="chk">check</span><span class="btn_remove">del</span></li>
      <li>공부하기 <span class="chk">check</span><span class="btn_remove">del</span></li>
      <li>쇼핑하기 <span class="chk">check</span><span class="btn_remove">del</span></li>
   </ul>
   <button id="btn_allclear">clear</button>
</div>

 

* {
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none;
   color: #333;
   text-align: center;
   box-sizing: border-box;
}

#main {
   padding: 30px 20px;
   margin: 0 auto;
   width: 500px;
   background: #ddd;
}

h1 {
   padding: 0 0 20px;
   color: #fff;
}

ul li {
   display: flex;
   padding: 0 25px;
   margin: 0 0 10px;
   height: 40px;
   line-height: 40px;
   background: #fff;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   transition:all 0.3s ease;
}

ul li.on {
   background:#333;
   color:#fff;
}

.chk {
   margin:0 0 0 auto;
   color:blue;
   font-weight:bold;
   cursor:pointer;
}

.btn_remove {
   margin: 0 0 0 10px;
   cursor: pointer;
   color: red;
   font-weight: bold;
}

button {
   margin: 40px auto 0;
   width: 200px;
   height: 50px;
   background: #333;
   color: #fff;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   cursor: pointer;
}

input {
   padding: 0 30px;
   margin: 0 0 50px;
   width: 100%;
   height: 50px;
   border: 0;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   text-align: left;
}

 

$(function() {

   var $input = $('input'),
   	$clearBtn = $('.btn_remove'),
      $chkBtn = $('.chk'),
   	$allClearBtn = $('#btn_allclear');

   $input.on('keypress', addList);
   // 동적으로 생성된거라 document에서 부터 잡아옴
   $(document).on('click', '.chk', chkList);
   $(document).on('click', '.btn_remove', removeList);
   $allClearBtn.on('click', allRemoveList);

   function addList($e) {
   	var $thisVal = $(this).val();
      
      if ($e.which == 13 && $thisVal !== '') {
         $('ul').append('<li>'+ $thisVal +' <span class="chk">check</span><span class="btn_remove">del</span></li>');
         // 텍스트 입력후 인풋박스 클리어
         $(this).val('');
      }
      
   }
   
   function chkList(){
   	$(this).parent('li').toggleClass('on');
   }
   
   function removeList(){
   	$(this).parent('li').remove();
   }
   
   function allRemoveList(){
   	$('li').remove();
   }



});

 

jsffidle에서 보기

https://jsfiddle.net/hyuckjin/0qkmjh39/