Created
November 30, 2016 18:14
-
-
Save mackenco/3f90ff981480266edd0f77ac28b1a2c2 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=3f90ff981480266edd0f77ac28b1a2c2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"enabledLibraries":["jquery"]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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( + "!!!!"); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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