$(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
$('.mascot h1').html('Spring Peepers');
$('h1').first().css({'color': 'red', 'border': 'black 1px solid'});
$('#frog').css({ 'width': '200px' });
//RELEASE 3: Event Listener
  // Add the code for the event listener here 
$('img').on('mouseover', function(e) {
		e.preventDefault()
		$(this).attr('src', 'frog_on_branch.png')
})

$('img').on('mouseleave', function() {
		$(this).attr('src', 'devbootcamp.png')
})
 
//RELEASE 4 : Experiment on your own
var color = $('body').css('background-color');

$('button').on('click', function(){
		var color = $('body').css('background-color');
		if (color == 'rgb(255, 192, 203)'){
			$('body').css({'background-color': 'green'});
		} else {
			$('body').css({'background-color': 'pink'});
		}
})
 
})  // end of the document.ready function: do not remove or write DOM 
		//manipulation below this.