Assessment 2: Create a form using a table layout Solution

Due: see the course outline for a specific date




In assignment 1, you created a newsletter for a local restaurant called “Joan’s Tacos”. The owners liked your work, and now they have a new project. They want you to create a customer feedback form, and their designer team provide you with this design:
















Header

section























































Middle

Section




















































Footer Section




Figure 1







Page 1 of 6



Requirement (Client requirement)




You must use the table CSS layout; not the <table tag. If you use the <table, your work will be considered as an unacceptable work, and you will be graded with zero.



All items must be in the same order and have the same style as shown in figure 2.



First, last name, Email, and message are required fields.



All text fields must be validated. Use the pattern attribute and attach these regular expressions to each filed:



First, last name: [a-zA-Z0-9]+



Email: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/



Telephone: \d{3}[\-]\d{3}[\-]\d{4}



Zip Code: /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/



Apply access keys for each label using the first letter from each text field name. For example, for Email, the access key should be the first letter ‘E’.



Users are only allowed to upload fills type of ‘.png’.



An active or focus text filed must have a green border (Tip: use ‘: focus’). The focus style should be as follows: 1. Border color is #0C0. 2. Border size is 1 px. 3. Border style/type is solid.



The default value for the ‘what was your order?’ is Taco.



The default value for the ‘How was your experience?’ is Good.



Bounce requirements (+1 point):



Change the ‘submit’ button background color when the mouse goes over it. To do that, use



‘:hover’ class and set it background-color to #4CAF50 and font color to #fff.































b. Use label elements to name all form elements. Use <label for=”” to create a label, then attached it to a form element such as input or box list.































Page 2 of 6




Design details:




































































































































































































Page 3 of 6




Submit (Only submit a single .zip file)




Name your folder feedback_project.
Right-click on the folder and choose ‘Send to’ - ‘Compressed (zipped) folder’.
Upload the zipped folder to the Assignment 2 Dropbox












Instructions (optional)




With using the instructions steps from assignment 1 (refer to assignment 1 document). I would recommend approaching this project using these steps:




First, think of how to fit all the design elements (e.g. checkbox) into table elements (e.g. table-row, col…etc.). You can draw a table over the provide design (I attached full size of the design at the end of this document). Draw the table header, rows, and cols and defined the sizes of the cols and rows.



Second, define elements with similar style and group them under CSS selectors. Also, define which cells need to be merged.



By now, you should be able to position contents on the layout. Create the content to fit its position on the layout. In the case of the table layout, the position can be a whole row or cell. I would recommend using percentage values to set the width for cells, rows, and cols.



Apply all styles and keep fixing it until you get a similar result as the required design.



Finally, apply the nonessentials style such as access keys, default values, focus style for text files...etc.












































































































Page 4 of 6

Evaluation




This assessment is graded out of 25 points and will be evaluated using the following rubric.




Learners may receive partial scores or zero for unacceptable work.



Complete % of the requirements














Marking Component
At least
At least
At least
Score




30%
60%
90%




Page layout is structured and organized
1
2
3




The right font applied to all the page
0.5
1
2




The right color for background and font applied
0.5
1
2




The code compiles with no errors
1
2
3




All page items are in the right position
1
2
3




Page styled with an external style sheet.
0.5
1
2




Access keys are applied
0.5
1
2




Default values are applied
0.5
1
2




Required fields are applied
0.5
1
2




Text fields are validated
0.5
1
2




Code comments are used and clear
0.5
1
2










Final
/25
































Tips: tags and CSS properties you may need to use. Feel free to use any tag is not listed below:




Tags
Attributes
Value


CSS
CSS Values
-
from
-
type
- radio


- :focus
- table
-
input
-
name
- checkbox


- :valid
- table-row
-
button
-
checked
- text


- :invalid
- table-cell
-
hr
-
value
- button


- :required








-
select
-
selected




- Display


-
option








-
pleaceholder








-
optgroup








-
for








-
textarea








-
id








-
label








-
file
























-
accept












-
required












-
novalidate












-
pattern












-
title












-
accesskey



























To learn more about any tag, search W3C website.

https://www.w3schools.com/tags/

To learn more about any CSS property, search W3C website:

https://www.w3schools.com/cssref/






















Page 5 of 6










































































































































































































Page 6 of 6