Created
October 27, 2014 02:55
-
-
Save katherineschultz/f9b486981713ec67f125 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/deboti
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> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <a href="#" onClick="calculate()">Calculate It</a> | |
| <br> | |
| <div id="button1" class="button">Button</div> | |
| <div id="button2" class="button">Button2</div> | |
| <div id="button3" class="buttontoo">Button3</div> | |
| <br> | |
| <form id ="coffee"> | |
| <label>How many cups of coffee do you drink a day?</label> | |
| <select id = "cups"> | |
| <option value = "1">One</option> | |
| <option value = "2">Two</option> | |
| <option value = "3">Three</option> | |
| <option value = "4">Four</option> | |
| </select> | |
| <br> | |
| <input type = "text" id = "age" placeholder = "Enter your age"/> | |
| <br> | |
| <input type = "submit" value = "Calculate how many cups you will drink until you are 100 years old" style = "padding: 7px; font-size:1em"/> | |
| </form> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script> | |
| function calculate(){ | |
| var myAge = 41; | |
| var myAgeMax = 129; | |
| var myCoffeesPerDay = 2; | |
| var lifetimeCoffeeSupply = (((myAgeMax-myAge)*365)*myCoffeesPerDay); | |
| var newDiv = $('<div></div>'); | |
| newDiv.attr('id', 'testID'); | |
| $('body').append(newDiv); | |
| var div = $('#testID'); | |
| div.html(); | |
| div.html("You need "+lifetimeCoffeeSupply+" cups of coffee to last until your old age of "+myAgeMax +"."); | |
| if (lifetimeCoffeeSupply > 40,000){ | |
| div.append(" Wow! That's a lot!"); | |
| } else { | |
| div.append(" You seem pretty reasonable!"); | |
| } | |
| } | |
| function sayHello(){ | |
| alert ("hello"); | |
| } | |
| $(document).ready(sayHello); | |
| function alertSomething(){ | |
| alert ("hello"); | |
| } | |
| $("#button1").click(alertSomething); | |
| $("#button1").click(function (){ | |
| alert ("hello"); | |
| }); | |
| $(".button").click (function (){ | |
| var contentsOfButton; | |
| contentsofButton = $(this).html(); | |
| alert (contentsofButton); | |
| }); | |
| $("#button").bind({ | |
| click: function(){ | |
| $(this).css("background-color", "green") | |
| }, | |
| mouseenter: function(){ | |
| $(this).css("background-color", "purple") | |
| } | |
| }); | |
| function colorChange(){ | |
| $("#button3").bind({ | |
| click: function(){ | |
| $(this).css("color", "orange") | |
| }, | |
| mouseenter: function(){ | |
| $(this).css("background-color", "blue") | |
| } | |
| }); | |
| } | |
| $(document).ready(colorChange); | |
| $("#coffee").submit(function(event){ | |
| $("#cups").val(); | |
| $("#age").val(); | |
| return false; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment