JohnathanWeisner/jquery_example.html

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

  <!-- Add a link to jQuery CDN here script here -->

  <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:
bodyElement = $('body');


//RELEASE 2:
var titles = $('h1');
titles.css({'color' : 'blue', 'border' : '2px solid blue', 'visibility' : 'visible'});
$('.mascot h1').html('Fiddler Crabs');


//RELEASE 3: Event Listener
$('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://24.media.tumblr.com/5ecee7116919dc8ac094f39bf610bca2/tumblr_mlzci0GovT1r4zr2vo2_r1_500.gif')
  });


//RELEASE 4 : Experiment on your own
var crab = $('img').css({'border': '0 solid #000'});
var clicked = false;
crab.on('click', function(){
	if(clicked){
		crab.animate({height:"200px"}, 100);
		crab.animate({borderWidth: 10}, 100);
	} else {
		crab.animate({height:"500px"}, 500);
		crab.animate({borderWidth: 1}, 500);
	}
	clicked = !clicked;
});

})  // 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>

	<!-- Add a link to jQuery CDN here script here -->

	<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:
	bodyElement = $('body');


	//RELEASE 2:
	var titles = $('h1');
	titles.css({'color' : 'blue', 'border' : '2px solid blue', 'visibility' : 'visible'});
	$('.mascot h1').html('Fiddler Crabs');


	//RELEASE 3: Event Listener
	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src', 'http://24.media.tumblr.com/5ecee7116919dc8ac094f39bf610bca2/tumblr_mlzci0GovT1r4zr2vo2_r1_500.gif')
	});


	//RELEASE 4 : Experiment on your own
	var crab = $('img').css({'border': '0 solid #000'});
	var clicked = false;
	crab.on('click', function(){
	if(clicked){
	crab.animate({height:"200px"}, 100);
	crab.animate({borderWidth: 10}, 100);
	} else {
	crab.animate({height:"500px"}, 500);
	crab.animate({borderWidth: 1}, 500);
	}
	clicked = !clicked;
	});

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