Created
October 26, 2013 09:10
-
-
Save nelsonic/7167144 to your computer and use it in GitHub Desktop.
Pet Rock HTML & JavaScript (helping a friend learn JavaScript...)
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title> | |
| iRock - The Virtual Pet Rock | |
| </title> | |
| <script type="text/javascript"> | |
| var userName; | |
| function resizeRock() { | |
| var rockImg = document.getElementById("rockImg"); | |
| var pageHeight = window.innerHeight; // document.body.clientHeight | |
| console.log("Page height: "+pageHeight); | |
| if(rockImg && rockImg.style) { | |
| rockImg.style.height = parseInt((pageHeight - 100) * 0.9)+"px"; | |
| rockImg.style.width = 'auto'; | |
| } | |
| } | |
| function greetUser() { | |
| // alert ("Hello, I am your pet rock."); // alert is a fail! :-( | |
| } | |
| function touchRock() { | |
| if (userName) { | |
| alert ("I like the attention, " + userName + ". Thank you."); | |
| } | |
| else { | |
| userName = prompt ("What is your name?", "Enter your name here."); | |
| if (userName) | |
| alert ("It's good to meet you" + userName + "."); | |
| } | |
| document.getElementById("rockImg").src = "rock_happy.png"; | |
| setTimeout ("document.getElementById('rockImg').src = 'rock.png';", 1 * 60 * 1000); | |
| } | |
| </script> | |
| <style type="text/css"> | |
| #rockDiv {margin-top: 100px; text-align: center;} | |
| body {background-color: #2D8024; } | |
| </style> | |
| </head> | |
| <body onresize="resizeRock();" onload="greetUser();" > | |
| <div id="rockDiv"> | |
| <img id="rockImg" onload="resizeRock();" alt="iRock" | |
| src="http://www.englishsp.com/wp-content/uploads/2012/03/Pet-Rock.jpg" style="cursor:pointer; width: 300px" | |
| onclick="touchRock();" /> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment