London | 26-ITP-Sep | Rawan Almutairi | Sprint 1| FormControls

[Rawan0-0]

Learners, PR Template

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Task code

(e.g. CYF-1004).

Changelist

Sprint 1 work

Questions

no questions.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	e782c04
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6ac50f37cf56d700082f8036
😎 Deploy Preview	https://deploy-preview-1627--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	2 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (🔴 down 4 from production) PWA: - View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Rawan0-0]

Thanks, Rawan. A few things need fixing before this is Complete. Your colour radios are good: one name, a label each, and required.

1. Put every field and the Submit button in one form (index.html line 68).
2. The name must have two non-space characters (line 19).
3. The size must be one of the six sizes only (line 42).
4. Give the name and email boxes a label (lines 18 and 62).
5. Fix the 11 errors from https://validator.w3.org/ on index.html.
6. Close the body block in style.css (line 1). Then format the files you changed with Prettier. Format on save steps: https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md
7. Put your name in the footer (line 74).
8. Add the task code CYF-1004 to your PR description.

Add the Needs Review label again when you have pushed, and I'll take another look.

Thank you so much for the comprehensive feedback; it's really helpful.

[abdishakoor-dev]

The form works properly now: every field is in one form, two spaces no longer pass as a name, and the sizes are radios like the colours. The validator is clean too. Four things left before I can mark it Complete:

1. The name box still has no label (index.html line 18).
2. Lighthouse Accessibility is 97 on your latest deploy, and it needs to be 100. The failing check is the heading colour (style.css line 12).
3. The footer shows your GitHub username. It should show your name, as in your PR title (line 75).
4. Both files still fail Prettier. Open each file in VS Code, right click in the editor, choose Format Document, and pick Prettier if VS Code asks. Then turn on format on save so it happens every time: https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md

Add the Needs Review label again when you have pushed, and I'll take another look.

[abdishakoor-dev]

This comment talks about a datalist, but you replaced it with radios. Is it still true? The comment on line 67 about a style tag has the same problem. Not blocking, but stale comments confuse the next reader.

[abdishakoor-dev]

Lighthouse fails this heading on colour contrast. The text is dark grey at 27% opacity on a cream background, so it is very faint. Open Lighthouse on your page and read the contrast check. What colour would pass?

[abdishakoor-dev]

Fixed. Lighthouse shows 100 now.

[abdishakoor-dev]

All fixed, marking this as complete, well done.