diff --git a/web_dev/jquery/index.html b/web_dev/jquery/index.html
index b9174c09ad9..5865391af27 100644
--- a/web_dev/jquery/index.html
+++ b/web_dev/jquery/index.html
@@ -3,6 +3,7 @@
About My Pet
+
diff --git a/web_dev/jquery/notes.md b/web_dev/jquery/notes.md
index 2be4e92a5cd..2cf1793c584 100644
--- 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
\ No newline at end of file
diff --git a/web_dev/jquery/script.js b/web_dev/jquery/script.js
index 60786e80da3..30773422785 100644
--- 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);
\ No newline at end of file
+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");
+});
\ No newline at end of file
diff --git a/web_dev/jquery/style.css b/web_dev/jquery/style.css
index 7c9b8078883..3ab5ccaa74c 100644
--- 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;
}
\ No newline at end of file