simon0191/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Todo List</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <h1>Todo List</h1>

    <input type="text" id="input" placeholder="¿Qué necesitas hacer?">
    <ul class="todo-list">
    </ul>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
   var counter = 1;
   var $input = $('#input');

    $(document).ready(function(){
      $input.keyup(function(e){
        if (e.which == 13) {
          var texto = $input.val();
          $input.val("");

          var $taskCheckbox = $('<input>')
            .attr({type: "checkbox"})
            .addClass("caja");

          var $deleteButton = $('<button/>')
            .addClass("hidden equis")
            .attr({name: "button", type: "button"})
            .text("x");

          var $newTask = $('<li/>')
            .attr({id:counter})
            .append([$taskCheckbox,texto,$deleteButton]);

           $('.todo-list').append($newTask);

          counter += 1;
          };
       });

      $(document).on('mouseenter', 'li', function(event){
          $(event.target).addClass('active');
          $(event.target).find('button').removeClass('hidden');
        });

      $(document).on('click', 'button', function(event) {
           $(event.target).parent().remove();
        });

       $(document).on('mouseleave', 'li', function(event){
          $(event.target).removeClass('active');
          $(event.target).find('button').addClass('hidden');
       });

       $(document).on('click', '.caja', function(event){
           $(event.target).parent().toggleClass('donetask');
        });
    });
  </script>

</body>
</html>

## style.css
* { box-sizing: border-box; }

body {
  background: #edeff0;
  color: #333;
  font-family: 'Helvetica Nueue', sans-serif;
}

.wrapper {
  background: white;
  width: 500px;
  margin: auto;
  padding: 15px 30px;
  border-radius: 10px;
}

#input {
  font-size: 16px;
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

ul {
  color: #666;
  list-style-type: none;
  padding: 0;
}

li {
  padding: 15px 15px 15px 10px;
  border-radius: 5px;
}

.active {
    background-color: #f5f5f5;

}

.donetask {
    text-decoration: line-through;
}

.hidden {
  display: none;
 }

.equis {
  float: right;
  background-color: #f5f5f5;
  border-style: none;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Todo List</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="wrapper">
	<h1>Todo List</h1>

	<input type="text" id="input" placeholder="¿Qué necesitas hacer?">
	<ul class="todo-list">
	</ul>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
	var counter = 1;
	var $input = $('#input');

	$(document).ready(function(){
	$input.keyup(function(e){
	if (e.which == 13) {
	var texto = $input.val();
	$input.val("");

	var $taskCheckbox = $('<input>')
	.attr({type: "checkbox"})
	.addClass("caja");

	var $deleteButton = $('<button/>')
	.addClass("hidden equis")
	.attr({name: "button", type: "button"})
	.text("x");

	var $newTask = $('<li/>')
	.attr({id:counter})
	.append([$taskCheckbox,texto,$deleteButton]);

	$('.todo-list').append($newTask);

	counter += 1;
	};
	});

	$(document).on('mouseenter', 'li', function(event){
	$(event.target).addClass('active');
	$(event.target).find('button').removeClass('hidden');
	});

	$(document).on('click', 'button', function(event) {
	$(event.target).parent().remove();
	});

	$(document).on('mouseleave', 'li', function(event){
	$(event.target).removeClass('active');
	$(event.target).find('button').addClass('hidden');
	});

	$(document).on('click', '.caja', function(event){
	$(event.target).parent().toggleClass('donetask');
	});
	});
	</script>

	</body>
	</html>
	* { box-sizing: border-box; }

	body {
	background: #edeff0;
	color: #333;
	font-family: 'Helvetica Nueue', sans-serif;
	}

	.wrapper {
	background: white;
	width: 500px;
	margin: auto;
	padding: 15px 30px;
	border-radius: 10px;
	}

	#input {
	font-size: 16px;
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	}

	ul {
	color: #666;
	list-style-type: none;
	padding: 0;
	}

	li {
	padding: 15px 15px 15px 10px;
	border-radius: 5px;
	}

	.active {
	background-color: #f5f5f5;

	}

	.donetask {
	text-decoration: line-through;
	}

	.hidden {
	display: none;
	}

	.equis {
	float: right;
	background-color: #f5f5f5;
	border-style: none;
	}