<div id="wrapper">
    
    <header>
      <input type="text" placeholder="할 일을 입력해 주세요." id="txt">
      <button id="add">+</button>
    </header>

    <div class="container">
      
      <!-- 할 일 목록 -->
      <ul class="list" id="todo">
        
        <!-- <li>
          동해물과 백두산이
          <div class="buttons">
            <button class="remove"></button>
            <button class="complete"></button>
          </div>
        </li> -->

      </ul>

      <!-- 완료 목록 -->
      <ul class="list" id="completed">
        
        <!-- <li>
          동해물과 백두산이
          <div class="buttons">
            <button class="remove"></button>
            <button class="complete"></button>
          </div>
        </li> -->

      </ul>

    </div>

  </div>

/* reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}




/* Custom */
* {
  box-sizing: border-box;
}

body {
  padding-top: 80px;
}

body, input, button {
  background: white;
}

#wrapper {
  overflow: hidden;
  width: 500px;
  margin: 0 auto;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

header {
  position: relative;

  width: 100%;
  height: 80px;
  background-color: blue;

  padding: 15px;

  top: 0;
  left: 0;
  z-index: 5;
}

header input {
  float: left;
  width: 100%;
  height: 50px;

  font-size: 15px;
  color: #ffffff;

  text-indent: 18px;

  padding: 0 60px 0 0;

  background: rgba(255, 255, 255, .3);
  border: 0;
  outline: none;
}

header input::-webkit-input-placeholder {
  color: #ffffff;
}

header button {
  position: absolute;
  width: 50px;
  height: 50px;

  top: 15px;
  right: 15px;

  z-index: 2;

  border-radius: 50%;
  background: white;

  font-size: 20px;

  cursor: pointer;
}


.container {
  float: left;
  width: 100%;
  padding: 15px;
}

ul.list {
  width: 100%;
  float: left;
}

ul.list li {
  position: relative;

  float: left;
  width: 100%;
  min-height: 50px;
  background-color: #fff;

  margin: 0 0 10px 0;
  padding: 14px 100px 14px 14px;

  font-size: 14px;

  color: #444444;

  line-height: 22px;
}

ul.list li .buttons {
  position: absolute;
  width: 100px;
  height: 50px;

  top: 0;
  right: 0;
}

ul.list li .buttons button {
  float: left;
  position: relative;

  width: 50px;
  height: 50px;

  border: none;
  cursor: pointer;
}

ul.list li .buttons button.remove {
  background-color: #c0cecb;
}

ul.list li .buttons button.complete {
  background-color: #1f2ee2;
}

ul.list#completed {
  position: relative;

  padding: 100px 0 0 0;
}


















var addBtn = document.getElementById('add');

addBtn.addEventListener('click', function() {

  var value = document.getElementById('txt').value;

  // 값이 있을 때만 인식하도록
  if(value) {
    // console.log(value);

    addListTodo(value);
    // 값 입력 후 input 초기화 되도록 빈 값을 할당함
    document.getElementById('txt').value = "";
  }

})

// html 요소 생성

// 할 일 추가
function addListTodo(text) {

  var list = document.getElementById('todo');
  var item = document.createElement('li');

  // item의 텍스트 정보에 접근하여 text를 넣어줌
  item.textContent = text;

  var buttons = document.createElement('div');
  buttons.classList.add('buttons');

  var remove = document.createElement('button');
  remove.classList.add('remove');
  remove.addEventListener('click', removeList);

  var complete = document.createElement('button');
  complete.classList.add('complete');
  complete.addEventListener('click', completeList);

  buttons.appendChild(remove);
  buttons.appendChild(complete);
  item.appendChild(buttons);

  // li 태그가 매번 첫번째 자식으로 붙도록 
  list.insertBefore(item, list.childNodes[0])
}


// 할 일 삭제

function removeList() {

  // 내가 클릭한 영역 자신을 삭제하도록 
  //'this'로 버튼을 찍고 부모의 부모로 li까지 올라감
  var item = this.parentNode.parentNode;
  var parent = item.parentNode; // ul 태그

  parent.removeChild(item);

}


// 할 일과 한 일 구분 및 이동

function completeList() {

  var item = this.parentNode.parentNode; // li
  var parent = item.parentNode; // ul
  var id = parent.id; // ul의 id값

  // 이동
  var target = (id === 'todo')
          ? document.getElementById('completed')
          : document.getElementById('todo');

  // 한 일은 todo에서 삭제하고 아래로 이동됨 
  parent.removeChild(item);
  target.insertBefore(item, target.childNodes[0]);
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.