London | 26-ITP- Sept | Chandramani Gaire | Sprint 1 | Forms Controls - #1507
gaireprakash20-ops wants to merge 11 commits into
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
gaireprakash20-ops
added
Needs Review
There was a problem hiding this comment.
Good structure, with a label on every field and a submit button. Things to sort before it can be marked Complete:
- Name validation rejects valid names. On the deploy preview, type
AlorÄras the name and submit. Both are refused, and the task says two non-space characters is enough. See line 20. - Reload the page and press Submit without touching either dropdown. It goes through with Grey and XS, which the customer never chose. The task says all fields are required. See line 31.
- There's a stray
</div>on line 56. It's the one error the HTML validator from the README checklist (https://validator.w3.org/) reports, and Prettier can't parse the file because of it. - Formatting. Once line 56 is fixed, run
npx prettier --write Form-Controlsfrom the repo root and push.
Add the Needs Review label again once you've pushed.
| <!-- 1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.--> | ||
| <div> | ||
| <label for="name">Name</label> | ||
| <input type="text" id="name" placeholder="Chandrmani Gaire" pattern=".*\S.*\S." required> |
There was a problem hiding this comment.
Compare this pattern with the one in the README character by character. The last part is different. What does a . on its own match, and how many characters does it require after the second non-space one?
There was a problem hiding this comment.
type name=.\S.\S.* here
| <div> | ||
| <!--What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? --> | ||
| <label for="coloroption">Color option</label> | ||
| <select id="coloroption" name="Color"> |
There was a problem hiding this comment.
This select has no required, and because the first option is a real colour it's already "chosen" when the page loads. What would you add so the customer has to make a choice? Same for the size select on line 42. The MDN form validation page from the prep covers this.
| <input id="submit" type="submit"> | ||
| </div> | ||
| <br> | ||
| </div> |
There was a problem hiding this comment.
Which <div> is this closing? Count the opening and closing divs above it.
| <br> | ||
| <div> | ||
| <label for="email">Email</label> | ||
| <input type="email" placeholder="chandramani@gmail.com" id="email" required> |
There was a problem hiding this comment.
The two selects have a name attribute but the name and email inputs don't. What does name do when a form is submitted? Try submitting and look at the address bar.
There was a problem hiding this comment.
change the name="email"
| <footer> | ||
| <!-- change to your name--> | ||
| <p>By HOMEWORK SOLUTION</p> | ||
| <p> By Chandramani Gaire</p> |
There was a problem hiding this comment.
Extra spaces before "By" and between your first and last name, and the starter comment on line 63 can go now.
abdishakoor-dev
added
Reviewed
|
A new user left a comment. This user must be approved by a Netlify team owner before comments can be displayed. |
1 similar comment
|
A new user left a comment. This user must be approved by a Netlify team owner before comments can be displayed. |
2 participants
Learners, PR Template
Self checklist
Task code
CYF-1004
Changelist
I changed the HTML and made it according to the task requirements, as per the CYF assignment.