euclio/index.css

## index.css
h1 {
  font-family: "Comic Sans MS", sans-serif;
}

img {
  margin: 3px;
}

#kittyville {
  background-color: #3DBEFF;
  display: inline-block;
}

.outline {
  outline: 3px dashed black;
}

.kitty::after {
  content: " 😻";
}

.glow {
  text-shadow: 0 0 20px blue;
}

## index.html
<!doctype html>
<html>
  <head>
    <title>JavaScript Tutorial</title>
    <link rel="stylesheet" href="index.css">
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <h1>Welcome to Kittyville</h1>
    <div id="kittyville">
      <img class="kitty" src="http://storage.coolfeed.co/2012/10/Funny-Cat-Images-24-GIFs-coolfeed.co-4.gif" alt="Cat playing hide 'n' seek">
    </div>
      <button id="showKittens">Find the Kittens</button>
      <div>
      <input id="favoriteThing" type="text" size="30" placeholder="Enter a favorite thing" />
      <button id="submit" type="submit">Enter</button>
        <h1>My Favorite Things</h1>
        <ul id="favoriteThings">
          <!-- No items yet -->
        </ul>
      </div>
      <button id="checkFavorites">Check Favorites</button>
  </body>
</html>

## index.js
$(document).ready(function() {
    for (var i = 0; i < 3; i++) {
        var $kittyImage = $('<img>')
                    .addClass('kitty')
                    .attr('src', 'http://storage.coolfeed.co/2012/10/Funny-Cat-Images-24-GIFs-coolfeed.co-4.gif')
                    .attr('alt', 'cute cat');
        $('#kittyville').append($kittyImage);
    }

    var $kitty = $(".kitty");
    $kitty.click(function() {
        $(this).fadeOut(1000);
    });

    $kitty.hover(function() {
        $(this).toggleClass("outline");
    });

    $("#showKittens").click(function() {
        var $kitties = $(".kitty");
        $kitties.each(function() {
            $(this).show();
        })
    });

    $("#submit").click(function() {
        var favoriteThing = $("#favoriteThing").val();
        if (!favoriteThing) {
            return;
        }

        var $newThing = $("<li>");
        $newThing.text(favoriteThing);
        $newThing.click(function() {
            $(this).toggleClass("kitty");
        });
        $("#favoriteThings").append($newThing);
        $("#favoriteThing").val('');
    });

    $("#checkFavorites").click(function() {
        $("#favoriteThings li").each(function() {
            if ($(this).text().toLowerCase() === 'cats') {
                alert('OMG! I love cats too!');
            }
        });
    });
});
	h1 {
	font-family: "Comic Sans MS", sans-serif;
	}

	img {
	margin: 3px;
	}

	#kittyville {
	background-color: #3DBEFF;
	display: inline-block;
	}

	.outline {
	outline: 3px dashed black;
	}

	.kitty::after {
	content: " 😻";
	}

	.glow {
	text-shadow: 0 0 20px blue;
	}
	<!doctype html>
	<html>
	<head>
	<title>JavaScript Tutorial</title>
	<link rel="stylesheet" href="index.css">
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="index.js"></script>
	</head>
	<body>
	<h1>Welcome to Kittyville</h1>
	<div id="kittyville">
	<img class="kitty" src="http://storage.coolfeed.co/2012/10/Funny-Cat-Images-24-GIFs-coolfeed.co-4.gif" alt="Cat playing hide 'n' seek">
	</div>
	<button id="showKittens">Find the Kittens</button>
	<div>
	<input id="favoriteThing" type="text" size="30" placeholder="Enter a favorite thing" />
	<button id="submit" type="submit">Enter</button>
	<h1>My Favorite Things</h1>
	<ul id="favoriteThings">
	<!-- No items yet -->
	</ul>
	</div>
	<button id="checkFavorites">Check Favorites</button>
	</body>
	</html>
	$(document).ready(function() {
	for (var i = 0; i < 3; i++) {
	var $kittyImage = $('<img>')
	.addClass('kitty')
	.attr('src', 'http://storage.coolfeed.co/2012/10/Funny-Cat-Images-24-GIFs-coolfeed.co-4.gif')
	.attr('alt', 'cute cat');
	$('#kittyville').append($kittyImage);
	}

	var $kitty = $(".kitty");
	$kitty.click(function() {
	$(this).fadeOut(1000);
	});

	$kitty.hover(function() {
	$(this).toggleClass("outline");
	});

	$("#showKittens").click(function() {
	var $kitties = $(".kitty");
	$kitties.each(function() {
	$(this).show();
	})
	});

	$("#submit").click(function() {
	var favoriteThing = $("#favoriteThing").val();
	if (!favoriteThing) {
	return;
	}

	var $newThing = $("<li>");
	$newThing.text(favoriteThing);
	$newThing.click(function() {
	$(this).toggleClass("kitty");
	});
	$("#favoriteThings").append($newThing);
	$("#favoriteThing").val('');
	});

	$("#checkFavorites").click(function() {
	$("#favoriteThings li").each(function() {
	if ($(this).text().toLowerCase() === 'cats') {
	alert('OMG! I love cats too!');
	}
	});
	});
	});