Skip to content

Instantly share code, notes, and snippets.

@mackenco
Created November 30, 2016 18:14
Show Gist options
  • Save mackenco/3f90ff981480266edd0f77ac28b1a2c2 to your computer and use it in GitHub Desktop.
Save mackenco/3f90ff981480266edd0f77ac28b1a2c2 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=3f90ff981480266edd0f77ac28b1a2c2
<!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