jquery_quiz.js

/* Here is your chance to take over Socrates!  

Spend 10 minutes on each of the following hacks to the Socrates website.
Enter them in the console to make sure it works and then save
your results here. 

Choose a new pair for each. Add your names to the section you complete.

1. Use basic selectors (id, class, element) to choose an element on the page.
   Use the .css() method to alter at least two CSS properties of this element.


2. Use basic selectors and the find() method to select an image on the page
   and change it with another image of your choice.

3. Use traverse methods to select all instances of a repeated element on the page 
   (like the h3 surrounding the words 'Code Review' ) and use the animate() method to modify it.

4. Try to find an element that requires at least three selectors / traverse 
   methods to locate it and then use the .on() method to bind an event handler 
   on these elements (use an event other than click).

5. Your choice. */


// Uses the .css() method to change the width as you mouseover the object.
$("#main-content div.user").on("click", function() {
  $(this).css("width", "400px");
});

// Uses the .css() method to change the color of the h1 object to red.
$("#main-content h1").on("mouseover", function() {
  $(this).css("color", "red");
});

// Finds each user in the div class user and replaces their image with a new one.
$("#main-content div.user").find("img").replaceWith("<img src='http://cdn.ebaumsworld.com/mediaFiles/picture/604025/83889210.jpg'>");

// Finds the H1 tags in each element and allows them to animate upon clicking the element.
$("#main-content").click(function() {
  $("h1").animate({
  	width: ["toggle", "swing"],
  	height: ["toggle", "swing"],
  	opacity: "toggle"
  }, 5000, "linear", function() {
  	// Logs a statement to let you know the animation is complete.
    $(this).after("<div>Animation complete.</div>");
  });
});

// Bye Bye pictures..
$("#main-content div.user").find("img").on("mouseover").remove();