michaelohm/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 id="redadmirals"> 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'})

 //Turns background color to pink

//RELEASE 1:
  //Add code here to select elements of the DOM
 var bodyElement = $('body') // we couldn't get this to work using var bodyElement,
 // but with just bodyElement = $('body') it seems to work.

 var mascot = $('.mascot')
 //Again, using var mascot to assign the variable to the jquery code does not work.
 // It only works when eliminating the var portion and setting mascot = $('.mascot')
 // As far as we know, not using var sets the variable as a global variable which is
 //usually not something we want to happen.

 var image = $(':image') // again, here setting the jquery selector to a var doensn't
 //work. It only works when set to image.

 var header = $(':header') // doesn't work with var

//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
  $('h1').css({color: 'blue'})
  $('h1').css({border: '5px solid blue'})
  $('#redadmirals').html('YOUR COHORT MASCOT')

//RELEASE 3: Event Listener
  // Add the code for the event listener here
    $('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://farm4.staticflickr.com/3290/3026610527_e88897bc11.jpg')
  })

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

//RELEASE 4 : Experiment on your own
  $('img').css({border: '5px solid black'})


$('img').mouseenter(function(){
    $(this).css("border", "0px solid #f37736").animate({
        'borderWidth': '4px',
        'borderTopColor': '#f37736'
    },500);
}).mouseleave(function(){
     $(this).animate({
        'borderWidth':'0px',
        'borderTopColor':'red'
    },500);
});


//  $( "img" ).click(function() {
//   $( "img" ).animate({
//     opacity: 0.25,
//     left: "+=50",
//     height: "toggle",
//     borderWidth: 20,
//     borderColor: 'blue'
//   }, 5000, function() {
//     // Animation complete.
//   });
// });


})  // end of the document.ready function: do not remove or write DOM manipulation below this.
	<!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 id="redadmirals"> 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'})

	//Turns background color to pink

	//RELEASE 1:
	//Add code here to select elements of the DOM
	var bodyElement = $('body') // we couldn't get this to work using var bodyElement,
	// but with just bodyElement = $('body') it seems to work.

	var mascot = $('.mascot')
	//Again, using var mascot to assign the variable to the jquery code does not work.
	// It only works when eliminating the var portion and setting mascot = $('.mascot')
	// As far as we know, not using var sets the variable as a global variable which is
	//usually not something we want to happen.

	var image = $(':image') // again, here setting the jquery selector to a var doensn't
	//work. It only works when set to image.

	var header = $(':header') // doesn't work with var

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	$('h1').css({color: 'blue'})
	$('h1').css({border: '5px solid blue'})
	$('#redadmirals').html('YOUR COHORT MASCOT')

	//RELEASE 3: Event Listener
	// Add the code for the event listener here
	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src', 'http://farm4.staticflickr.com/3290/3026610527_e88897bc11.jpg')
	})

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

	//RELEASE 4 : Experiment on your own
	$('img').css({border: '5px solid black'})




	$('img').mouseenter(function(){
	$(this).css("border", "0px solid #f37736").animate({
	'borderWidth': '4px',
	'borderTopColor': '#f37736'
	},500);
	}).mouseleave(function(){
	$(this).animate({
	'borderWidth':'0px',
	'borderTopColor':'red'
	},500);
	});




	// $( "img" ).click(function() {
	// $( "img" ).animate({
	// opacity: 0.25,
	// left: "+=50",
	// height: "toggle",
	// borderWidth: 20,
	// borderColor: 'blue'
	// }, 5000, function() {
	// // Animation complete.
	// });
	// });






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