CSCI 1720

jQuery Shopping List

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

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:

1. We also need to position the shopping list icon

1. Style the input field

1. Note for instruction on how to delete items

1. Add a border between the user controls and the list

IDs

1. Style the 'Print' and 'Clear' buttons:

1. Save your changes. Launch the file in Live Preview. You should see something like this:

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

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

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

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:

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

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:

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

Now, press Enter without adding an item:

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

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

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

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:

1. A final bit of coding to handle highlighting and deleting individual 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)

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 😊