client side rendering example 1

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Todo App</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <header class="todo-header">
        <h3>Sample Todo App</h3>
      </header>
      <section class="panel">
        <h3>할 일 추가하기</h3>
        <form class="new-todo">
          <input type="text" id="todo-title" placeholder="할 일을 입력하세요!">
          <button class="btn btn-add pull-right">추가</button>
        </form>
      </section>
      <section class="panel">
        <h3>해야 할 일</h3>
        <ul class="todos todos-inprogress">
          
        </ul>
      </section>
      <section class="panel">
        <h3>완료한 일<button class="btn btn-default inline pull-right todo-complete-clear-button">비우기</button></h3>
        <ul class="todos todos-completed">
        </ul>
      </section>
      <aside class="panel todo-info">
        <strong class="todo-total-count">3</strong>개 중 
        <strong class="todo-complete-count">2</strong>개를 완료했습니다.
      </aside>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

(function($){
  var todos = [];
  
  if(window.localStorage && window.localStorage.todos !== undefined){
    todos = JSON.parse(window.localStorage.todos);
    console.log(localStorage.todos);
    console.log(todos.length)
  }
  
  function sync(){
    window.localStorage.todos = JSON.stringify(todos);  
    console.log(localStorage.todos);
  }
  
  function updateTodoInfo(){
    var todoCompleteCount = 0;
    for(var i = 0; i < todos.length; i++){
      if(todos[i].isComplete){
        todoCompleteCount = todoCompleteCount + 1;
      }
    }
    
    // dom 접근해서 값 변경
    $('.todo-complete-count').text(todoCompleteCount);
    $('.todo-total-count').text(todos.length);
  }
  
  $(document).ready(function(){
    // todos render
    for(var i = 0; i < todos.length; i++){
      if(todos[i].isComplete){
        $('.todos-completed').append(
        '<li class="panel todo" id="todo-' + todos[i].id + '">' +
          todos[i].title + 
        '</li>'
        );
      }else{
        $('.todos-inprogress').append(
          '<li class="panel todo" id="todo-' + todos[i].id + '">' +
            '<label>' +
              '<input type="checkbox" class="todo-complete">' + todos[i].title + 
            '</label>' +
            '<button class="btn btn-remove pull-right">삭제</button>' +
          '</li>'
          );  
      } 
    }
    updateTodoInfo();
    
    // add event binding
    $('.new-todo').on('submit', function(event){
      var $todoTitle = $('#todo-title');
      var todoTitle = $todoTitle.val();
      var todo = {
        title: todoTitle, 
        id: new Date().getTime(),
        isComplete: false
      };
      $('.todos-inprogress').append(
        '<li class="panel todo" id="todo-' + todo.id + '">' +
          '<label>' +
            '<input type="checkbox" class="todo-complete">' + todo.title + 
          '</label>' +
          '<button class="btn btn-remove pull-right">삭제</button>' +
        '</li>'  
      );
      $todoTitle.val('');
      
      todos.push(todo);
      sync();
      updateTodoInfo();
      
      event.preventDefault();
    });
    
    // todo complete event
    $('.todos-inprogress').on('click', '.todo-complete', function(){
      var $completeTodo = $(this).parents('.todo');
      var todoId = $completeTodo.attr('id').replace('todo-', '');
      var todo, i;
      
      // 완료 처리
      for(i = 0; i < todos.length; i++){
        todo = todos[i];
        if(todo.id === parseInt(todoId)){
          todo.isComplete = true;
          break;
        }
      }
      
      $completeTodo.find('input[type=checkbox]').remove();
      $completeTodo.find('.btn-remove').remove();
      $('.todos-completed').append($completeTodo);
      
      sync();
      updateTodoInfo();
    });
    
    // remove event binding
    $('.todos-inprogress').on('click', '.btn-remove', function(){
      var $deleteTodo = $(this).parents('.todo');
      var todoId = $deleteTodo.attr('id').replace('todo-', '');
      $(this).parents('.todo').remove();
      
      for(i = 0; i < todos.length; i++){
        todo = todos[i];
        if(todo.id === parseInt(todoId)){
          todos.splice(i, 1);
          break;
        }
      }
      
      sync();
      updateTodoInfo();
    });
    
    $('.todo-complete-clear-button').on('click', function(){
      var inprogressTodos = [], i;
      for(i = 0; i < todos.length; i++){
        if(!todos[i].isComplete){
          inprogressTodos.push(todos[i]);
        }
      }
      
      todo = inprogressTodos;
      
      // html 비우기
      $('.todos-completed').html('');
    });
  });
})(jQuery);

html{
  height: 100%;
}
body{
  background-color:#ffffff;
  margin: 0;
  height:100%;
}
.container{
  background-color:#eeeeee;
  margin:0 auto;
  width: 450px;
  height:100%;
  padding:10px;
  position:relative;
}

.panel{
  margin:10px 10px 10px 10px;
  padding: 10px;
  border: 1px solid #cccccc;
  background-color:#ffffff;
  border-radius: 3px;
  box-shadow: 2px 2px 5px -1px;
}

.panel-heading{
  font-weight:bold;
  background-color:#eeeeee;
}

.todos{
  list-style:none;
  padding-left:0;
}

.todos li{
  margin-bottom:5px;
}

.todos li .btn-remove{
  margin-top:-5px;
}
.todo-info{
  position:fixed;
  width:200px;
  right: 10px;
  top:5px;
  font-size:12px;
}

.todo-wrapper{
  border: 1px solid #cccccc;
  background-color:#ffffff;
}

.todo-completed{
  text-decoration:overline;
}

.btn{
  padding: 5px;
  border-radius:3px;
  background:none;
  cursor: pointer;
}

.btn-add{
  border:1px solid #9999ff;
  background-color: #ccccff;
}

.btn-remove{
  background-color:#ffcccc;
  border:1px solid #ff9999;
}

.btn-default{
  background-color:#ffffff;
  border: 1px solid #cccccc;
}
.inline{
  display:inline;  
}

.pull-left{
  float:left;
}
.pull-right{
  float:right;
}
.clearfix{
  clear:both;
}