Adding class 4, Ajax and API. Intro to jQuery plugins

gdi-curriculum-review · Nov 23, 2012 · 502089e · 502089e
1 parent 1ede7c0
commit 502089e
Show file tree

Hide file tree

Showing 19 changed files with 859 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Introduce jQuery. Discuss its role as a javascript library (not a different lang
 
 ### Class 4
 
-Introduce jQuery UI plugins and a lightbox plugin. Students will build a portfolio of images with a slideshow and jqueryUI elements.
+Introduce APIs, REST, and AJAX. Students will interact with the Meetup API (chosen because all students are already aware of Meetup and calls can be made without oAuth authentication). Bonus intros to jQuery UI, and the concept of jQuery plugins
 
 
 ## Theme customization

diff --git a/class3.html b/class3.html
@@ -40,7 +40,7 @@
         <section>
           <img src = "images/gdi_logo_badge.png">
           <h3>Beginning Javascript</h3>
-          <h4>Class 2</h4>
+          <h4>Class 3</h4>
         </section>
 
         <!-- Welcome-->

diff --git a/class4.html b/class4.html
diff --git a/class4/exercise1/index.html b/class4/exercise1/index.html
@@ -0,0 +1,40 @@
+<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>
+    <div id = "events">
+      Events I might like:
+    </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>
diff --git a/class4/exercise1/javascript.js b/class4/exercise1/javascript.js
@@ -0,0 +1,85 @@
+$(document).ready(function(){
+    getMeetups();
+    $('.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 getMeetups(){
+	var api_key = "50722e1d56c194e61763a2ee1e4535";
+	var url = "https://api.meetup.com/2/";
+	var method = "open_events"
+	$.ajax({
+		url: url + method,
+		data: {
+		  key: api_key,
+		  lat: 40.7143528,
+		  lon: -74.0059731,
+		  topic: 'JavaScript'
+		},
+		crossDomain: true,
+		dataType: 'jsonp',
+		type: "GET",
+		success: function (data) {
+		    console.log(data)
+		},
+		error: function(data) {
+			console.log("Error", data);
+		}				
+	});
+}
+
+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. ";
+}
diff --git a/class4/exercise1/style.css b/class4/exercise1/style.css
@@ -0,0 +1,17 @@
+.box{
+    width: 200px;
+    height: 100px;
+    border: 1px solid #ccc;
+}
+
+input{
+    width: 200px;
+    padding: 5px;
+    margin: 5px;
+}
+.event{
+    margin:5px;
+    padding:5px;
+    border: 1px solid #ccc;
+    background-color: #ddd;
+}
diff --git a/class4/exercise2/index.html b/class4/exercise2/index.html
@@ -0,0 +1,40 @@
+<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>
+    <div id = "events">
+      Events I might like:
+    </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>
diff --git a/class4/exercise2/javascript.js b/class4/exercise2/javascript.js
@@ -0,0 +1,97 @@
+$(document).ready(function(){
+    getMeetups();
+    $('.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 getMeetups(){
+	var api_key = "50722e1d56c194e61763a2ee1e4535";
+	var url = "https://api.meetup.com/2/";
+	var method = "open_events"
+	$.ajax({
+		url: url + method,
+		data: {
+		  key: api_key,
+		  lat: 40.7143528,
+		  lon: -74.0059731,
+		  topic: 'JavaScript'
+		},
+		crossDomain: true,
+		dataType: 'jsonp',
+		type: "GET",
+		success: function (data) {
+		    parseMeetups(data.results)
+		},
+		error: function(data) {
+			console.log("Error", data);
+		}				
+	});
+}
+
+function parseMeetups(results){
+   for(var i = 0; i < results.length; i ++){
+       var div = $('<div class ="event"></div>');
+       var name = $('<div> Name: '+ results[i].name+'</div>');
+       var description = $('<div> Description: '+ results[i].description+'</div>');
+       var group = $('<div> Group: '+ results[i].group.name+'</div>');
+       var link = $('<div> Learn More: <a href ="'+results[i].event_url+'" target = "_blank">'+results[i].event_url+'</a></div>')
+       div.append(name, description, group, link);
+       $('#events').append(div);
+   } 
+}
+
+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. ";
+}
diff --git a/class4/exercise2/style.css b/class4/exercise2/style.css
@@ -0,0 +1,17 @@
+.box{
+    width: 200px;
+    height: 100px;
+    border: 1px solid #ccc;
+}
+
+input{
+    width: 200px;
+    padding: 5px;
+    margin: 5px;
+}
+.event{
+    margin:5px;
+    padding:5px;
+    border: 1px solid #ccc;
+    background-color: #ddd;
+}
diff --git a/class4/exercise3/index.html b/class4/exercise3/index.html
@@ -0,0 +1,45 @@
+<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 = "meetup">
+        <input type = "text" id = "topic" placeholder = "Pick a topic"/><br/>
+        <input type = "text" id = "zipcode" placeholder = "Your zipcode"/><br/>
+        <input type = "submit" value = "Find events!"/>
+      </form>
+    <div id = "events">
+      Events you might like:
+    </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>