mackenco/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="all" id="one"></div>
        <div class="all" id="two"></div>
        <div class="all" id="three"></div>
        <div class="all" id="four"></div>

        <input id="input" placeholder="Type in Me" type="text">
        <button id="button">Alert Me!</button>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"]}

## script.js
/* update this code so when you click the first square, it changes to purple */
$("???").click(function(){
    $("???").css("???", "purple");
});

/* update this code so when you click the second square, it appends "second square clicked" to the body */
$("???").click(function(){
    $("???").someFunction("second square clicked");
});

/* update this code so when you double click the third square, the alerts "third square clicked!" hint - you haven't learned this function yet...but google knows it! */
$("???").someFunction(function(){
    //("third square clicked!");
});

/* update this code so when your mouse is over the fourth square it gets big
    and when it leaves, it goes back to the same size.
    you might need to look at https://api.jquery.com/category/events/mouse-events/ */
$("???").someFunction(function() {
    $("???").css("height", "200px");
    $("???").css("width", "200px");
});

$("???").someOtherFunction(function() {
    $("???").css("height", "100px");
    $("???").css("width", "100px");
});

/* update this code to alert whatever is typed in the input field with four exclamation points */
$("#button").click(function() {
   alert( + "!!!!");
});

## styles.css
.all{
    height: 100px;
    width: 100px;
    border-radius: 40px;
    float: left;
    margin: 5px;
    }
#one{
   background-color: green;
    }
#two{
   background-color: yellow;
    }
#three{
   background-color: blue;
    }
#four{
   background-color: red;
    }

h1 { width: 100%; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<div class="all" id="one"></div>
	<div class="all" id="two"></div>
	<div class="all" id="three"></div>
	<div class="all" id="four"></div>

	<input id="input" placeholder="Type in Me" type="text">
	<button id="button">Alert Me!</button>
	</body>
	</html>
	/* update this code so when you click the first square, it changes to purple */
	$("???").click(function(){
	$("???").css("???", "purple");
	});

	/* update this code so when you click the second square, it appends "second square clicked" to the body */
	$("???").click(function(){
	$("???").someFunction("second square clicked");
	});

	/* update this code so when you double click the third square, the alerts "third square clicked!" hint - you haven't learned this function yet...but google knows it! */
	$("???").someFunction(function(){
	//("third square clicked!");
	});

	/* update this code so when your mouse is over the fourth square it gets big
	and when it leaves, it goes back to the same size.
	you might need to look at https://api.jquery.com/category/events/mouse-events/ */
	$("???").someFunction(function() {
	$("???").css("height", "200px");
	$("???").css("width", "200px");
	});

	$("???").someOtherFunction(function() {
	$("???").css("height", "100px");
	$("???").css("width", "100px");
	});

	/* update this code to alert whatever is typed in the input field with four exclamation points */
	$("#button").click(function() {
	alert( + "!!!!");
	});
	.all{
	height: 100px;
	width: 100px;
	border-radius: 40px;
	float: left;
	margin: 5px;
	}
	#one{
	background-color: green;
	}
	#two{
	background-color: yellow;
	}
	#three{
	background-color: blue;
	}
	#four{
	background-color: red;
	}

	h1 { width: 100%; }