Skip to content

Commit

Permalink
Finishing class 3 with exercise involving retrieving values from html…
Browse files Browse the repository at this point in the history 
… forms
  • Loading branch information
@izzyjohnston
izzyjohnston committed Nov 23, 2012
1 parent f0451bc commit 1ede7c0
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 6 deletions.
93 changes: 93 additions & 0 deletions class3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,99 @@ <h3>Let's Develop It</h3>
<li>Bonus: change all the onclick events to jQuery click events</li>
</ul>
</section>

<!-- HTML forms-->
<section>
<h3>HTML forms</h3>
<p>HTML Forms allow users to enter information</p>
<div class = "fragment">
<pre><code contenteditable class = "html">
&lt;form id ="about-me">
&lt;input type = "text" id = "name" placeholder = "Enter a name"/>
&lt;label>Do you like popcorn&lt;/label>
Yes &lt;input type = "radio" name = "popcorn" val = "yes"/>
No &lt;input type = "radio" name = "popcorn" val = "no"/>
&lt;label>Favorite Dinosaur&lt;/label>
&lt;select id = "dinosaur">
&lt;option value = "t-rex">Tyrannosaurus Rex&lt;/option>
&lt;option value = "tri">Triceratops&lt;/option>
&lt;option value = "stego">Stegosaurus&lt;/option>
&lt;option value = "other">Other&lt;/option>
&lt;/select>
&lt;input type = "submit" value = "Go!" style = "padding: 7px; font-size:1em"/>
&lt;/form>
</code></pre>
</div>
</section>

<section>
<h3>HTML forms</h3>
<p>HTML Forms allow users to enter information</p>
<div class = "fragment left-align">
<form>
<input type = "text" id = "name" placeholder = "Enter a name" style = "width:300px; padding: 7px; font-size:1em"/><br/>
<label>Do you like popcorn</label><br/>
Yes <input type = "radio" name = "popcorn" val = "yes" style ="font-size:1em"/>
No <input type = "radio" name = "popcorn" val = "no" style ="font-size:1em"/><br/>
<label>Favorite Dinosaur</label><br/>
<select id = "dinosaur" style = "padding: 7px; font-size:1em">
<option>Tyrannosaurus Rex</option>
<option>Triceratops</option>
<option>Stegosaurus</option>
<option>Other</option>
</select><br/>
<input type = "submit" value = "Go!" style = "padding: 7px; font-size:1em"/>
</form>
</div>
</section>

<!-- JavaScript and HTML Forms-->
<section>
<h3>Values from Forms</h3>
<p>You can use JavaScript to get values from a form</p>
<div class = "fragment">
<pre><code contenteditable class = "javascript">
$('#name').val();
$('select#dinosaur').val();
$('input:radio[name=popcorn]:checked').val();
</code></pre>
</div>
<div class = "fragment">
Or set values of a form
<pre><code contenteditable class = "javascript">
$('#name').val('Mitch');
$('select#dinosaur').val('stego');
$('input:radio[name=popcorn]:checked').val('no');
</code></pre>
</div>
</section>

<section>
<h3>Values from Forms</h3>
<p>jQuery has an event for form submission</p>
<div class = "fragment">
<pre><code contenteditable class = "javascript">
$('#about-me').submit(function(event){
//code to execute after submission
return false;
});
</code></pre>
<span class = "yellow">"return false"</span> to prevent the form trying to submit to a server.
</div>
</section>

<!-- Exercise-->
<section>
<h3>Let's Develop It</h3>
<ul>
<li>Choose one (or all!) of your functions made so far</li>
<li>i.e. lifetime supply, favorite things, or my friends</li>
<li>Create a form to send dynamic data to the function when you click the button</li>
<li>Don't forget to add parameters to your existing functions!</p>
<li>This is a little harder than all the other exercises.</li>
<li>Be creative!</li>
</ul>
</section>
<!-- -->
<section>
<h2>Questions?</h2>
Expand Down
9 changes: 5 additions & 4 deletions class3/exercise2/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
</head>
<body>
My Site!</br>
<div class = "box">
</div>
<div class = "box">
</div>
<a href = "#" id = "calculate">Calculate life time supply</a><br/>
<div id = "lifetime-supply">

Expand All @@ -16,9 +20,6 @@

</div>
<a href = "#" id = "friends">My friends</a>
<div class = "box">
</div>
<div class = "box">
</div>

</body>
</html>
4 changes: 2 additions & 2 deletions class3/exercise2/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.box{
width: 100px;
height: 200px;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
37 changes: 37 additions & 0 deletions class3/exercise3/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<html>
<head>
<title>My Site!</title>
<link rel="stylesheet" href="style.css">
<script src = "http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src = "javascript.js"></script>
</head>
<body>
My Site!</br>
<div class = "box">
</div>
<div class = "box">
</div>
<form id = "calculate">
<input type = "text" id = "snack" placeholder = "Your favorite snack"/><br/>
<input type = "text" id = "age" placeholder = "Your age"/><br/>
<input type = "text" id = "times-per-day" placeholder = "How many times a day?"><br/>
<input type = "submit" value = "Calculate Lifetime Supply!"/>
</form>
<div id = "lifetime-supply">

</div>
<div id = "favorite-things">
<p>My favorite things:</p>
</div>
<form id = "favorites">
<input type = "text" id = "thing" placeholder = "What's one of your favorite things?"/><br/>
<input type = "submit" value = "Add to list!"/>
</form>

<form id = "friends">
<input type = "text" id = "friend-name" placeholder = "Friend's name"/><br/>
<input type = "text" id = "friend-hair" placeholder = "Friend's hair color"/><br/>
<input type = "submit" value = "Add to list!"/>
</form>
</body>
</html>
60 changes: 60 additions & 0 deletions class3/exercise3/javascript.js
View file
Original file line number Diff line number Diff line change
@@ -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('<p>'+ thing +'</p>');
}
function myFriends(friend){
var resultDiv = $('<div></div>')
var resultParagraph = $('<p>' + describeFriend(friend) + '</p>');
resultDiv.append(resultParagraph);
$('body').append(resultDiv);
}
function describeFriend(friend){
return "My friend " + friend.name + " has " + friend.hair + " hair. ";
}
11 changes: 11 additions & 0 deletions class3/exercise3/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.box{
width: 200px;
height: 100px;
border: 1px solid #ccc;
}

input{
width: 200px;
padding: 5px;
margin: 5px;
}

0 comments on commit 1ede7c0

Please sign in to comment.