JamieMcKenzie · January 10, 2014 05:34 · Jan 9, 2014 · Dec 14, 2013
diff --git a/a_link.md b/a_link.md
@@ -0,0 +1 @@
+##[Behold the Incredible Growing (& shrinking) Slug](http://dev.josemenor.com/portfolio/HTML_CSS_projects/jquery_intro/)##
diff --git a/jquery_example.html b/jquery_example.html
@@ -2,17 +2,19 @@
 <html>
 <head>
   <title>DOM manipulation with jQuery</title>
-
-  <!-- Add a link to jQuery CDN here script here -->
-
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript" src="jquery_example.js"></script>
+
 </head>
 <body>
   <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
   <div class="mascot">
     <h1> My DBC Mascot </h1>
-    <img src="dbc_logo.jpg">
+    <img src="http://i.imgur.com/B3T8I6h.png">
+    <input type="button" id="shrink" value="Drink Me!"/>
+    <input type="button" id="grow" value="Eat Me!"/>
   </div>
-
+ 
 </body>
 </html>
diff --git a/jquery_example.js b/jquery_example.js
@@ -1,27 +1,53 @@
 $(document).ready(function(){
-
+ 
 //RELEASE 0: 
   //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does. 
-
+ 
 $('body').css({'background-color': 'pink'})
-
+ 
 //RELEASE 1:
   //Add code here to select elements of the DOM 
-
-
+  var bodyElement = $('body'); // Doesn't work
+
+
 //RELEASE 2: 
   // Add code here to modify the css and html of DOM elements
-
-
+ $('h1').css({
+    'color': 'teal',
+    'border': '1px solid chartreuse',
+    'visibility': 'hidden'
+ })
+
+var mascotHeader = $('.mascot h1')
+mascotHeader.css({'visibility': 'visible'})
+mascotHeader.html('Sluggie')
+
 //RELEASE 3: Event Listener
   // Add the code for the event listener here 
-
-
+  $('img').on('mouseover', function(e){
+     e.preventDefault()
+    $(this).attr('src', 'https://i.chzbgr.com/maxW500/2140877056/hC6DDCE86/')
+  })
+
+  $('img').on('mouseout', function(e){
+     e.preventDefault()
+    $(this).attr('src', 'http://i.imgur.com/B3T8I6h.png')
+  })
+
+
 //RELEASE 4 : Experiment on your own
-
-
-
-
-
-
+ $("#grow").click(function() {
+    $("img").animate(
+            {"height": "+=50px"},
+            "easein");
+});
+$("#shrink").click(function() {
+    $("img").animate(
+            {"height": "-=50px"},
+            "easeout");
+});
+
+
+
+
 })  // end of the document.ready function: do not remove or write DOM manipulation below this.
diff --git a/jquery_example.html b/jquery_example.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>DOM manipulation with jQuery</title>
+
+  <!-- Add a link to jQuery CDN here script here -->
+
+  <script type="text/javascript" src="jquery_example.js"></script>
+</head>
+<body>
+  <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
+  <div class="mascot">
+    <h1> My DBC Mascot </h1>
+    <img src="dbc_logo.jpg">
+  </div>
+
+</body>
+</html>
diff --git a/jquery_example.js b/jquery_example.js
@@ -0,0 +1,27 @@
+$(document).ready(function(){
+
+//RELEASE 0: 
+  //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does. 
+
+$('body').css({'background-color': 'pink'})
+
+//RELEASE 1:
+  //Add code here to select elements of the DOM 
+
+
+//RELEASE 2: 
+  // Add code here to modify the css and html of DOM elements
+
+
+//RELEASE 3: Event Listener
+  // Add the code for the event listener here 
+
+
+//RELEASE 4 : Experiment on your own
+
+
+
+
+
+
+})  // end of the document.ready function: do not remove or write DOM manipulation below this.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		##[Behold the Incredible Growing (& shrinking) Slug](http://dev.josemenor.com/portfolio/HTML_CSS_projects/jquery_intro/)##