$(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')

var findElement = $( "input[name~='bootcamp']" ).val( "bootcamp" );

//This did not work at all, and I have no idea why. 

//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
$('h1').css({'color':'red'})
$( ".mascot" ).css( "border", "3px solid red" )
$('h2').html("YOUR COHORT MASCOT")

//RELEASE 3: Event Listener
  // Add the code for the event listener here 
$('img').on('mouseenter', function(e){
     e.preventDefault()
    $(this).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpwQGdZ-6qMpQ-uSzuPxWZFf_3hGd-phb4O6x-5TXDzC2oswsaRA')
  })
$('img').on('mouseleave', function(e){
     e.preventDefault()
    $(this).attr('src', 'dbc_logo.jpeg')
  })

//RELEASE 4 : Experiment on your own
$( "h1" ).hover(
  function() {
    $( this ).append( $( "<span>Hi Guys!</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);
$( "h1" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
$( "h1" ).on( "mouseover", function() {
  $( this ).css( "color", "blue" );
});
$( "h1" ).on( "mouseout", function() {
  $( this ).css( "color", "red" );
});
$( "p" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});




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