From 1ede7c05630ce6b6e43f573b37af74188bbca8ae Mon Sep 17 00:00:00 2001 From: Izzy Johnston Date: Thu, 22 Nov 2012 20:46:08 -0500 Subject: [PATCH] Finishing class 3 with exercise involving retrieving values from html forms --- class3.html | 93 ++++++++++++++++++++++++++++++++++ class3/exercise2/index.html | 9 ++-- class3/exercise2/style.css | 4 +- class3/exercise3/index.html | 37 ++++++++++++++ class3/exercise3/javascript.js | 60 ++++++++++++++++++++++ class3/exercise3/style.css | 11 ++++ 6 files changed, 208 insertions(+), 6 deletions(-) create mode 100644 class3/exercise3/index.html create mode 100644 class3/exercise3/javascript.js create mode 100644 class3/exercise3/style.css diff --git a/class3.html b/class3.html index 2e1e345..dcd3169 100644 --- a/class3.html +++ b/class3.html @@ -366,6 +366,99 @@

Let's Develop It

  • Bonus: change all the onclick events to jQuery click events
    • + + +
    +

    HTML forms

    +

    HTML Forms allow users to enter information

    +
    + 
    
+<form id ="about-me">
+  <input type = "text" id = "name" placeholder = "Enter a name"/>
+  <label>Do you like popcorn</label>
+  Yes <input type = "radio" name = "popcorn" val = "yes"/>
+  No <input type = "radio" name = "popcorn" val = "no"/>
+  <label>Favorite Dinosaur</label>
+  <select id = "dinosaur">
+    <option value = "t-rex">Tyrannosaurus Rex</option>
+    <option value = "tri">Triceratops</option>
+    <option value = "stego">Stegosaurus</option>
+    <option value = "other">Other</option>
+  </select>
+  <input type = "submit" value = "Go!" style = "padding: 7px; font-size:1em"/>
+</form>
+
    +
    +
    + +
    +

    HTML forms

    +

    HTML Forms allow users to enter information

    +
    +
    +
    +
    + Yes + No
    +
    +
    + +
    +
    +
    + + +
    +

    Values from Forms

    +

    You can use JavaScript to get values from a form

    +
    + 
    
+    $('#name').val();
+    $('select#dinosaur').val();
+    $('input:radio[name=popcorn]:checked').val();
+
    +
    +
    + Or set values of a form + 
    
+    $('#name').val('Mitch');
+    $('select#dinosaur').val('stego');
+    $('input:radio[name=popcorn]:checked').val('no');
+
    +
    +
    + +
    +

    Values from Forms

    +

    jQuery has an event for form submission

    +
    + 
    
+      $('#about-me').submit(function(event){
+            //code to execute after submission
+            return false;
+        });
+
    + "return false" to prevent the form trying to submit to a server. +
    +
    + + +
    +

    Let's Develop It

    + +

    Questions?

    diff --git a/class3/exercise2/index.html b/class3/exercise2/index.html index 150dd0f..7434619 100644 --- a/class3/exercise2/index.html +++ b/class3/exercise2/index.html @@ -7,6 +7,10 @@ My Site!
    +
    +
    +
    +
    Calculate life time supply
    @@ -16,9 +20,6 @@
    My friends -
    -
    -
    -
    + \ No newline at end of file diff --git a/class3/exercise2/style.css b/class3/exercise2/style.css index 4a9df63..8d6c2eb 100644 --- a/class3/exercise2/style.css +++ b/class3/exercise2/style.css @@ -1,5 +1,5 @@ .box{ - width: 100px; - height: 200px; + width: 200px; + height: 100px; border: 1px solid #ccc; } \ No newline at end of file diff --git a/class3/exercise3/index.html b/class3/exercise3/index.html new file mode 100644 index 0000000..76441ea --- /dev/null +++ b/class3/exercise3/index.html @@ -0,0 +1,37 @@ + + + My Site! + + + + + + My Site!
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +

    My favorite things:

    +
    +
    +
    + +
    + +
    +
    +
    + +
    + + \ No newline at end of file diff --git a/class3/exercise3/javascript.js b/class3/exercise3/javascript.js new file mode 100644 index 0000000..f371c3e --- /dev/null +++ b/class3/exercise3/javascript.js @@ -0,0 +1,60 @@ +$(document).ready(function(){ + $('.box').bind({ + click: function() { + $(this).css('background-color', 'green') + $(this).html('Clicked!') + }, + mouseenter: function() { + $(this).css('background-color', 'purple') + $(this).html('Hi!') + }, + mouseleave: function(){ + $(this).css('background-color', 'orange') + $(this).html('Bye!') + } + }); + $('#calculate').submit(function(event){ + var givenAge = $('#age').val(); + var givenSnack = $('#snack').val(); + var givenPerDay = $('#times-per-day').val(); + $('#lifetime-supply').html(calculate(givenAge, givenSnack, givenPerDay)); + return false; + }); + $('#favorites').submit(function(event){ + var givenThing = $('#thing').val(); + favoriteThings(givenThing); + return false + }); + $('#friends').submit(function(event){ + var name = $('#friend-name').val(); + var hair = $('#friend-hair').val() + var friend = {name: name, hair:hair}; + myFriends(friend); + return false; + }); +}) + +function calculate(age, snack, perDay){ + var oldAge = 96; + + var days = (oldAge - age) * 356; + var total = perDay * days; + if(total > 40000){ + return "You will need " + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"; + }else{ + return "You will need " + + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"; + } +} + +function favoriteThings(thing){ + $('#favorite-things').append('

    '+ thing +'

    '); +} +function myFriends(friend){ + var resultDiv = $('
    ') + var resultParagraph = $('

    ' + describeFriend(friend) + '

    '); + resultDiv.append(resultParagraph); + $('body').append(resultDiv); +} +function describeFriend(friend){ + return "My friend " + friend.name + " has " + friend.hair + " hair. "; +} \ No newline at end of file diff --git a/class3/exercise3/style.css b/class3/exercise3/style.css new file mode 100644 index 0000000..67e15aa --- /dev/null +++ b/class3/exercise3/style.css @@ -0,0 +1,11 @@ +.box{ + width: 200px; + height: 100px; + border: 1px solid #ccc; +} + +input{ + width: 200px; + padding: 5px; + margin: 5px; +} \ No newline at end of file