code icon

CSCI 1720

Intermediate Web


jQuery Shopping List

    This assignment will build a client-side-dynamic application, a shopping list. The functional requirements for this application are as follows
  • The page will load with an empty list, a heading, and a graphic (https://csci1720.net/images/jq/list.png) , an input field for the user to input list items, a ‘clear list’ button to delete the list, and a ‘print’ button to allow the user to print the window (presumably, so he or she can take it to the store)
  • List items will be added dynamically, when the user enters data and presses the Enter key
      The application will detect if a user tries to enter an empty item
    • It will throw an alert if the user tries to add a blank item
  • The user can delete individual list items by hovering over them and clicking the mouse
      The application will provide visual feedback
    • When an item is hovered over, it will change appearance
    • If the user chooses not to delete the item, its appearance will return to default when the cursor leaves the item
  • The user will have the option to delete the entire list
  • The user will have the option to print the list
    Notes
  • We're starting with a partially completed HTML file, index.html. You will have to modify the file in order to make use of the CSS and jQuery code you will create
  • Make sure you update all of the included comment blocks, and the ones you may have to create, to include your information (author) and the appropriate date. Think maintenance! Some of the included screen shots will also include comments. You are to include these comments with your code. A major part of your grade for this assignment will be based on proper documentation!
  • The (provided) CSS file, css/style.css, will also be partially completed, but you will have to create classes and IDs to properly style the HTML
  • You will have to import the jQuery library to your project. This time, we’ll be downloading the code and saving it to a separate, linked, file
  • Remember camelCase! One of the most common errors I see with JavaScript and jQuery are typos. For example, in JS, #mylist is NOT the same as #myList. The same is true for CSS, though HTML doesn’t care. All of the built-in JavaScript and jQuery methods use camelCase as their naming convention

Setup

  1. On your external drive, inside your userid.csci1720.net/labs folder, make a new folder named lab12_jq-shopping-list. Create a new folder inside the lab12_jq-shopping-list: v0.1
  1. Download lab12_jq-shopping-list.zip and extract the files to the lab12_jq-shopping-list/v0.1 folder. This will add index.html, add a css folder with style.css and add an images folder with this lab’s images
  1. Your jq_shopping_list/v0.1 folder should now look like this
screen shot
Fig. 1- File structure for the shopping list assignment
  1. What we’ve got here is the completed HTML file and styling. We’re going to write the JavaScript to make it work. But first -

CSS

First, let's complete our styling

  1. Open css/style.css in Brackets

Classes

  1. Add the following in the 'Classes' section:
screen shot
Fig. 2- Completing CSS
  1. We also need to position the shopping list icon
screen shot
Fig. 3- Positioning the icon
  1. Style the input field
screen shot
Fig. 4- Input field
  1. Note for instruction on how to delete items
screen shot
Fig. 5- How to delete items
  1. Add a border between the user controls and the list
screen shot
Fig. 6- Add a little border

IDs

  1. Style the 'Print' and 'Clear' buttons:
screen shot
Fig. 7- Print and Clear buttons
screen shot
Fig. 8- Print and Clear buttons
screen shot
Fig. 9- Print and Clear buttons
  1. Save your changes. Launch the file in Live Preview. You should see something like this:
screen shot
Fig. 10- What we've got so far

Create the JavaScript

Now, we’ve got the page looking the way we want it to when it loads. But if you enter something in the ‘Add Item’ text box, nothing will happen. We’ve got to add JavaScript (actually jQuery…but remember, jQuery is a JavaScript library that builds upon - and simplifies - JavaScript). jQuery makes this almost surprisingly easy

  1. Return to list.js in Brackets. Add the $(document).ready(function() { }) code block
screen shot
Fig. 11- $(document).ready()
  1. Create a new file in the js folder and name it jquery3.3.1-min.js
  1. In your browser, navigate to https://code.jquery.com/jquery-3.3.1.min.js. This is the jQuery 3.3.1 minified library. Select the text - Ctrl+a and copy it - Ctrl+c
  1. Return to your new jQ file in Brackets
  1. Paste (Ctrl+v) the jQuery code into the new file and save it
screen shot
Fig. 12- Saving the library to a local file

This is the ‘minified’ - or production - version of the jQuery library. Clearly, it isn’t very human-readable, but, as we discussed in class, optimizes the use of the jQuery library by eliminating unnecessary white space. The browser don’t care (as they say up Stoney Creek), except that unnecessary whitespace creates overhead in terms of download time. On a high-traffic site, that can be significant

You won’t need to modify the library, so the minified version is appropriate for this project. There may come a time in the future when you do want to modify the jQuery library to meet specific needs -- it’s open-source, after all. In that case, you’d download the ‘development’ version, which includes whitespace to make it more human-readable. Once you’re done, you would run it through a ‘minification’ application before deploying your modified library to production

  1. Add links to the jQ library and list.js in index.html
screen shot
Fig. 13- Link to jQuery files

Remember, when we're using jQuery, we have to link our custom files in the HTML after the link to the jQuery library we're using

  1. We want, first, to be able to add items to the list. Remember, in index.html, the list starts out empty ( <ul id='#myList'></ul> ). What we’re going to do is have the browser detect when the user presses the Enter key and add the value that’s in the textbox as a list item. So, after your comment block in js/list.js, add the following:
screen shot
Fig. 14- Link to jQuery files

So, there are two blocks of code, here. The first is a callback function that executes when the second (on(‘keyup’, …) event is detected.

What is a 'callback' function? Check here

Notice

screen shot
Fig. 15- Code that adds the item to the list
  1. Return to your browser and refresh the page. Open the developer tools: F12. Click on the console tab. First test that the code will correctly append to the list:
screen shot
Fig. 16- Logging the user input

Notice that each time a key is pressed, the application (currently) logs it, along with its keyCode.

Now, press Enter without adding an item:

screen shot
Fig. 17- Error checking
  1. In the developer tools, click on the ‘Elements’ tab
  1. Expand the tree so that the unordered list is selected
  1. Add a couple of items using the form and notice how they are added to the list
screen shot
Fig. 18- List items
dynamically added
  1. Now that we know that the application is adding items correctly and correctly detecting empty items, take out the console.log() (test) code
  1. Save changes and return to your browser. Close the developer tools and reload the page
  1. Add several items to ensure the application is working correctly up to this point
  1. So that fulfills the first requirement. Now, let’s implement the ‘Clear’ function
screen shot
Fig. 19- Clear list

So, here, we’re selecting the button whose ID is clearList. The .on('click', function() { ... }); method binds the anonymous function to the ‘click’ event. We then select the unordered list (#myList) and use the .empty() method to clear all of the list items from it. Easy peasy

Another way we could clear the list just occurred to me:

$('#clearList').on('click', function() {
    $('#shoppingList').html('');
});


Take your pick...either way works

  1. Save your changes. Return to the browser and reload the page. Add some items. Then click the Clear button to test it
  1. Believe it or not, printing the page is just as easy
screen shot
Fig. 20- Print the page

So, again, we’ve bound the click event to the button whose ID is printList and then execute the (built-in) method, window.print()

  1. Save your changes; return to the browser; reload the page; add some items; and click the ‘Print’ button. Note that you don’t actually have to print your output. As long as the print dialog pops up, you know it’s working:
screen shot
Fig. 21- Print dialog
  1. A final bit of coding to handle highlighting and deleting individual list items:
screen shot
Fig. 22- Highlight selected list items
  1. Save all of your changes; return to your browser; and reload the page. Add some items. Then test your code by hovering over an item (confirm that the color turns to red); hover out (confirming that the color returns to black); and clicking on an item (to confirm that it is deleted from the list)
screen shot
Fig. 23- Hovering over list item

Save & upload

  1. Launch FileZilla and log in to your account
  1. Double-click on labs and create a new directory named lab12_jq-shopping-list
  1. Navigate to your local lab12_jq-shopping-list directory
  1. Upload your files/folders to the server
  1. Test the application from the server
  1. Copy/paste the URL for the file into a new text file named lab12_jq-shopping-list.txt and upload the file to D2L

Have a nice day 😊