makzan/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="TODO List Example" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>TODO List</title>
<style id="jsbin-css">
.templates {
  display: none;
}

.done {
  color: lightgray;
  text-decoration: line-through;
}
</style>
</head>
<body>

  <fieldset>
    <label for='new-todo'>New todo</label>
    <input id='new-todo' type='text'>
  </fieldset>

  <input id='create-todo-btn' type='button' value='Create TODO'>

  <input id='clear-todo-btn' type='button' value='Delete Completed Todos'>

  <ul id='todo-list'>
    <!-- new item should be added by JavaScript. -->
  </ul>

  <!-- Template objects for jQuery to use -->
  <!-- Should be hidden from user's view -->
  <div id='templates' class='templates'>
    <li class='todo-list-item' data-index='-1'>
      <label>
        <input type='checkbox'>
        <span>Temporary todo item.</span>
      </label>
    </li>
  </div>
  <!-- end template declaration -->
<script id="jsbin-javascript">
var todos = [];

// todos[0] = {
//   isDone: true,
//   value: "Item value here."
// };

////////// DATA logic

function saveTodos(){
  localStorage.setItem('todos', JSON.stringify(todos));
}
function loadTodos(){
  var value = localStorage.getItem('todos');
  if (value !== null) {
    todos = JSON.parse(value);
  }
}

function pushToTodos(value) {
  var obj = {
    isDone: false,
    value: value
  };
  console.log(todos, obj);
  todos.push(obj);
}

function markTodoAsDone(index) {
  var obj = todos[index];
  obj.isDone = true;
  saveTodos();
  renderTodoItems(todos);
}
function markTodoAsIncompleted(index) {
  var obj = todos[index];
  obj.isDone = false;
  saveTodos();
  renderTodoItems(todos);
}

function isTodoDone(todo) {
  return todo.isDone;
}

function valueOfTodo(todo) {
  return todo.value;
}

function removeCompletedTodos() {
  for(var i=todos.length-1; i >=0 ; i--) {
    if (isTodoDone(todos[i])) {
      todos.splice(i, 1);
    }
  }
}

///////// View logic

function renderTodoItems(todos) {
  $('#todo-list').empty();

  for(var i=0, len=todos.length; i < len; i++) {
    // clone list item from template
    newItemElm = $('#templates').find('.todo-list-item').clone();

    // set data-index
    newItemElm.data('index', i);

    // todo value
    var value = valueOfTodo(todos[i]);

    // replace the text to use input value
    newItemElm.find('span').text(value);

    // set Done style
    if (isTodoDone(todos[i])) {
      newItemElm.addClass('done');
      newItemElm.find("input[type='checkbox']").prop('checked', true);
    }

    // add the new list item to the list, finally.
    $('#todo-list').append(newItemElm);
  }
}

// View logic to create todo item from the input
function createTodo() {
  // get the string value of input todo
  var newTodo = $('#new-todo').val();

  pushToTodos(newTodo);

  renderTodoItems(todos);

  saveTodos();

  // empty the input feild
  $('#new-todo').val('');
}

// Interface event handling

// handle the create button logic
$('#create-todo-btn').click(function(){
  createTodo();
});

// handle all the checkbox click logic, for existing checkbox and future checkbox
$('#todo-list').delegate('input[type="checkbox"]', 'change', function(){
  var checkbox = $(this);
  var isChecked = checkbox.is(':checked');
  var index = checkbox.parents('li').data('index');

  if (isChecked) {
    markTodoAsDone(index);
  } else {
    markTodoAsIncompleted(index);
  }

});

// handle the button to clear all completed todos
$('#clear-todo-btn').click(function() {
  removeCompletedTodos();
  saveTodos();
  renderTodoItems(todos);
});

// Allow pressing ENTER to create new todo from the input
$('#new-todo').on('keyup', function(event){
  if (event.keyCode === 13) {
    createTodo();
  }
});

/////////////// END of function declarations

// Entry point of the web application.
loadTodos();
renderTodoItems(todos);
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="TODO List Example" />
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
  <meta charset="utf-8">
  <title>TODO List</title>
</head>
<body>

  <fieldset>
    <label for='new-todo'>New todo</label>
    <input id='new-todo' type='text'>
  </fieldset>

  <input id='create-todo-btn' type='button' value='Create TODO'>

  <input id='clear-todo-btn' type='button' value='Delete Completed Todos'>

  <ul id='todo-list'>
    <\!-- new item should be added by JavaScript. -->
  </ul>

  <\!-- Template objects for jQuery to use -->
  <\!-- Should be hidden from user's view -->
  <div id='templates' class='templates'>
    <li class='todo-list-item' data-index='-1'>
      <label>
        <input type='checkbox'>
        <span>Temporary todo item.</span>
      </label>
    </li>
  </div>
  <\!-- end template declaration -->
</body>
</html>


  </script>

<script id="jsbin-source-css" type="text/css">.templates {
  display: none;
}

.done {
  color: lightgray;
  text-decoration: line-through;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var todos = [];

// todos[0] = {
//   isDone: true,
//   value: "Item value here."
// };

////////// DATA logic

function saveTodos(){
  localStorage.setItem('todos', JSON.stringify(todos));
}
function loadTodos(){
  var value = localStorage.getItem('todos');
  if (value !== null) {
    todos = JSON.parse(value);
  }
}

function pushToTodos(value) {
  var obj = {
    isDone: false,
    value: value
  };
  console.log(todos, obj);
  todos.push(obj);
}

function markTodoAsDone(index) {
  var obj = todos[index];
  obj.isDone = true;
  saveTodos();
  renderTodoItems(todos);
}
function markTodoAsIncompleted(index) {
  var obj = todos[index];
  obj.isDone = false;
  saveTodos();
  renderTodoItems(todos);
}

function isTodoDone(todo) {
  return todo.isDone;
}

function valueOfTodo(todo) {
  return todo.value;
}

function removeCompletedTodos() {
  for(var i=todos.length-1; i >=0 ; i--) {
    if (isTodoDone(todos[i])) {
      todos.splice(i, 1);
    }
  }
}

///////// View logic

function renderTodoItems(todos) {
  $('#todo-list').empty();

  for(var i=0, len=todos.length; i < len; i++) {
    // clone list item from template
    newItemElm = $('#templates').find('.todo-list-item').clone();

    // set data-index
    newItemElm.data('index', i);

    // todo value
    var value = valueOfTodo(todos[i]);

    // replace the text to use input value
    newItemElm.find('span').text(value);

    // set Done style
    if (isTodoDone(todos[i])) {
      newItemElm.addClass('done');
      newItemElm.find("input[type='checkbox']").prop('checked', true);
    }

    // add the new list item to the list, finally.
    $('#todo-list').append(newItemElm);
  }
}

// View logic to create todo item from the input
function createTodo() {
  // get the string value of input todo
  var newTodo = $('#new-todo').val();

  pushToTodos(newTodo);

  renderTodoItems(todos);

  saveTodos();

  // empty the input feild
  $('#new-todo').val('');
}

// Interface event handling

// handle the create button logic
$('#create-todo-btn').click(function(){
  createTodo();
});

// handle all the checkbox click logic, for existing checkbox and future checkbox
$('#todo-list').delegate('input[type="checkbox"]', 'change', function(){
  var checkbox = $(this);
  var isChecked = checkbox.is(':checked');
  var index = checkbox.parents('li').data('index');

  if (isChecked) {
    markTodoAsDone(index);
  } else {
    markTodoAsIncompleted(index);
  }

});

// handle the button to clear all completed todos
$('#clear-todo-btn').click(function() {
  removeCompletedTodos();
  saveTodos();
  renderTodoItems(todos);
});

// Allow pressing ENTER to create new todo from the input
$('#new-todo').on('keyup', function(event){
  if (event.keyCode === 13) {
    createTodo();
  }
});

/////////////// END of function declarations

// Entry point of the web application.
loadTodos();
renderTodoItems(todos);


</script></body>
</html>

## jsbin.gorena.css
.templates {
  display: none;
}

.done {
  color: lightgray;
  text-decoration: line-through;
}

## jsbin.gorena.js
var todos = [];

// todos[0] = {
//   isDone: true,
//   value: "Item value here."
// };

////////// DATA logic

function saveTodos(){
  localStorage.setItem('todos', JSON.stringify(todos));
}
function loadTodos(){
  var value = localStorage.getItem('todos');
  if (value !== null) {
    todos = JSON.parse(value);
  }
}

function pushToTodos(value) {
  var obj = {
    isDone: false,
    value: value
  };
  console.log(todos, obj);
  todos.push(obj);
}

function markTodoAsDone(index) {
  var obj = todos[index];
  obj.isDone = true;
  saveTodos();
  renderTodoItems(todos);
}
function markTodoAsIncompleted(index) {
  var obj = todos[index];
  obj.isDone = false;
  saveTodos();
  renderTodoItems(todos);
}

function isTodoDone(todo) {
  return todo.isDone;
}

function valueOfTodo(todo) {
  return todo.value;
}

function removeCompletedTodos() {
  for(var i=todos.length-1; i >=0 ; i--) {
    if (isTodoDone(todos[i])) {
      todos.splice(i, 1);
    }
  }
}

///////// View logic

function renderTodoItems(todos) {
  $('#todo-list').empty();

  for(var i=0, len=todos.length; i < len; i++) {
    // clone list item from template
    newItemElm = $('#templates').find('.todo-list-item').clone();

    // set data-index
    newItemElm.data('index', i);

    // todo value
    var value = valueOfTodo(todos[i]);

    // replace the text to use input value
    newItemElm.find('span').text(value);

    // set Done style
    if (isTodoDone(todos[i])) {
      newItemElm.addClass('done');
      newItemElm.find("input[type='checkbox']").prop('checked', true);
    }

    // add the new list item to the list, finally.
    $('#todo-list').append(newItemElm);
  }
}

// View logic to create todo item from the input
function createTodo() {
  // get the string value of input todo
  var newTodo = $('#new-todo').val();

  pushToTodos(newTodo);

  renderTodoItems(todos);

  saveTodos();

  // empty the input feild
  $('#new-todo').val('');
}

// Interface event handling

// handle the create button logic
$('#create-todo-btn').click(function(){
  createTodo();
});

// handle all the checkbox click logic, for existing checkbox and future checkbox
$('#todo-list').delegate('input[type="checkbox"]', 'change', function(){
  var checkbox = $(this);
  var isChecked = checkbox.is(':checked');
  var index = checkbox.parents('li').data('index');

  if (isChecked) {
    markTodoAsDone(index);
  } else {
    markTodoAsIncompleted(index);
  }

});

// handle the button to clear all completed todos
$('#clear-todo-btn').click(function() {
  removeCompletedTodos();
  saveTodos();
  renderTodoItems(todos);
});

// Allow pressing ENTER to create new todo from the input
$('#new-todo').on('keyup', function(event){
  if (event.keyCode === 13) {
    createTodo();
  }
});

/////////////// END of function declarations

// Entry point of the web application.
loadTodos();
renderTodoItems(todos);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="TODO List Example" />
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<meta charset="utf-8">
	<title>TODO List</title>
	<style id="jsbin-css">
	.templates {
	display: none;
	}

	.done {
	color: lightgray;
	text-decoration: line-through;
	}
	</style>
	</head>
	<body>

	<fieldset>
	<label for='new-todo'>New todo</label>
	<input id='new-todo' type='text'>
	</fieldset>

	<input id='create-todo-btn' type='button' value='Create TODO'>

	<input id='clear-todo-btn' type='button' value='Delete Completed Todos'>

	<ul id='todo-list'>
	<!-- new item should be added by JavaScript. -->
	</ul>

	<!-- Template objects for jQuery to use -->
	<!-- Should be hidden from user's view -->
	<div id='templates' class='templates'>
	<li class='todo-list-item' data-index='-1'>
	<label>
	<input type='checkbox'>
	<span>Temporary todo item.</span>
	</label>
	</li>
	</div>
	<!-- end template declaration -->
	<script id="jsbin-javascript">
	var todos = [];

	// todos[0] = {
	// isDone: true,
	// value: "Item value here."
	// };

	////////// DATA logic

	function saveTodos(){
	localStorage.setItem('todos', JSON.stringify(todos));
	}
	function loadTodos(){
	var value = localStorage.getItem('todos');
	if (value !== null) {
	todos = JSON.parse(value);
	}
	}

	function pushToTodos(value) {
	var obj = {
	isDone: false,
	value: value
	};
	console.log(todos, obj);
	todos.push(obj);
	}

	function markTodoAsDone(index) {
	var obj = todos[index];
	obj.isDone = true;
	saveTodos();
	renderTodoItems(todos);
	}
	function markTodoAsIncompleted(index) {
	var obj = todos[index];
	obj.isDone = false;
	saveTodos();
	renderTodoItems(todos);
	}

	function isTodoDone(todo) {
	return todo.isDone;
	}

	function valueOfTodo(todo) {
	return todo.value;
	}

	function removeCompletedTodos() {
	for(var i=todos.length-1; i >=0 ; i--) {
	if (isTodoDone(todos[i])) {
	todos.splice(i, 1);
	}
	}
	}

	///////// View logic

	function renderTodoItems(todos) {
	$('#todo-list').empty();

	for(var i=0, len=todos.length; i < len; i++) {
	// clone list item from template
	newItemElm = $('#templates').find('.todo-list-item').clone();

	// set data-index
	newItemElm.data('index', i);

	// todo value
	var value = valueOfTodo(todos[i]);

	// replace the text to use input value
	newItemElm.find('span').text(value);

	// set Done style
	if (isTodoDone(todos[i])) {
	newItemElm.addClass('done');
	newItemElm.find("input[type='checkbox']").prop('checked', true);
	}

	// add the new list item to the list, finally.
	$('#todo-list').append(newItemElm);
	}
	}

	// View logic to create todo item from the input
	function createTodo() {
	// get the string value of input todo
	var newTodo = $('#new-todo').val();

	pushToTodos(newTodo);

	renderTodoItems(todos);

	saveTodos();

	// empty the input feild
	$('#new-todo').val('');
	}

	// Interface event handling

	// handle the create button logic
	$('#create-todo-btn').click(function(){
	createTodo();
	});

	// handle all the checkbox click logic, for existing checkbox and future checkbox
	$('#todo-list').delegate('input[type="checkbox"]', 'change', function(){
	var checkbox = $(this);
	var isChecked = checkbox.is(':checked');
	var index = checkbox.parents('li').data('index');

	if (isChecked) {
	markTodoAsDone(index);
	} else {
	markTodoAsIncompleted(index);
	}

	});

	// handle the button to clear all completed todos
	$('#clear-todo-btn').click(function() {
	removeCompletedTodos();
	saveTodos();
	renderTodoItems(todos);
	});

	// Allow pressing ENTER to create new todo from the input
	$('#new-todo').on('keyup', function(event){
	if (event.keyCode === 13) {
	createTodo();
	}
	});

	/////////////// END of function declarations

	// Entry point of the web application.
	loadTodos();
	renderTodoItems(todos);
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="TODO List Example" />
	<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
	<meta charset="utf-8">
	<title>TODO List</title>
	</head>
	<body>

	<fieldset>
	<label for='new-todo'>New todo</label>
	<input id='new-todo' type='text'>
	</fieldset>

	<input id='create-todo-btn' type='button' value='Create TODO'>

	<input id='clear-todo-btn' type='button' value='Delete Completed Todos'>

	<ul id='todo-list'>
	<\!-- new item should be added by JavaScript. -->
	</ul>

	<\!-- Template objects for jQuery to use -->
	<\!-- Should be hidden from user's view -->
	<div id='templates' class='templates'>
	<li class='todo-list-item' data-index='-1'>
	<label>
	<input type='checkbox'>
	<span>Temporary todo item.</span>
	</label>
	</li>
	</div>
	<\!-- end template declaration -->
	</body>
	</html>















	</script>

	<script id="jsbin-source-css" type="text/css">.templates {
	display: none;
	}

	.done {
	color: lightgray;
	text-decoration: line-through;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var todos = [];

	// todos[0] = {
	// isDone: true,
	// value: "Item value here."
	// };

	////////// DATA logic

	function saveTodos(){
	localStorage.setItem('todos', JSON.stringify(todos));
	}
	function loadTodos(){
	var value = localStorage.getItem('todos');
	if (value !== null) {
	todos = JSON.parse(value);
	}
	}

	function pushToTodos(value) {
	var obj = {
	isDone: false,
	value: value
	};
	console.log(todos, obj);
	todos.push(obj);
	}

	function markTodoAsDone(index) {
	var obj = todos[index];
	obj.isDone = true;
	saveTodos();
	renderTodoItems(todos);
	}
	function markTodoAsIncompleted(index) {
	var obj = todos[index];
	obj.isDone = false;
	saveTodos();
	renderTodoItems(todos);
	}

	function isTodoDone(todo) {
	return todo.isDone;
	}

	function valueOfTodo(todo) {
	return todo.value;
	}

	function removeCompletedTodos() {
	for(var i=todos.length-1; i >=0 ; i--) {
	if (isTodoDone(todos[i])) {
	todos.splice(i, 1);
	}
	}
	}

	///////// View logic

	function renderTodoItems(todos) {
	$('#todo-list').empty();

	for(var i=0, len=todos.length; i < len; i++) {
	// clone list item from template
	newItemElm = $('#templates').find('.todo-list-item').clone();

	// set data-index
	newItemElm.data('index', i);

	// todo value
	var value = valueOfTodo(todos[i]);

	// replace the text to use input value
	newItemElm.find('span').text(value);

	// set Done style
	if (isTodoDone(todos[i])) {
	newItemElm.addClass('done');
	newItemElm.find("input[type='checkbox']").prop('checked', true);
	}

	// add the new list item to the list, finally.
	$('#todo-list').append(newItemElm);
	}
	}

	// View logic to create todo item from the input
	function createTodo() {
	// get the string value of input todo
	var newTodo = $('#new-todo').val();

	pushToTodos(newTodo);

	renderTodoItems(todos);

	saveTodos();

	// empty the input feild
	$('#new-todo').val('');
	}

	// Interface event handling

	// handle the create button logic
	$('#create-todo-btn').click(function(){
	createTodo();
	});

	// handle all the checkbox click logic, for existing checkbox and future checkbox
	$('#todo-list').delegate('input[type="checkbox"]', 'change', function(){
	var checkbox = $(this);
	var isChecked = checkbox.is(':checked');
	var index = checkbox.parents('li').data('index');

	if (isChecked) {
	markTodoAsDone(index);
	} else {
	markTodoAsIncompleted(index);
	}

	});

	// handle the button to clear all completed todos
	$('#clear-todo-btn').click(function() {
	removeCompletedTodos();
	saveTodos();
	renderTodoItems(todos);
	});

	// Allow pressing ENTER to create new todo from the input
	$('#new-todo').on('keyup', function(event){
	if (event.keyCode === 13) {
	createTodo();
	}
	});

	/////////////// END of function declarations

	// Entry point of the web application.
	loadTodos();
	renderTodoItems(todos);




























	</script></body>
	</html>