diff --git a/README.md b/README.md
index 6343b73..9736693 100644
--- 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
index dcd3169..33c94d0 100644
--- a/class3.html
+++ b/class3.html
@@ -40,7 +40,7 @@
Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
+
Some "rules"
+
+
We are here for you!
+
Every question is important
+
Help each other
+
Have fun
+
+
+
+
+
+
Warning
+
+ The following few slides have lots of acronyms and jargon.
+
+
On behalf of developers everywhere, we apologize
+
+
+
+
What is an API?
+
+
Application Programming Interface
+
Data structure and rules for accessing a web-based appllication
+
How we can access information from sites that are not our own (Twitter, Meetup, Facebook, Foursquare)
+
+
+
+
+
What is an API?
+
+
Primary role: a channel for applications to work together
+
+
Your website and the Twitter API
+
Twitter's mobile app and the Twitter API
+
Hootsuite's mobile app and the Twitter API
+
+
+
+
+
+
+
What is AJAX?
+
+
Asynchronous JavaScript and XML
+
Method to communicate to a server or API
+
Asynchronous means:
+
+
I ask Twitter for all the tweets ever!
+
That will take a while
+
My whole website could be locked up while I wait!
+
Or, my call can be 'asynchronous' and my website will just listen for Twitter's response with one ear, but go about normal business until the response arrives.
+
+
+
Requests and results can be in JavaScript or XML
+
+
+
+
+
+
What is REST?
+
+
Representational State Transfer
+
REST is a way to ask an API for information by using a URL.
+
REST Urls are created with the following syntax:
+
')
+ 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('
'+ 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/class4/exercise2/style.css b/class4/exercise2/style.css
new file mode 100644
index 0000000..e182bd6
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/class4/exercise3/index.html b/class4/exercise3/index.html
new file mode 100644
index 0000000..c61e67d
--- /dev/null
+++ b/class4/exercise3/index.html
@@ -0,0 +1,45 @@
+
+
+ My Site!
+
+
+
+
+
+ My Site!
+
+
+
+
+
+
+ Events you might like:
+
+
+
+
+
+
+
My favorite things:
+
+
+
+
+
+
\ No newline at end of file
diff --git a/class4/exercise3/javascript.js b/class4/exercise3/javascript.js
new file mode 100644
index 0000000..0203e36
--- /dev/null
+++ b/class4/exercise3/javascript.js
@@ -0,0 +1,101 @@
+$(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;
+ });
+
+ $('#meetup').submit(function(event){
+
+ getMeetups($('#topic').val(), $('#zipcode').val())
+ return false;
+ });
+});
+
+function getMeetups(topic, zipcode){
+ var api_key = "50722e1d56c194e61763a2ee1e4535";
+ var url = "https://api.meetup.com/2/";
+ var method = "open_events"
+ $.ajax({
+ url: url + method,
+ data: {
+ key: api_key,
+ zip: zipcode,
+ topic: topic
+ },
+ 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 = $('');
+ var name = $('
')
+ 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('
'+ 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/class4/exercise3/style.css b/class4/exercise3/style.css
new file mode 100644
index 0000000..e182bd6
--- /dev/null
+++ b/class4/exercise3/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;
+}
\ No newline at end of file
diff --git a/images/console.png b/images/console.png
new file mode 100644
index 0000000..ee941c8
Binary files /dev/null and b/images/console.png differ
diff --git a/images/foursquare.png b/images/foursquare.png
new file mode 100644
index 0000000..776a4cf
Binary files /dev/null and b/images/foursquare.png differ
diff --git a/images/meetup.png b/images/meetup.png
new file mode 100644
index 0000000..7af8cf8
Binary files /dev/null and b/images/meetup.png differ
diff --git a/images/meetup_console.png b/images/meetup_console.png
new file mode 100644
index 0000000..7fb5a3a
Binary files /dev/null and b/images/meetup_console.png differ
diff --git a/images/meetup_open.png b/images/meetup_open.png
new file mode 100644
index 0000000..fe09581
Binary files /dev/null and b/images/meetup_open.png differ
diff --git a/images/meetup_results.png b/images/meetup_results.png
new file mode 100644
index 0000000..c692a09
Binary files /dev/null and b/images/meetup_results.png differ
diff --git a/images/results.png b/images/results.png
new file mode 100644
index 0000000..94aea09
Binary files /dev/null and b/images/results.png differ
+ 
+ 
+ 
+ 
+