ADD multiple event methods, a clickable paragraph

web_dev/jquery/index.html

@@ -13,6 +13,7 @@
       <li>goes with any decor</li>
       <li>comically <a href="http://grumpy.com">grumpy</a> looking</li>
     </ul>
+    <p id="toggle-buttons">Click to toggle buttons</p>
     <button class="hide" >See it blend in!</button>
     <button class="reveal">Reveal the lizard!</button>
   </div>

web_dev/jquery/notes.md

@@ -3,13 +3,13 @@ Spend 10 minutes making a plan for how you intend to tackle jQuery and learn as
 1. What sorts of resources will help? 
 
  * Google jQuery to get a general idea of what the library does
- * Find some jQuery documentation and cheatsheets
+ * Find some jQuery documentation and cheatsheets - **https://www.w3schools.com/jquery/ was really helpful**
 
 2. How often should you stop and test what you just learned? Are breaks important? 
 
-* I'm planning to read as much as I can before testing what I learned from memory, so I can avoid copy-pasting code
+* I'm planning to read as much as I can before trying what I learned from memory, so I can avoid copy-pasting code - **this did not work. I had to keep referring back to the examples to make sure the syntax was correct**
 
 3. Make a few notes on how you plan to approach the topic, and why.
 
-* I usually learn quickest by doing, so doing while researching would probably work best
+* I usually learn quickest by doing, so doing while researching would probably work best - **as expected, this approach was the most helpful in learning the material**
 * coming up with different ways I could use jQuery and trying out different things usually also help me figure out what to search for and where to go deeper

web_dev/jquery/script.js

@@ -1,3 +1,4 @@
+/*
 function addPinkBorder(event) {
   event.target.style.border = "2px solid pink";
 }
@@ -8,12 +9,38 @@ function removePinkBorder(event) {
 
 var photo = document.getElementById("lizard-photo");
 photo.addEventListener("mouseover", addPinkBorder);
-photo.addEventListener("mouseleave", removePinkBorder);
+photo.addEventListener("mouseleave", removePinkBorder
+*/
+
+$("#lizard-photo").on({
+  mouseenter: function(){
+    $(this).css("border", "2px solid pink");
+  },
+  mouseleave: function(){
+    $(this).css("border", 0);
+  },
+  click: function(){
+    $(this).animate({
+      width: "500px",
+      margin: "80px"
+    })
+    .animate({
+      width: "225px",
+      margin: "0px"
+    });
+  }, 
+});
+
+$("#toggle-buttons").click(function(){
+  $("button").fadeToggle("fast");
+});
+
+
 
 $(".hide").click(function(){
-  $("#lizard-photo").hide();
+  $("#lizard-photo").hide("slow");
 });
 
 $(".reveal").click(function(){
-  $("#lizard-photo").show();
+  $("#lizard-photo").show("fast");
 });

web_dev/jquery/style.css

@@ -1,4 +1,11 @@
 #lizard-photo {
   width: 225px;
   height: auto;
+}
+
+#toggle-buttons {
+  color: white;
+  background: maroon;
+  width: 150px;
+  padding: 10px 50px;
 }