project-3-easy-project-all-needed-files-will-be-attached

Project 3

Attached Files:

• Project3.zip (749.771 KB)

Objective: Use jQuery to create a shopping cart and wish list with draggable, droppable and sortable functionality.

Requirements:

• Download the jQuery ui files using a theme of your choice.
• Download and extract the shop.html file and associated image and css files to use for this lab.
• Open up the shop.html file and add the following functionality:
  • The page already has a link to the jQuery libraries on a CDN. Add links to the jQuery-ui minified .js file and links to the 2 jQuery-ui stylesheets (jquery css file and theme css file)
  • Draggable images
    • At the top of the page, there are a series of images (roses, mums and pansies) in a div with an id of gallery.
    • Select all of the images in the #gallery div and add the draggable widget
    • Test to see if you can now drag the images around the page.
  • Droppable cart and wishlist
    • At the bottom of the page, there are 2 divs with ids of cart and wishlist. These have a heading and a list element (ul for cart, ol for wishlist). They have been styled already with a minimum height attribute to allow room to drag in the images.
    • Apply the droppable method to the #cart div and to the #wishlist div.
    • For this application, we do not want to leave the images in the shopping cart and wishlist. Instead, we want to add a list item with the alt attribute to the list element in the div where the image is dropped.
    • Inside the parentheses for the draggable widget for the cart, add a drop function:
      $(‘#cart’).droppable({
      drop: function(e,ui) {
      // add code here
      }
      }); // end cart droppable
    • Inside this anonymous function, add the code to append a list item to the #cartlist ul using the ‘alt’ attribute from the image as the text for the list item. Use ui.draggable to get the image. (ui.draggable.attr(‘alt’))
    • Repeat for the droppable widget for the wishlist, adding the list item to the #wishes ol.
    • We want the image to return to it’s old position after adding the item to the cart or wishlist. We can do this by adding revert: true to the draggable widget options for the images.
    • Test your code. When you drag one of the images over the cart or wishlist div and drop it, it should add the item to the list and then return the image to its original position.
• • Sortable cart and wishlist
    • Add the sortable widget to the #cartlist and #wishes divs
    • We want the user to be able to drag items between the #cartlist and #wishes divs, so add the connectWith: option to wishes with a value of ‘#cartlist’ and to cartlist with a value of ‘#wishes’.
    • Test your code. It should sort the items properly and move them from cart to wishlist or wishlist to cart, but you will see that it also creates an ‘undefined’ item in the list each time. This is caused by our droppable function that tries to add the <li> when we drop an item in the drop zone.
    • To fix this problem, we need to make changes to our drop functions in the droppable widget as follows:
      • Add an if statement above the append statement to test if the draggable item has an ‘alt’ attribute. If so, then append the list item using the code we created previously.
        // test to see if the draggable item has an alt attribute
        if (ui.draggable.attr(‘alt’)) {
        // if it has an alt attribute, append the alt text inside of an li tag as before (move the previously created line into the if brackets)
        $(‘#cartlist’).append(“<li>”+ui.draggable.attr(‘alt’)+”</ li>”);
        }
      • Now add an else statement to append a list item to the list with the html of the draggable item as the text instead of the alt attribute:
        else {
        // if no alt attribute, add a list item using the html from the draggable item as the list item text
        $(‘#cartlist’).append(“<li>”+ui.draggable.html()+” li>”);
        }
      • Test again and you will see that you no longer get the undefined lines. However, it is keeping both the original list item and the dropped list item. So we need to add a second line in our else clause to remove the original item: ui.draggable.remove();
      • Test on more time and it should work as expected.
  • Add an effect to an element of your choice on the page
• Upload your files to the server. Test and submit the assignment. Add a comment to tell me where to find your effect.

Lab Requirement	Point Value
Images are draggable and return to their original position when dropped	10 points
When images are dropped in the cart or wishlist, a list item is added using the alt attribute from the image	20 points
Cart and Wishlist are sortable items can be moved from one list to the other	20 points
Wishlist	20 points
Items are removed from the list when moved to the list in the other div	15 points
A jQuery ui effect functions properly on the page.	10 points
Upload to the server and submit the assignment	5 points
Total:	100 points