cdelauder/jquery_example.html

## jquery_example.html
<!DOCTYPE html>
<html>
<head>
  <title>DOM manipulation with jQuery</title>

  <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">
  </div>

</body>
</html>

## jquery_example.js
$(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')
undefined
bodyElement
[<body style="background-color: rgb(255, 192, 203);">…</body>]

var image = $('img')
undefined
image
[<img src="dbc_logo.jpg">]

var mascot = $('.mascot')
undefined
mascot
[e<div class="mascot">…</div>]

//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
  var headline = $('h1')
  $(headline).css("color", "blue")
  $(headline).css("border", "10px dotted aqua")
  $(headline).css("visibility", "hidden")
  $(headline).css("visibility", "visible")


//RELEASE 3: Event Listener
  // Add the code for the event listener here
$('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://chrisdelauder.com/img/redadmiralbutterfly_web.png')
  })

$('img').on('mouseleave', function(e){
     e.preventDefault()
    $(this).attr('src', 'dbc_logo.jpg')
  })

//RELEASE 4 : Experiment on your own

 $('img').click(function() {
  $(this).animate({
    width: "75%",
    opacity: .5,
    borderWidth: "20px"
    },
    5000);
  });

  $('img').mouseleave(function() {
  $(this).animate({
    width: "40%",
    opacity: 1,
    borderWidth: "10px"
    },
    1000);
  });

})  // end of the document.ready function: do not remove or write DOM manipulation below this.

// Reflection:
// I love Jquery. It has all of the functionality of Javascript wihtout the bloated syntax. I can't wait to add some of this
// functionality to my site. I can also see how it would be really useful for UX on forms. The stumbling block I encountered on
// this challenge had to do with $(this). It didn't always recognize what 'this' referred to. I still am not sure why, but I
// found a really good explanation of the different uses of 'this' on stackoverflow. It I was able to get it working. I chose
// to write my own function based on the reference docs to make sure I understood it rather than copy and past from Socrates.
// I didn't include the preventdefault() function the first time around. Now I see that we have to include it because we are
// changing more than just parameters when we change the image. Overall I am happy to see that there is a better version of
// Javascript.
	<!DOCTYPE html>
	<html>
	<head>
	<title>DOM manipulation with jQuery</title>

	<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">
	</div>

	</body>
	</html>
	$(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')
	undefined
	bodyElement
	[<body style="background-color: rgb(255, 192, 203);">…</body>]

	var image = $('img')
	undefined
	image
	[<img src="dbc_logo.jpg">]

	var mascot = $('.mascot')
	undefined
	mascot
	[e<div class="mascot">…</div>]

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	var headline = $('h1')
	$(headline).css("color", "blue")
	$(headline).css("border", "10px dotted aqua")
	$(headline).css("visibility", "hidden")
	$(headline).css("visibility", "visible")


	//RELEASE 3: Event Listener
	// Add the code for the event listener here
	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src', 'http://chrisdelauder.com/img/redadmiralbutterfly_web.png')
	})

	$('img').on('mouseleave', function(e){
	e.preventDefault()
	$(this).attr('src', 'dbc_logo.jpg')
	})

	//RELEASE 4 : Experiment on your own

	$('img').click(function() {
	$(this).animate({
	width: "75%",
	opacity: .5,
	borderWidth: "20px"
	},
	5000);
	});

	$('img').mouseleave(function() {
	$(this).animate({
	width: "40%",
	opacity: 1,
	borderWidth: "10px"
	},
	1000);
	});

	}) // end of the document.ready function: do not remove or write DOM manipulation below this.

	// Reflection:
	// I love Jquery. It has all of the functionality of Javascript wihtout the bloated syntax. I can't wait to add some of this
	// functionality to my site. I can also see how it would be really useful for UX on forms. The stumbling block I encountered on
	// this challenge had to do with $(this). It didn't always recognize what 'this' referred to. I still am not sure why, but I
	// found a really good explanation of the different uses of 'this' on stackoverflow. It I was able to get it working. I chose
	// to write my own function based on the reference docs to make sure I understood it rather than copy and past from Socrates.
	// I didn't include the preventdefault() function the first time around. Now I see that we have to include it because we are
	// changing more than just parameters when we change the image. Overall I am happy to see that there is a better version of
	// Javascript.