$(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'); // Doesn't work
 
 
//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
 $('h1').css({
    'color': 'teal',
    'border': '1px solid chartreuse',
    'visibility': 'hidden'
 })

var mascotHeader = $('.mascot h1')
mascotHeader.css({'visibility': 'visible'})
mascotHeader.html('Sluggie')
 
//RELEASE 3: Event Listener
  // Add the code for the event listener here 
  $('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'https://i.chzbgr.com/maxW500/2140877056/hC6DDCE86/')
  })

  $('img').on('mouseout', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://i.imgur.com/B3T8I6h.png')
  })
 
 
//RELEASE 4 : Experiment on your own
 $("#grow").click(function() {
    $("img").animate(
            {"height": "+=50px"},
            "easein");
});
$("#shrink").click(function() {
    $("img").animate(
            {"height": "-=50px"},
            "easeout");
});
 
 
 
 
})  // end of the document.ready function: do not remove or write DOM manipulation below this.