London | 26-ITP- Sept | Chandramani Gaire | Sprint 1 | Forms Controls - #1507

Good structure, with a label on every field and a submit button. Things to sort before it can be marked Complete:

1. Name validation rejects valid names. On the deploy preview, type Al or Är as the name and submit. Both are refused, and the task says two non-space characters is enough. See line 20.
2. 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.
3. 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.
4. Formatting. Once line 56 is fixed, run npx prettier --write Form-Controls from the repo root and push.

Add the Needs Review label again once you've pushed.

The name check, both dropdowns and the stray div are all fixed, and the validator is clean. One thing left before I mark this Complete: the formatting check, which was point 4 last time.

"My code is consistently formatted" is on the README checklist, and the tool that does it for you is called Prettier. It rearranges spacing and indentation to one agreed style, so that your code is easy to read and so that a reviewer only sees the changes you meant to make, not stray spaces and tabs. At the moment index.html fails that check; the indentation wanders between lines 16 and 58.

Prettier comes with the CYF extension pack you were asked to install during onboarding. If you're not sure you have it, open VS Code, go to Extensions, and search for CodeYourFuture Extension Pack; install it if it isn't there: https://marketplace.visualstudio.com/items?itemName=CodeYourFuture.cyf-extension-pack

Then open index.html, right click in the editor, choose Format Document, and pick Prettier if VS Code asks which formatter to use. Save, commit the changes it makes, and push. The starter comment on line 62 can go in the same commit. To make this happen automatically every time you save, follow the format on save steps here: https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md

Thanks for sorting the label. Same again once you've pushed: add Needs Review and I'll pick it up.

Only one blank line changed in that push, so the formatting hasn't happened yet: Prettier still fails on index.html and the starter comment on line 61 is still there.

A quick way to tell whether it worked: after Format Document, the <input> on line 20 should be spread over several lines, one attribute per line, and every line inside <form> should sit two spaces further in than the one containing it. If nothing changes when you right click and choose Format Document, VS Code hasn't got Prettier: go to Extensions, search for CodeYourFuture Extension Pack, install it, then try again. If it asks which formatter to use, pick Prettier.

Save, check the file looks different, commit, push, and add Needs Review again.

final one

The file is formatted now, you can see the difference in the input on lines 20 to 27 with one attribute per line. Good.

One thing left, and it's the third time of asking: the starter comment <!-- change to your name--> on line 75. It was an instruction to you, you've followed it, so delete the line. Then push, add Needs Review, and I'll mark this Complete.

change the line 75

Everything on the list done. Marking this Complete. Well done.