Created
October 7, 2013 05:26
-
-
Save Colt/6862924 to your computer and use it in GitHub Desktop.
Colt's Puppies Homework!
This file contains hidden or 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
| <html> | |
| <head> | |
| <title>!Quiz - Week 2</title> | |
| </head> | |
| <body> | |
| <center> | |
| <h1>Puppies - wait, is that a puppy?! </h1> | |
| <img id="daPuppies" src="http://www.pomsky.org/wp-content/uploads/2013/03/97c0ca628ce111e2876222000a9f0a1b_7-300x300.jpg" width="300" height="auto" position="absolute" /> | |
| <h3> don't forget to open your Chrome console </h3> | |
| <button onclick="grow();">Bigger Puppies</button> | |
| <button onclick="shrink();">Smaller Puppies</button> | |
| <button onclick="move();">Move Puppies</button> | |
| <button onclick="stop();">Stop Puppies</button> | |
| </center> | |
| <script type="text/javascript"> | |
| // 1. make an array of 5 puppies by name | |
| var puppies = ["Buddy", "Lucky", "Rusty", "Hank", "SausageFace"]; | |
| // 2. iterate through your puppies using a for loop // & print their names to the console | |
| for(var i = 0; i < puppies.length; i++){ | |
| console.log(puppies[i]); | |
| } | |
| var pic = document.getElementById('daPuppies'); | |
| var bigger; | |
| function grow(){ | |
| bigger = setInterval( | |
| function getBigger(){ | |
| document.getElementById('daPuppies').width += 10; | |
| }, | |
| 500 | |
| ); | |
| } | |
| function shrink(){ | |
| bigger = setInterval( | |
| function getBigger(){ | |
| document.getElementById('daPuppies').width -= 10; | |
| }, | |
| 500 | |
| ); | |
| } | |
| function move(){ | |
| var pup = document.getElementById("daPuppies"); | |
| if (pup.style.marginLeft == 0) { | |
| pup.style.marginLeft = '0px'; | |
| } | |
| var marginLeft = 0; | |
| pup.style.marginLeft = parseInt(pup.style.marginLeft) + 10 + 'px'; | |
| } | |
| function stop(){ | |
| clearInterval(bigger); | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment