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.
Recommendations
We recommend that you keep the browser Console open at all times when you are writing and debugging JavaScript. In fact, you will mostly test your functions in the JavaScript console.
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.
How to Partner?
Use this shared Google Doc to record who your pair partner is for this assignment or find a partner who has similar scheduling constraints. Please use the hw9 tab, leaving the hw8 and hw7 tabs alone, to record those choices. It is not required to pair with your project partner, you can pair with anyone in any section, as long as you are able to find time to work together.
You must enter the names of team members in this spreadsheet (or if you got permission, your name alone), since the graders will use this document for grading purposes.
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:
- The page should contain two main sections; the shopping gallery, and the shopping order.
- 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.
- 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).
- 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.)
- Note that the buttons on your form should
be
type=button
, nottype=submit
. We're using Ajax to submit the form, not the normal submit process. - Create the order form as shown above.
- 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 inpublic_html
or thepublic_html/mail-form
folder that we suggested you create to put your PHP script in. - Test it by filling out the form and sending yourself an email message (non-Ajax, just normal form submission).
- 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.
- Make sure you include your HTML and CSS validation icons.
- 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 formatOrder
that 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 placeOrder
that 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.
- 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). - In your browser, go to gradescope.com and log in.
- Under
Your Courses
, selectCS 110
. - You will see all of your current assignments. Click on the assignment you are turning in.
- 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.