bogoreh/Spot the Dog.html

## Spot the Dog.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Spot the Dog</title>
        <style>
            .dot {
                border-radius: 10px;
                background: purple;
                position: absolute;
                width: 10px;
                height: 10px;
            }
        </style>
    </head>
    <body>
    <div>
    <img id="dog-pic" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Alopekis_white_male.jpg" width="500" alt="White dog">
    </div>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $("#dog-pic").on("click", function(event) {
        var $dot = $("<div></div>");
        $dot.addClass("dot");
        $dot.appendTo("body");
        $dot.css("top", event.pageY + "px");
        console.log(event);
        $dot.css("left", event.pageX + "px")
    });
    </script>


    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Challenge: Spot the Dog</title>
	<style>
	.dot {
	border-radius: 10px;
	background: purple;
	position: absolute;
	width: 10px;
	height: 10px;
	}
	</style>
	</head>
	<body>
	<div>
	<img id="dog-pic" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Alopekis_white_male.jpg" width="500" alt="White dog">
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
	$("#dog-pic").on("click", function(event) {
	var $dot = $("<div></div>");
	$dot.addClass("dot");
	$dot.appendTo("body");
	$dot.css("top", event.pageY + "px");
	console.log(event);
	$dot.css("left", event.pageX + "px")
	});
	</script>


	</body>
	</html>