jonathonnordquist/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>
		<style>
			img{
				border: 2px solid black;
			}
			#landof{
				visibility: hidden;
				font-size: 2em;
			}
		</style>
	</head>
	<body>
		<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
		<div class="mascot">
			<h1> My DBC Mascot </h1>
			<h3 id="landof">Land of the expanding grasshopper!</h3>
			<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:
//Add code here to select elements of the DOM

headingOne = $("h1");
mascotClass = $(".mascot");
picture = $("img");
bodyElement = $('body');

// This is interesting.  When the variables are placed here with no "var" keyword, they don't do anything.
// When defined outside the jQuery function either with or without the "var" keyword, they return an empty
// array.  Here, no "var" keyword and it returns everything about the given selector.

//RELEASE 2:
// Add code hese to modify the css and html of DOM element
$("h1").css({"color": "blue",
	"border": "2px solid black",
	"visibility": "visible"
	})

$("div h1").html("<h1>Grasshoppers!</h1>")


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

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


//RELEASE 4 : Experiment on your own

 $("img").on("mouseenter", function(){
	$("img").animate({
		width: "50%",
		borderWidth: "15px"
	}, 2000);
	$("#landof").css("visibility", "visible");
})
$("img").on("mouseleave", function(){
	$("img").animate({
		width: "393px",
		borderWidth: "2px"
	}, 2000);
	$("#landof").css("visibility", "hidden");
})


}) // 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="jquery_example.js"></script>
	<style>
	img{
	border: 2px solid black;
	}
	#landof{
	visibility: hidden;
	font-size: 2em;
	}
	</style>
	</head>
	<body>
	<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<h3 id="landof">Land of the expanding grasshopper!</h3>
	<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:
	//Add code here to select elements of the DOM

	headingOne = $("h1");
	mascotClass = $(".mascot");
	picture = $("img");
	bodyElement = $('body');

	// This is interesting. When the variables are placed here with no "var" keyword, they don't do anything.
	// When defined outside the jQuery function either with or without the "var" keyword, they return an empty
	// array. Here, no "var" keyword and it returns everything about the given selector.

	//RELEASE 2:
	// Add code hese to modify the css and html of DOM element
	$("h1").css({"color": "blue",
	"border": "2px solid black",
	"visibility": "visible"
	})

	$("div h1").html("<h1>Grasshoppers!</h1>")


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

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



	//RELEASE 4 : Experiment on your own

	$("img").on("mouseenter", function(){
	$("img").animate({
	width: "50%",
	borderWidth: "15px"
	}, 2000);
	$("#landof").css("visibility", "visible");
	})
	$("img").on("mouseleave", function(){
	$("img").animate({
	width: "393px",
	borderWidth: "2px"
	}, 2000);
	$("#landof").css("visibility", "hidden");
	})




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