alexanderfrankel/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_intro.js"></script>

</head>

<body>
  <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
  <div class="mascot">
    <h1> My DBC Mascot </h1>
    <img class="test" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ4oAACiGO_7kDr7vDZdr0VEsZbfw8FgbRB2KWPtAgesk1_tCFq">
    <img class="test" style="display: none" src='http://dnr.maryland.gov/wildlife/plants_wildlife/herps/anura/Northern_Spring_Peepers/Adult_SSmith.jpg'>
  </div>


</body>
</html>

<!-- REFLECTION:
This was an awesome challenge. I am slowly falling in love with jQuery/JS!
Manipulating the DOM is something that I would like to get really good at,
but will definitely take some time. I wonder all the cool things we can do????? -->

## 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

    bodyElement = $('body');

    //RELEASE 2:
    // Add code here to modify the css and html of DOM elements

    $('h1').css({
        'color': 'blue',
        'border': '2px solid red',
        'visibility': 'hidden'
    });


    //RELEASE 3: Event Listener

    // $('img').on('mouseenter', function(e) {
    //     console.log(e);
    //     e.preventDefault();
    //     $(this).attr('src', 'http://dnr.maryland.gov/wildlife/plants_wildlife/herps/anura/Northern_Spring_Peepers/Adult_SSmith.jpg');
    // });

    //RELEASE 4 : Experiment on your own

    // $('img').on('mouseleave', function(e) {
    //     e.preventDefault();
    //     $(this).attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ4oAACiGO_7kDr7vDZdr0VEsZbfw8FgbRB2KWPtAgesk1_tCFq');
    // });

    $('img').on('click', function() {
        $('img').toggle("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>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery_intro.js"></script>

	</head>

	<body>
	<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<img class="test" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ4oAACiGO_7kDr7vDZdr0VEsZbfw8FgbRB2KWPtAgesk1_tCFq">
	<img class="test" style="display: none" src='http://dnr.maryland.gov/wildlife/plants_wildlife/herps/anura/Northern_Spring_Peepers/Adult_SSmith.jpg'>
	</div>


	</body>
	</html>

	<!-- REFLECTION:
	This was an awesome challenge. I am slowly falling in love with jQuery/JS!
	Manipulating the DOM is something that I would like to get really good at,
	but will definitely take some time. I wonder all the cool things we can do????? -->
	$(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

	bodyElement = $('body');

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements

	$('h1').css({
	'color': 'blue',
	'border': '2px solid red',
	'visibility': 'hidden'
	});


	//RELEASE 3: Event Listener

	// $('img').on('mouseenter', function(e) {
	// console.log(e);
	// e.preventDefault();
	// $(this).attr('src', 'http://dnr.maryland.gov/wildlife/plants_wildlife/herps/anura/Northern_Spring_Peepers/Adult_SSmith.jpg');
	// });

	//RELEASE 4 : Experiment on your own

	// $('img').on('mouseleave', function(e) {
	// e.preventDefault();
	// $(this).attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ4oAACiGO_7kDr7vDZdr0VEsZbfw8FgbRB2KWPtAgesk1_tCFq');
	// });

	$('img').on('click', function() {
	$('img').toggle("slow");
	});


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