Skip to content

Instantly share code, notes, and snippets.

@mackenco
Created November 30, 2016 01:19
Show Gist options
  • Save mackenco/8e4f89e724d7b0cb2f54dcfeab8efde6 to your computer and use it in GitHub Desktop.
Save mackenco/8e4f89e724d7b0cb2f54dcfeab8efde6 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=8e4f89e724d7b0cb2f54dcfeab8efde6
<!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>
{"enabledLibraries":["jquery"]}
/* 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%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment