Solutions for jQuery Workshop

javascript

$(document).ready(function() {

  //////////////
  // EXERCISE 2
  // Add your code below here so that an alert message pops up when you press that button

  $("#exercise2Button").on('click', 
    function() {
      alert("You rock!");
    }
  );

  //////////////
  // EXERCISE 3

  /// "Fade out" spell
  $('#disappear').on('click', 
    function() {
      $('.dolls').fadeOut();
    }
  );
  /// "Fade in" spell
  $('#appear').on('click', 
    function() {
      $('.dolls').fadeIn();
    }
  );

  // "Transformation" spell
  $( "#transform" ).on('click', function() {
    $('#voldemort').fadeOut();
    $('#cats').fadeIn();
  });

  // "Hover" spell
  $( "#levitate" ).hover(
    function() {
      $('#carola').addClass('levitating')
    }, 
    function() {
      $('#carola').removeClass('levitating')
    }
  );

  //////////////
  // EXERCISE 4

  $('.product').hover(
    function() {
      $('.product-description').hide();
      var name = $(this).attr('id');
      $('#' + name + '-description').fadeIn();
    },
    function(){
      $('.product-description').fadeOut();
    }
  );

  //////////////
  // EXERCISE 5
  $('#add-to-cart').click(addToCart);
  var numItems = 0;
  
  function addToCart() {
    numItems = numItems + 1;
    $("#cart").fadeOut().fadeIn();
    $("#cart-quantity").html(numItems);
    console.log("added an item!");
  }

  //////////////
  // EXERCISE 6
  $('.bxslider').bxSlider();


});