For this assignment we will create a simple web store for users to order from a cafe.
Specifications
[x] Starting with the basic HTML 5 Template (index.html) on Canvas, create an application that looks similar to the one below.
[x] Use Jquery for all DOM manipulation and event handlers.
[x] The form should look like the one below.
o The images folder is included with the assignment.
[x] Note - All JavaScript should be in an external JS file.
[x] When the user hovers the mouse over one of the images in the menu, another image should be displayed with the description and price of the item. The id attribute of each image identifies the image to be displayed when it's rolled over.
[x] When the user clicks on an image, the order list and order total should be updated and displayed.
[x] If the user clicks the Place Order button, nothing should happen. Later in the semester we will learn how to move the user to another page.
[x] • If the user clicks the Clear Order button, all of the items should be removed from the order list and the total should be cleared.
[x] • Use a select element to display the items added to the order.
[x] • Do not forget your JSDoc!
[x] • Do not forget to put a comment at the top of the code file with your name and assignment.
[x] • Do not forget to validate both your HTML and your CSS files.
2 Documentation
[x] You will need to create a document (.docx, .rtf, .pdf) which contains the following:
[x] A screenshot of your page running on your local webserver. Your screenshot needs to include the address bar with the localhost url and show the mouseover like shown above.
[x] You will need to validate the index.html and your CSS file using the validator (link on Canvas) and include a screenshot of the successful validation (Green Bar).
What to Submit
[x] You need to submit your index.html, CSS file, and your external JS file along with your Document.
[x] Make sure your document is in the correct format and includes your name.
You need to leave a comment that you have completed the project and tell what grade you received. You can then Mash (en-SAE, Press en-US) the Close and comment button.
Web Client-Side Programming – Homework 4
The café.
Description
For this assignment we will create a simple web store for users to order from a cafe.
Specifications
[x] Use Jquery for all DOM manipulation and event handlers.
[x] The form should look like the one below. o The images folder is included with the assignment.
[x] Note - All JavaScript should be in an external JS file.
[x] When the user hovers the mouse over one of the images in the menu, another image should be displayed with the description and price of the item. The id attribute of each image identifies the image to be displayed when it's rolled over.
[x] When the user clicks on an image, the order list and order total should be updated and displayed.
[x] If the user clicks the Place Order button, nothing should happen. Later in the semester we will learn how to move the user to another page.
[x] • If the user clicks the Clear Order button, all of the items should be removed from the order list and the total should be cleared.
[x] • Use a select element to display the items added to the order.
[x] • Do not forget your JSDoc!
[x] • Do not forget to put a comment at the top of the code file with your name and assignment.
[x] • Do not forget to validate both your HTML and your CSS files.
2 Documentation
[x] You will need to create a document (.docx, .rtf, .pdf) which contains the following:
[x] A screenshot of your page running on your local webserver. Your screenshot needs to include the address bar with the localhost url and show the mouseover like shown above.
[x] You will need to validate the index.html and your CSS file using the validator (link on Canvas) and include a screenshot of the successful validation (Green Bar).
What to Submit
[x] You need to submit your index.html, CSS file, and your external JS file along with your Document.
[x] Make sure your document is in the correct format and includes your name.