// todoList2.js

console.log("connected");

// $("li").css("background", "white");

$("ul").on("click", "li", function() {
	$(this).toggleClass("completed");
	// body...
});


$("ul").on("click", "span", function(event) {
	// body...
	console.log("clicked span");
	
	$(this).parent().fadeOut(500,function() {
		$(this).remove();
		
	});
	event.stopPropagation();
});


$("input[type='text']").keypress(function(event) {
	if(event.which === 13){
		var text = $(this).val();
        $(this).val("");
		$("ul").append("<li><span><i class='fa fa-trash'></i></span>" + text + "</li>");
	}
	
});


$(".fa-plus").click(function() {
	$("input[type='text']").fadeToggle();
});



//this is equivalent to below 
// $("li").click(function() {
// 	// body...
// 	if ($(this).css("color") === "rgb(128, 128, 128)"){
// 		$(this).css({
// 			"color": "black",
// 			textDecoration: "none"
// 		});
// 	}
// 	else{
// 		console.log("clicked todoList2")
// 			$(this).css({
// 				color: "rgb(128, 128, 128)",
// 				textDecoration: "line-through"

// 				});

// 	}
// });


// $("ul").click(function() {
// 	console.log("clicked ul");
// });

// $("#container").click(function() {
// 	console.log("clicked container div");
// });

// $("body").click(function() {
// 	console.log("clicked body");
// });