Assignment 4:
HTML, CSS, JS Website

Due Wednesday March 7th @ 11:59 PM

In this assignment you will make a website called Columbia Paper Infinity to help the salesmen of an up-and-coming paper company log thier sales online. You website will be a single HTML page implemented in HTML, CSS, Bootstrap, JavaScript and JQuery. The focus of this assignment is functionality, not visual design. The visual design only needs to be good enough for the graders to be able to tell what the elements of your designh are.

The website has two main features we want you to implement:

  1. Logging Sales
  2. Editing the Party Planning Committee members list
Good luck! The future of The Columbia Paper Company is in your hands!

Part 1: Page and Navigation Set up

When setting up the page and the basic navigation elements, you page must have:

  1. A banner at the top of the page that reads: “Columbia Paper Infinity.”
  2. A bootstrap navbar with three options:
    • Home
    • Log Sale
    • Party Planning Committee
  3. When the user loads the page, "home" should be visibly selected on the navbar.
  4. When the user clicks on either navbar option, the option will highlight so that the user can tell which option is selected
  5. When the user selects an option from the navbar, the selected interface needs to appear in the space below the navbar
    Note: the normal way to do this in a database backed webpage would be to navigate to a new URL to see the new interface. For now, we do not want you to implement a database, so we are using a different solution - JQuery's hide() and show() functions. When an interface is not selected, it should be hidden, and when it is selected, it can be shown.
  6. The "home" interface is very simple. It just has text that says, "Columbia Paper! The biggest in New York. Remember to log your sales on the website!"

Part 2: Log Sale UI

The interface to log sales should allow users to enter a sale and see all previously entered sales as described below:

  1. The user must see two text boxes: one to enter the client to whom the paper was sold, and another to enter the number of reams.
    The client text entry widget should be long and have the word "client" as placeholder text.
    The reams text entry widget should be short and have the word "# reams" as placeholder text.
  2. The client box must have autocomplete populated with the names of clients from this list.
    Use the JQuery autocomplete feature. This conflicts with bootstrap, so you may have to not to bootstrap for these text inputs (however, you should use bootstrap for the other parts of the page.
  3. Beneath the client entry box, there must be a list of previously entered sales records. The information in the records must align with the grid structure with the input boxes above them. The sales records must start with this data. You may not change the data format.
  4. When the user enters a new sale, a new record must show up as the first record in the list, directly below the input boxes.
    This must be implemented in the Model + View/Controller style demonstrated in class.
  5. For each sales record, there must be a delete button which will remove it from the list of sales records.
    This must be implemented in the Model + View/Controller style demonstrated in class.
  6. After the new entry is added, the interface must go back to a state where the user can immediately start typing a new sale in:
    • The text boxes must clear
    • The cursor must go to the client input box.
  7. There must be two ways to enter a sales record:
    1. Pressing a "submit" button near the text input fields
    2. Pressing "enter" in the "# reams" text input
  8. If either the client field or the reams field is empty when the user tries to submit, three things must happen:
    1. The data must not submit
    2. The webpage must throw an alert warning the user of the first field that was empty
    3. The webpage must move the cursor to the first field that was empty (so that the user can easily type there)

Part 3: Editing the Party Planning Committee

The interface to edit the party planning committee (PPC) is a drag and drop direct manipulation interface as described below.

  1. The PPC UI needs to display two lists:
    1) a list of all the employees seen here, and
    2) a list of people on the party planning committee.
    In its default state, the party planning committee is empty.
  2. Each list must have a div at the top of the list with the label "Non-PPC" or "PPC". This label should be large enough to serve as a drop target.
  3. Using JQuery Draggable and Droppable events, implement an interface where the user can drag names from the Non-PPC list to the head of the of the PPC list, and when they drop it, the name will get added to the end of the PPC list. The reverse must also be true: names from the PPC list can be dragged to the header of the non-PPC list to move them off the PPC.
    This must be implemented in the Model + View/Controller style demonstrated in class.
  4. To cue that an element is draggable, implement the UI such that when a draggable element is hovered over, its background turns light yellow, and the cursor changes to the "move" cursor
  5. While the item is being dragged, the background should also be light yellow, and the cursor should still be the "move" cursor.
  6. While the item is being dragged, it should look like it is on top of all the other elements on the page, so it is fully visible.
  7. While the item is being dragged, the drop target should turn a darker shade.
  8. When the item is dragged over the drop target, the drop target should turn an even darker shade.
  9. If an item is “dropped” anywhere other than an appropriate drop target for that item, it should animate back to the place where the user started dragging it.

Note:
When the user toggles between the Logging Sales UI and the Editing Party Planning committee UI, the information on those sites should be stored in a javascript variable that if the use toggles back to a previous UI (say, logging sales), all the sales data will still be there. However, for this implementation, if the user refreshes the page, the data will revert to it's default state.

Please submit your HTML, CSS, and JS files, along with any attachments your site may need.

Submit

Submit one zip file of your code to Courseworks. Your code should contain only one .html file. That is the file the graders will run.

Please post any questions about this assignment or others to the class Piazza forum.