courtney-scripted · March 6, 2018 23:04
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>jQuery Events with description</title>
    </head>
    <body>
        <div class="parent">
            <div class="top-left box">Click on me</div>
            <div class="top-right box">Double click on me</div>
        </div>
        <div class="parent">
            <div class="bottom-left box">Type something</div>
            <div class="bottom-right box">Put your mouse on me!</div>
        </div>
    </body>
 </html>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css"]}
diff --git a/script.js b/script.js
 $(".top-left").click(function(){
    $(".top-left").text("Thank you for clicking on me!");
    $(".top-left").css("background-color", "green");
 });

 $(".top-right").dblclick(function(){
    $(".top-right").text("Thank you for double-clicking on me!");
    $(".top-right").css("background-color", "blue");
 });

 $(".bottom-left").hover(function(){
    $(".bottom-left").text("Thank you for hovering on me");
    $(".bottom-left").css("background-color", "yellow");
 });

 $(".bottom-right").mouseenter(function(){
    $(".bottom-right").text("Thank you for stopping by!");
    $(".bottom-right").css("background-color", "white");
 });
 $(".bottom-right").mouseleave(function(){
    $(".bottom-right").text("Come again soon!");
    $(".bottom-right").css("background-color", "red");
 });
diff --git a/styles.css b/styles.css
 .box {
    width: 220px;
    height:220px;
    border: solid 2px grey;
    background-color: lightgrey;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
 }
 .parent {
    display: flex;
    justify-content: space-around;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery Events with description</title>
	</head>
	<body>
	<div class="parent">
	<div class="top-left box">Click on me</div>
	<div class="top-right box">Double click on me</div>
	</div>
	<div class="parent">
	<div class="bottom-left box">Type something</div>
	<div class="bottom-right box">Put your mouse on me!</div>
	</div>
	</body>
	</html>
	$(".top-left").click(function(){
	$(".top-left").text("Thank you for clicking on me!");
	$(".top-left").css("background-color", "green");
	});

	$(".top-right").dblclick(function(){
	$(".top-right").text("Thank you for double-clicking on me!");
	$(".top-right").css("background-color", "blue");
	});

	$(".bottom-left").hover(function(){
	$(".bottom-left").text("Thank you for hovering on me");
	$(".bottom-left").css("background-color", "yellow");
	});

	$(".bottom-right").mouseenter(function(){
	$(".bottom-right").text("Thank you for stopping by!");
	$(".bottom-right").css("background-color", "white");
	});
	$(".bottom-right").mouseleave(function(){
	$(".bottom-right").text("Come again soon!");
	$(".bottom-right").css("background-color", "red");
	});
	.box {
	width: 220px;
	height:220px;
	border: solid 2px grey;
	background-color: lightgrey;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	}
	.parent {
	display: flex;
	justify-content: space-around;
	}