$(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
 
 $('h1').css({'color': 'red'})

 $('h1').css({'border': 'solid 1px darkred', 'border-radius': '5px'})

 $('h1').css({'visibility': 'visible'})

 $('.mascot > h1').html('Red Admirals')
 
//RELEASE 3: Event Listener
  // Add the code for the event listener here 
 $('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://i.imgur.com/PFl9nbp.png')
  })

$('img').on('mouseleave', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://i.imgur.com/U91xeAx.png')
  })

 $('img').css({'width': '20%', 'height': '20%'})
 
//RELEASE 4 : Experiment on your own
 
 $('img').on('click', function() {
  $(this).animate({ 
    width: "100%"
    },
    2000); 
  });
  
})  // end of the document.ready function: do not remove or write DOM manipulation below this.
  
  //REFLECTION
  // This was a very cool challenge to work on. There are a few similarities to the challenge we did with javascript DOM. 
  // I was excited to learn how to animate images! Going to use the new knowledge in another challenge this week. I did 
  // have an issue with selecting elements in console. I had to use 'bodyElement = $('body')' (without the word 'var') 
  // and then 'bodyElement' in order to get the info.