Shopping cart

In this assignment, you'll build a simple web page for an e-commerce website, which sells Wellesley products. Here's a screenshot from the order page you'll build:

Here is a screencast of the finished product.

Overview

In this assignment you will practice several Javascript functionalities:

• write functions
• write event-handlers
• test your code for many situations
• dynamically update the HTML
• submit a form using Ajax
• create a gallery of images

You will need to create HTML, CSS, and JavaScript files for this assignment.

Pair Programming

We are requiring pair programming for this assignment, which will work exactly like it did last week. We have added another worksheet to the same Google Doc for the purpose of creating teams. We strongly encourage you to find a different partner from last week. People have different strengths and weaknesses, and working with different partners will help you become more well-rounded.

Requirements

You'll use all your skills in this assignment:

• HTML to set up the page layout
• CSS to format it
• JavaScript to give it the behavior.

The HTML/CSS code

Start by downloading the images you'll need from the Downloads folder.

Create the assign9.html file, to match the screenshot shown above. The requirements of the HTML file are:

1. The page should contain two main sections; the shopping gallery, and the shopping order.
2. The shopping gallery contains three items for sale. For each item, we display a thumbnail image representing it, an option field to choose the quantity to be bought, and a button to add the ordered items to the shopping list. Clicking on that button updates the shopping list shown in the shopping order form.
3. The shopping order section contains an email form, with the customer name, email, and a summary of the order. At the bottom of the form, there is a button to place the order. Clicking on that button sends an email with the order summary to your email account (to help you test it).
4. The form data should be sent to an email account of yours, using the custom PHP script that you created in class or in lab using this creator form. It has a form for you to fill out with your email address and your desired default values, and then gives you a PHP script in your Downloads folder (or wherever your browser puts it). (You did this in class and lab, but we've given you the link to the form in case you need to re-do it.)
5. Note that the buttons on your form should be type=button, not type=submit. We're using Ajax to submit the form, not the normal submit process.
6. Create the order form as shown above.
7. Edit it to specify your PHP script in the action attribute, replacing the bogus value in the original. Note that your PHP script needs to be in an accessible directory, so not in your protected/hw9/ folder but in public_html or the public_html/mail-form folder that we suggested you create to put your PHP script in.
8. Test it by filling out the form and sending yourself an email message (non-Ajax, just normal form submission).
9. The CSS for this page is fairly simple. Just make it look nice! Define a set of appropriate CSS rules to match the layout of the page displayed above.
10. Make sure you include your HTML and CSS validation icons.
11. Also, don't forget to include a link to the jQuery library.

The Javascript Code

Write your code in assign9.js and link to that from the HTML file.

Task 1: formatOrder function

Define a function named formatOrderthat takes no arguments, and formats the order summary as shown here:

The order summary includes the following information:

• The customer's name and email.
• The date and time the order was updated.
• The quantities of the items ordered.

The sharp-eyed readers may have noticed that the three items are on separate lines. How did we do that? It turns out that you can use a \n in your strings to produce a newline character (ASCII code 10, if you're curious).

You can test whether you completed this task by filling out the form and then invoking the function in the JS console and looking at the result in the browser. Don't attach this function as an event handler to anything yet. (Or, you can look ahead to task 4 and see where this might be attached.)

Task 2: placeOrder function

Define a function named placeOrderthat takes no arguments, and submits the formatted shopping order using Ajax.

Remember that our automatically generated php code expects an object with the following literals:

• from_name
• from_email
• subject
• body

You won't be able to test this function until you do task 3, since the orderResponse function will be an argument to the $.post() method.

Task 3: orderResponse function

Define a function named orderResponse, which the response handler for the $.post invocation performed in the previous task. It should dynamically change the HTML of the response container, below the form, to indicate the status of the order. The response might look like this:

Note that the custom PHP script that you are using returns a JS object that only contains a status property, with possible values of "ok" and "fail". (It doesn't have a text property like some of our other examples.) The status property is the only important one, so your response handler can determine what text to provide based on the status.

You can now test tasks 2 and 3 by filling out the form and then invoking the placeOrder function in the JS console and then checking your email. There should also be a response in the browser, thanks to task 3.

Task 4: event handling

Each button click performs a certain action. For example, the "Add to order" button updates the order summary, and the "Place order" button sends out an email. Handle the click event of each button appropriately.

Note that only the Add to order buttons update the order summary, so the order summary won't be updated when you choose a quantity from the drop-down menus or when you fill in the customer's name and email address. (Hint: use the function you defined in task 1.) You can just click one of the Add to order buttons to update that, if you want.

Once you get this task working, you'll have a working shopping cart!

Validation

Submission

Upload your hw9 folder to the server, into your protected folder. (Your PHP script will continue to be outside this protected folder, in public_html or the mail-form folder.)

Make sure your uploaded code works by visiting this URL

http://cs.wellesley.edu/~myname/protected/hw9/assign9.html

and interacting with your shopping cart/send an email to be sure it works correctly from the server.

Gradescope

NOTE: It is only necessary for one member of a pair programming team to submit to Gradescope. Don't forget to add your partner's name as a Group Member when making a submission.

1. Open the Google Doc we shared with you titled: CS110 Submission to Gradescope, and follow the instructions (make a copy of the file, edit the URL in the copy to correspond to your own assignment, and then create your own .pdf version of the copy).
2. In your browser, go to gradescope.com and log in.
3. Under Your Courses, select CS 110.
4. You will see all of your current assignments. Click on the assignment you are turning in.
5. In the dialog box that opens:
   • Click Select PDF
   • locate the correct file on your computer
   • Click Upload PDF
   • It may be necessary to reload the page to verify your submission was uploaded.

Coding Style

All the usual coding rules apply. See the style rules. Especially important is to not forget including comments in all your files to describe your choices and decisions.

Assignments are due at midnight on the due date (check the schedule). Assignments may be turned in up to 24 hours late, for a 10% penalty. Furthermore, remember that this policy means that you should not modify work after the due time has passed, or it will be time-stamped late, and will incur the late penalty.

Honor Code

The Honor Code applies to this course. You are encouraged to discuss assignments with other students, the tutors, and with your instructors. However, your team must solve, write up, debug, test and document the assignment on your own. In other words, it is acceptable to talk with other students in English (or any other human language), but not acceptable to use any formal language and especially not HTML, CSS or Javascript. You should not be looking at other peoples' code or showing them yours. If you worked with others or you have obtained help from any source, you must acknowledge their contribution in writing.

Homework assignments must be your own work. You may not look at solutions from other students, either from the current offering of CS110 or from past offerings.

Grading

These are the criteria we use to grade the homework:

• Homework was submitted on the server by the due date. Late penalties apply.
• Folders and files have the required names and are uploaded to the proper location.
• Your HTML page shows at least three items for the customer to order from.
• The order summary is formatted correctly
• There are no errors in the Javascript console.
• There are comments in the Javascript file to explain the code you entered.

Tutors can look at our solution if they need to.

Help Room

Our tutors in the help room can help you with concrete problems and questions you have about the assignment, thus, go to the room prepared. If you find that you don't know how to start the assignment, you should visit the instructors during their office hours.