NathanSass/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.png">
  </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');
//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
  bodyElement.css({'font-family':'sans-serif'});
  $('h1').css({'color': 'aliceblue'});
	$('div > h1').css({'color': 'red'});
	$('img').css({'margin-left': '35%',
								'margin-top': '15%',
		});

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

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

//RELEASE 4 : Experiment on your own

 $('img').animate({
          width: "50%",
          height: "100%",
          opacity: '.1'
    }, 500 );

 $('img').animate({
          width: "40%",
          height: "40%",
          opacity: 1,
    }, 500 );

 $('div img').mouseenter(function () {
    $(this).css({border: '0 solid #000'}).animate({
        borderWidth: 100,
        opacity: .5,
    }, 500);
}).mouseleave(function () {
     $(this).animate({
        borderWidth: 0,
        opacity: 1,
    }, 500);
});
	<!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.png">
	</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');
	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	bodyElement.css({'font-family':'sans-serif'});
	$('h1').css({'color': 'aliceblue'});
	$('div > h1').css({'color': 'red'});
	$('img').css({'margin-left': '35%',
	'margin-top': '15%',
	});

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

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

	//RELEASE 4 : Experiment on your own

	$('img').animate({
	width: "50%",
	height: "100%",
	opacity: '.1'
	}, 500 );

	$('img').animate({
	width: "40%",
	height: "40%",
	opacity: 1,
	}, 500 );

	$('div img').mouseenter(function () {
	$(this).css({border: '0 solid #000'}).animate({
	borderWidth: 100,
	opacity: .5,
	}, 500);
	}).mouseleave(function () {
	$(this).animate({
	borderWidth: 0,
	opacity: 1,
	}, 500);
	});