paigecrum/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.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery_example.js"></script>
     <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>

<body>
    <h1>Hello. Welcome to the jQuery DOM Manipulation Challenge!</h1>
    <div class="mascot">
        <h1>My DBC Mascot</h1>
        <img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-prn1/t1.0-9/945490_187109284780149_2046972162_n.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'}); // applies a pink background color to the body of the HTML

//RELEASE 1:
  //Add code here to select elements of the DOM
var bodyElement = $('body');
var titleElement = $('title');
var mascotDivElement = $('.mascot');
var h1Element = $('h1');
var allElements = $('*');
var mascotTitle = $('div h1');

//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
bodyElement.css({'background-color': 'lightsalmon'});
h1Element.css({'color': 'midnightblue'});
h1Element.css({'border': '1px solid indianred'});
h1Element.css({'visibility': 'hidden'});
h1Element.css({'visibility': 'visible'});
mascotTitle.html('Chicago Dragonflies 2014');

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

$('img').on('mouseover', function(e) {
	e.preventDefault();
	$(this).attr('src', 'https://scontent-b-ord.xx.fbcdn.net/hphotos-ash3/t1.0-9/68441_10201984205101701_1892578217_n.jpg');
});

//$('img').on('click', function(e) {
//	e.preventDefault();
//	$(this).attr('src', 'https://scontent-a-ord.xx.fbcdn.net/hphotos-prn1/t1.0-9/945490_187109284780149_2046972162_n.jpg');
//});

//RELEASE 4 : Experiment on your own

$('img').on('click', function() {
	$(this).animate({'top': '-10px'}, 300);
});

bodyElement.css({'text-align': 'center'});
h1Element.css({'border': 'none'});
bodyElement.css({'font-family': 'Montserrat'});

});  // 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.11.0/jquery.min.js"></script>
	<script type="text/javascript" src="jquery_example.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<h1>Hello. Welcome to the jQuery DOM Manipulation Challenge!</h1>
	<div class="mascot">
	<h1>My DBC Mascot</h1>
	<img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-prn1/t1.0-9/945490_187109284780149_2046972162_n.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'}); // applies a pink background color to the body of the HTML

	//RELEASE 1:
	//Add code here to select elements of the DOM
	var bodyElement = $('body');
	var titleElement = $('title');
	var mascotDivElement = $('.mascot');
	var h1Element = $('h1');
	var allElements = $('*');
	var mascotTitle = $('div h1');

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	bodyElement.css({'background-color': 'lightsalmon'});
	h1Element.css({'color': 'midnightblue'});
	h1Element.css({'border': '1px solid indianred'});
	h1Element.css({'visibility': 'hidden'});
	h1Element.css({'visibility': 'visible'});
	mascotTitle.html('Chicago Dragonflies 2014');

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

	$('img').on('mouseover', function(e) {
	e.preventDefault();
	$(this).attr('src', 'https://scontent-b-ord.xx.fbcdn.net/hphotos-ash3/t1.0-9/68441_10201984205101701_1892578217_n.jpg');
	});

	//$('img').on('click', function(e) {
	// e.preventDefault();
	// $(this).attr('src', 'https://scontent-a-ord.xx.fbcdn.net/hphotos-prn1/t1.0-9/945490_187109284780149_2046972162_n.jpg');
	//});

	//RELEASE 4 : Experiment on your own

	$('img').on('click', function() {
	$(this).animate({'top': '-10px'}, 300);
	});

	bodyElement.css({'text-align': 'center'});
	h1Element.css({'border': 'none'});
	bodyElement.css({'font-family': 'Montserrat'});

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