Merge pull request #99 from elshaek/9.3

9.3
elshaek · Jun 17, 2017 · d241452 · d241452
2 parents 67a53e7 + 8bfecff
commit d241452
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 11 deletions.
diff --git a/web_dev/jquery/index.html b/web_dev/jquery/index.html
@@ -3,6 +3,7 @@
 <head>
   <title>About My Pet</title>
   <link rel="stylesheet" href="style.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 </head>
 <body>
   <div id="about-my-pet">
@@ -12,8 +13,9 @@
       <li>goes with any decor</li>
       <li>comically <a href="http://grumpy.com">grumpy</a> looking</li>
     </ul>
-    <button>See it blend in!</button>
-    <button>Reveal the lizard!</button>
+    <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>
   <script src="script.js"></script>
 </body>

diff --git a/web_dev/jquery/notes.md b/web_dev/jquery/notes.md
@@ -2,14 +2,14 @@ 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 the language
- * Find some jQuery documentation and cheatsheets
+ * Google jQuery to get a general idea of what the library does
+ * 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 for me
+* 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
diff --git a/web_dev/jquery/script.js b/web_dev/jquery/script.js
@@ -1,10 +1,46 @@
-console.log("The script is running!");
-
+/*
 function addPinkBorder(event) {
-  console.log("click happened! here's the click event:");
-  console.log(event);
   event.target.style.border = "2px solid pink";
 }
 
+function removePinkBorder(event) {
+  event.target.style.border = null;
+}
+
 var photo = document.getElementById("lizard-photo");
-photo.addEventListener("click", addPinkBorder);
+photo.addEventListener("mouseover", addPinkBorder);
+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("slow");
+});
+
+$(".reveal").click(function(){
+  $("#lizard-photo").show("fast");
+});
diff --git a/web_dev/jquery/style.css b/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;
 }