Assignment 8
Create a copy of the webpage you made for Assignment 7. Use bootstrap styling. You have total freedom over the page format and content.
Required Knowledge & Skills
- SublimeText 3 (Optional)
- Bootstrap
- Javascript
- HTML Forms
Assignment Instructions
Create a copy of the webpage you made for
Assignment 7, and then modify the form to include the following elements. Note: For
this assignment, all CSS styles will be in the external CSS file unless specified otherwise.
Submission - Upload any pages created/modified to AwardSpace. Add all your files (HTML/CSS/media files, etc.) to a folder and compress it. Submit your zipped file along with the URL of the web page of your Assignment 8 on AwardSpace to Canvas. The URL should be submitted as a submission comment with your zip file. Please test all the links within your website before submission.
- Update the form so that it has the following elements. This form would be used to sell
different products (you can choose any sort of products based on the theme of your website).
Every field must have a label, and all labels should be
bold. (35 points)
- Full name: [type=text]. This field should be required, should have a placeholder, and should be the focus.
- Quantity: [type=number]. This field should be required.
- A drop-down menu: To allow a user to choose from at least 3 different products. Each label should specify the name as well as the price of the product. This field should be required.
- Radio buttons: To let a customer choose a Delivery Option:
- Same day delivery (10$ Extra Charge)
- 5-day delivery (5$ Extra Charge)
- 10-day delivery (No extra charge)
- A textarea: To let a customer add any additional Delivery Instructions. The field should be optional but should have a placeholder.
- A Submit Button
- Use Bootstrap form's styles (10 points)
- Update your JavaScript function such that it is called when the user clicks on the Submit
button. The function should calculate the Total Cost of the order and do the following data
validation: (45 points)
- Check if the value entered for Quantity is valid. It should be a number between 1 and 10.
- Calculate the Total Cost by and multiplying the Quantity from the input field by the Price of the product. The price depends on the product that the user selects from the drop-down menu.
- Add the extra charge based on the Delivery Option selected by the user.
- Apply a discount based on the Quantity ordered, 10% for a quantity greater than 3 and 15% for a quantity greater than 5. (Validating the quantity ordered was completed in Assignment 7)
- Display the Total Price calculated at the bottom of the form. If any of the data entered is invalid, then an error message would be displayed instead. It should be below the corresponding field (although it would be okay too if you put an error message right next to the corresponding field). It should be in red and of a smaller font size than the rest of the text in the form.
- Upload any pages created/modified to AwardSpace and a link to it should be attached as a submission comment. All pages must be linked to each other in the nav bar. All links must be working as expected. (10 points)
- Best practices, appropriate Indentation, layout, syntax must be followed for HTML/CSS/JS/Bootstrap. (10 points penalty)
Submission - Upload any pages created/modified to AwardSpace. Add all your files (HTML/CSS/media files, etc.) to a folder and compress it. Submit your zipped file along with the URL of the web page of your Assignment 8 on AwardSpace to Canvas. The URL should be submitted as a submission comment with your zip file. Please test all the links within your website before submission.