|
1 | | -<!-- <objectives> |
2 | | -
|
3 | | -- [x] Interpret requirements and check against a list of criteria |
4 | | -- [x] Write a valid form |
5 | | -- [ ] Test with Devtools |
6 | | -- [ ] Refactor using Devtools |
7 | | -- [x] Use version control by committing often and pushing regularly to GitHub |
8 | | -- [x] Develop the habit of writing clean, well-structured, and error-free code |
9 | | -{{<objectives>}}>--> |
10 | | - |
11 | | -<!-- |
12 | | - [x] I have only used HTML and CSS. |
13 | | -[x] I have not used any JavaScript. |
14 | | -
|
15 | | - HTML |
16 | | -
|
17 | | -- [] My form is semantic HTML. |
18 | | -- [x] All inputs have associated labels. |
19 | | -- [ ] My Lighthouse Accessibility score is 100. |
20 | | -- [x] I require a valid name. |
21 | | -- [x] I require a valid email. |
22 | | -- [x] I require one colour from a defined set of 3 colours. |
23 | | -- [x] I require one size from a defined set of 6 sizes. |
24 | | -
|
25 | | -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ |
26 | | -- [] My code is consistently formatted |
27 | | -- [x] My page content is free of typos and grammatical mistakes |
28 | | -- [x] I commit often and push regularly to GitHub |
29 | | ---> |
30 | | - |
31 | 1 | <!doctype html> |
32 | 2 | <html lang="en"> |
33 | 3 | <head> |
|
38 | 8 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
39 | 9 | </head> |
40 | 10 | <body> |
| 11 | + <!-- <objectives> |
| 12 | +-[x] Interpret requirements and check against a list of criteria |
| 13 | +-[x] Write a valid form |
| 14 | +-[x] Test with Devtools |
| 15 | +-[x] Refactor using Devtools |
| 16 | +-[x] Use version control by committing often and pushing regularly to GitHub |
| 17 | +-[x] Develop the habit of writing clean, well-structured, and error-free code |
| 18 | +{{<objectives>}}>--> |
| 19 | + |
| 20 | + <!-- |
| 21 | + HTML |
| 22 | +- [x] I have only used HTML and CSS. |
| 23 | +- [x] I have not used any JavaScript. |
| 24 | +- [x] My form is semantic HTML. |
| 25 | +- [x] All inputs have associated labels. |
| 26 | +- [x] My Lighthouse Accessibility score is 100. |
| 27 | +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ |
| 28 | +- [x] My code is consistently formatted |
| 29 | +- [x] My page content is free of typos and grammatical mistakes |
| 30 | +- [x] I commit often and push regularly to GitHub |
| 31 | +--> |
41 | 32 | <header> |
42 | 33 | <h1>Product Pick</h1> |
43 | 34 | </header> |
44 | 35 | <main> |
45 | 36 | <form> |
46 | | - <!-- write your html here--> |
47 | 37 | <!-- |
48 | | - [x] customers name = requires at least two non space characters. |
49 | | - [x] customer email = requires a consistent pattern |
50 | | - [x] t-shirt color = required to choose from only 3 options! |
51 | | - [ ]t-shirt size = required to choose from only 6 sizes! |
52 | | -
|
53 | | - this will also help you fill in your PR message later--> |
| 38 | + [x] Customers name = requires at least two non space characters. |
| 39 | + [x] Customer email = requires a consistent pattern |
| 40 | + [x] T-shirt color = required to choose from only 3 options! |
| 41 | + [x] T-shirt size = required to choose from only 6 sizes! --> |
54 | 42 | <div> |
55 | 43 | <label for="name">Full name: </label> |
56 | 44 | <input id="name" name="name" required pattern=".*\S.*\S.*" /> |
|
0 commit comments