WEB222-Final Assessment Solved

Overview  

The assessment has three parts and builds on your final assignment. Specifically, you will be asked to do the following:  

1.      Research, Implement a HTML Forms, and Form Validation for your Assignment 2 that works well on both Mobile and Desktop 
2.      Research and Implement a Static Hosting solution for your final assignment and added HTML Forms, so it can be viewed online   

3.      Write a Reflection Paper about the work you did in step 1.  

Part 1. HTML Forms and Form Validation   
You are asked to modify your final assignment in order to provide additional features.  Specifically, you are asked to add extra HTML Forms to your store’s web site.

1.1 Subscribe Email Form 


Modify your Assignment 2 index.html page to include a new HTML Form at the bottom (e.g., in the page’s footer).  If your page does not have a footer, add one so that there is a logical space to include this form.


This form should be small, allowing the user to enter their Email address and click a "Subscribe" button to subscribe to the store's newsletter.  The form should only allow properly formatted email addresses to be submitted.  Style the form with CSS so it looks nice and is easy to use.  Place it in the right-hand side of the footer.


Your form should https://formspree.io/ to automatically submit the form to your email address (i.e., when a user fills out their email address and clicks Subscribe, *you* should get that information sent to your email address via formspree.io).

 
NOTE: make sure you setup your account on https://formspree.io/ first.

 
1.2 Contact Email Form 

 
Modify your index.html page to include a new link at the top to a “Contact Us” page, which links the user to a new contact.html page.  The contact.html page allows the user to contact you for additional information.

 

Make your contact.html page look similar to your index.html page.  It should use the same fonts, colours, general layout, header, footer, etc.  Users should feel like they are on the same site when they move between index.html and contact.html.  Also, make sure there is a way to get back to index.html from your contact.html page (i.e., include a link).

 

Include an HTML Form for the user to fill out their information along with a message to you. Your form should include the following, and all fields should be mandatory unless otherwise noted, and use the most appropriate <input> type:

 

-  Name

-  Email Address

-  Address

-  City (use a <datalist> for autocomplete of common Canadian cities)

-  Postal Code (must be a valid Canadian Postal Code, with or without a space, use a regex pattern)

-  Radio Options to specify what this is about: one of "Question", "Comment", or "Order Problem". If the user selects "Order Problem", dynamically reveal (with JavaScript) another input box to enter the order number. In the case of "Comment" or "Question" hide this input box.

-  A large text area to enter the message that they want to send

-  A hidden input field with your name

 

The form should submit to https://httpbin.org/post using the POST method, and only allow the user to submit when all data has been entered and there aren't any validation errors.  The data posted to httpbin.org should include all data defined in the form above (e.g., visible and hidden fields).

 

Part 2. Static Hosting

You are asked to research and implement a static hosting solution for your store. Your final assignment, including your responsive design, should be accessible via a public URL. You do not need to spend any money to achieve this, since many free hosting services exist:  

1.      Netlify - https://www.netlify.com/  

2.      Vercel https://vercel.com/  

3.      GitHub Pages - https://pages.github.com/  

4.      Firebase - https://firebase.google.com/docs/hosting  

If you would like to consider registering a Custom Domain Name, that is also something that you could do. See more info at https://www.cira.ca/ca-domains/register-your-ca. This is optional, and not required, but good experience for all web developers.  

Please submit the public URL for your project. All pages, images, etc. must work and not return 404s or other errors.  

Part 3. Reflection Paper   
You are asked to write a reflection paper that is 300 words in length. In your reflection, please address all of the following:  

•       Explain some of the main features of HTML Forms and Input elements you used to help make sure the user’s input was valid for your forms. 

•       How did you test that your forms were working, and did this testing find any bugs in your implementation?  How did you address these? 

•       What advice would you give to other web developers building forms for their pages based on your own experience?  What lessons did you learn?  

Your reflection paper should be free of typos and grammatical/spelling errors, and use full sentences and paragraphs. If you quote or reference any resources online, make sure you include proper citations. Your reflection must also be your own work. You may not collaborate or copy material from other sources or students.