hwhelchel/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="week10jquery.js"></script>
</head>
<body>
  <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
  <div class="mascot">
    <h1> My DBC Mascot </h1>
    <img style="border: 5px solid green" 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 h1 = $('h1');

//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
  $('h1').css({'color': 'blue', 'border': '5px solid black', 'visibility': 'hidden'});
  $('.mascot h1').html('Banana Slugs').css({'visibility':'visible'});

//RELEASE 3: Event Listener
  // Add the code for the event listener here


  // $('img').on('mouseenter', function(e){
  //    e.preventDefault();
  //   $(this).attr('src', 'http://www.digital-landscape.net/photo/(album)/Insects/(photo)/max/banana_slug_2.jpg');
  // });

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

  var large={width: "150%",height: "150%", borderWidth: "5px"};
  var small={width: "75%",height: "75%", borderWidth: "10px"};
  var count=1;

  $(function() {
    $('img')
        .mouseover(function() {
            $(this).attr("src", 'http://www.digital-landscape.net/photo/(album)/Insects/(photo)/max/banana_slug_2.jpg');
        })
        .mouseout(function() {
            $(this).attr("src", 'dbc_logo.jpg');
        })
        .click(function() {
						if (count==1) {
							$(this).animate(large);
							count = 1 - count;
						} else {
							$(this).animate(small);
							count += 1;
						}
        }
        );
});

//RELEASE 4 : Experiment on your own

//See Release 3


}); // 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="week10jquery.js"></script>
	</head>
	<body>
	<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<img style="border: 5px solid green" 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 h1 = $('h1');

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	$('h1').css({'color': 'blue', 'border': '5px solid black', 'visibility': 'hidden'});
	$('.mascot h1').html('Banana Slugs').css({'visibility':'visible'});

	//RELEASE 3: Event Listener
	// Add the code for the event listener here


	// $('img').on('mouseenter', function(e){
	// e.preventDefault();
	// $(this).attr('src', 'http://www.digital-landscape.net/photo/(album)/Insects/(photo)/max/banana_slug_2.jpg');
	// });

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

	var large={width: "150%",height: "150%", borderWidth: "5px"};
	var small={width: "75%",height: "75%", borderWidth: "10px"};
	var count=1;

	$(function() {
	$('img')
	.mouseover(function() {
	$(this).attr("src", 'http://www.digital-landscape.net/photo/(album)/Insects/(photo)/max/banana_slug_2.jpg');
	})
	.mouseout(function() {
	$(this).attr("src", 'dbc_logo.jpg');
	})
	.click(function() {
	if (count==1) {
	$(this).animate(large);
	count = 1 - count;
	} else {
	$(this).animate(small);
	count += 1;
	}
	}
	);
	});

	//RELEASE 4 : Experiment on your own

	//See Release 3



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