blooies/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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery_example.js"></script>

  <style>
	  img {
	  position: absolute;
	  left: 50px;
		}
	</style>

</head>

<body>
  <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>

  <p style='color: white'>roll over to see spring peepers!</p>

  <br>
  <button id="right">go right!</button>
  <button id="left">go left!</button>


  <div class="mascot">
    <h1> My DBC Mascot </h1>
    <img id="logo" src="dbclogo.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': 'black'})

//RELEASE 1:
  //Add code here to select elements of the DOM
bodyElement = $('body')

//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
 $(':header').css({'color': 'blue', 'border': '2px dotted black'})
 $('.mascot h1').html("spring peepers")

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

  $('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://www.virginiaherpetologicalsociety.com/amphibians/frogsandtoads/northern-spring-peeper/spring%20peeper004.jpg')
  })


  $('img').on('mouseleave', function(e){
     e.preventDefault()
    $(this).attr('src', 'dbclogo.png')
  })
//RELEASE 4 : Experiment on your own


// $('img').on('mouseover', function(e){
//   e.preventDefault()
//   $(this).animate({
//     'width': '500px',
//   }, 10000, function() {
//     // Animation complete.
//   });
// });

$('h1').on('mouseover', function(){
  $(this).css({'border': '2px dotted purple'})
})


$('#right').on('click', function() {
	$('#logo').animate({"left" : "+=50px"}, "slow");
});

$('#left').on('click', function() {
	$('#logo').animate({"left" : "-=50px"}, "slow");
});


})  // 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery_example.js"></script>

	<style>
	img {
	position: absolute;
	left: 50px;
	}
	</style>

	</head>

	<body>
	<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>

	<p style='color: white'>roll over to see spring peepers!</p>

	<br>
	<button id="right">go right!</button>
	<button id="left">go left!</button>


	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<img id="logo" src="dbclogo.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': 'black'})

	//RELEASE 1:
	//Add code here to select elements of the DOM
	bodyElement = $('body')

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	$(':header').css({'color': 'blue', 'border': '2px dotted black'})
	$('.mascot h1').html("spring peepers")

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

	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src', 'http://www.virginiaherpetologicalsociety.com/amphibians/frogsandtoads/northern-spring-peeper/spring%20peeper004.jpg')
	})


	$('img').on('mouseleave', function(e){
	e.preventDefault()
	$(this).attr('src', 'dbclogo.png')
	})
	//RELEASE 4 : Experiment on your own


	// $('img').on('mouseover', function(e){
	// e.preventDefault()
	// $(this).animate({
	// 'width': '500px',
	// }, 10000, function() {
	// // Animation complete.
	// });
	// });

	$('h1').on('mouseover', function(){
	$(this).css({'border': '2px dotted purple'})
	})


	$('#right').on('click', function() {
	$('#logo').animate({"left" : "+=50px"}, "slow");
	});

	$('#left').on('click', function() {
	$('#logo').animate({"left" : "-=50px"}, "slow");
	});




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