London | 26-ITP-SEP | Sakiya Mayow | Sprint 1 | Form Controls by zakiaao-tech · Pull Request #1500 · CodeYourFuture/Module-JavaScript-Fundamentals

zakiaao-tech · 2026-09-11T19:48:22Z

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

CYF-1004

Changelist

I have added the required name and email fields with validation.
I added 3 colour options.
I added 6 T-shirt sizes: XS, S, M, L, XL, XXL.

Questions

I did not use Javascript, will it be okay or do I have to redo it?
Also I am unsure if the lighthouse inspection worked or not.

netlify · 2026-09-11T19:48:29Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`f95b8bd`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6aa81feff1dac40008a175a0
😎 Deploy Preview	https://deploy-preview-1500--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: 84 (🔴 down 2 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.

abdishakoor-dev

You have few things that need attention. Things to sort before it can be marked Complete:

Name validation. The task asks for one name field that must contain at least two non-space characters, using the regex the README gives you. At the moment two spaces get through. See line 20.
Forms shouldn't have multiple submit buttons. Only a single submit button. The idea is that once the form is filled in, the submit button is clicked. You have four at the moment, one for each field. See line 23.
The validator reports 7 errors: a legend outside a fieldset, ids and names with spaces in them, a missing space between attributes on line 28, and the regex sitting on its own as an attribute. Run the file through https://validator.w3.org/ and work through them.
Formatting. Prettier fails on this file and the indentation drifts further right as it goes. Run npx prettier --write Form-Controls from the repo root.
The footer still says HOMEWORK SOLUTION, line 76.

You asked two things in the description.

No JavaScript is needed, the task is HTML and CSS only.

To run Lighthouse yourself in Chrome: open the page that contains your form, right click and choose Inspect, click the Lighthouse tab at the top of DevTools (if you can't see it, click the >> arrows), tick Accessibility, then click Analyze page load. The score and any failing checks appear in the panel. Also, every PR here gets a deploy preview and Lighthouse runs on it automatically. Scroll up to the netlify bot comment on this PR and you'll see your scores there, including Accessibility 100.

One thing for next time: this PR is opened from your main branch. Make a branch for each task (feature/form-controls) and open the PR from that, so main stays clean.

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

abdishakoor-dev · 2026-09-14T11:45:16Z

+         <div>
+          <legend>Customer details</legend>
+            <label for="firstname">First name:</label>
+             <input type="text" id="firstname" name="firstname" required .*\S.*\S.*> <br>


The regex from the README is sitting here as an attribute on its own, so the browser ignores it. Which attribute is it meant to be the value of? I typed two spaces into this field on the deploy preview and it passed. Also the task asks for one name field, not first and last.

One name field now, good. The regex is still a bare attribute though, so this one is still open. See the new comment on line 23.

Fixed now, and two spaces are rejected. Good.

abdishakoor-dev · 2026-09-14T11:45:16Z

+             <input type="text" id="firstname" name="firstname" required .*\S.*\S.*> <br>
+              <label for="lastname">Last name:</label>
+               <input type="text" id="lastname" name="lastname" required>
+               <button type="Submit">Submit</button>


There are four Submit buttons in this form, and one of them is inside the <select>. A form needs one. Where should it go?

abdishakoor-dev · 2026-09-14T11:45:17Z

      <form>
        <!-- write your html here-->
+         <div>
+          <legend>Customer details</legend>


<legend> is only valid inside one particular element, and it isn't <div>. Which element groups a set of fields and takes a legend? The MDN page from the prep on structuring a form shows it.

abdishakoor-dev · 2026-09-14T11:45:17Z

+
+        <div>
+          <label for="T-shirt colour">Select one T-shirt colour:</label>
+           <select name="T-shirt colour" id="T-shirt colour" required>


An id can't contain spaces, and a name shouldn't either. Try submitting the form and look at what appears in the address bar for this field.

Ids and names fixed. The for on the labels wasn't updated to match, so they've come apart. See the comment on line 34.

Matching now. Good.

abdishakoor-dev · 2026-09-14T11:45:17Z

+
+          <div>
+            <label for="email"> Email:</label>
+            <input type="email"name="email" id="email" required>


Missing space between type="email" and name="email". The formatter will fix this one.

I received all your feedback and I have completed the corrections, and I will definitely create branch next time. Thank you !

abdishakoor-dev

Good progress: one name field, one submit button, ids without spaces, the footer, and the file is formatted. Two things still outstanding:

The regex is still sitting on its own on line 23, so the browser ignores it and two spaces still pass as a name. It needs to be the value of an attribute. The README tip says which one.
When you removed the spaces from the ids on lines 35 and 45 the for on the labels above them (lines 34 and 44) kept the old spelling, so the labels no longer point at anything and the two dropdowns have lost their labels. The HTML validator (https://validator.w3.org/) reports both.

Add the Needs Review label again once you've pushed and I'll mark it Complete.

abdishakoor-dev · 2026-09-14T14:46:18Z

+            id="fullname"
+            name="Fullname"
+            required
+            .*\S.*\S.*


Still on its own here. Look at how required on the line above is written, and how type="text" is written. The regex needs to be written the same way, as the value of the attribute the README tip names.

abdishakoor-dev · 2026-09-14T14:46:18Z

+        </div>
+
+        <div>
+          <label for="T-shirt colour">Select one T-shirt colour:</label>


for="T-shirt colour" but the select below is now id="T-shirt-colour". They have to match exactly. Same on line 44.

… pattern

zakiaao-tech · 2026-09-14T15:33:42Z

Thank you Abdi for pointing it out, I have learned from my mistakes, and I think I got it this time if not please let me know.

abdishakoor-dev

You've got it. The regex is in the pattern attribute and does its job, the labels point at their dropdowns again, and the validator is clean. Marking this Complete.

Two small things for next time, not needed here. Prettier flags the file again: the /> endings it wrote earlier have gone. If that wasn't you, VS Code may have a second formatter running that undoes Prettier's work. Check that Prettier is the default formatter and that format on save uses it, as in https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md, then run it once more. And in the README checklist, [x ] with a space inside the brackets doesn't render as ticked, it needs to be [x].

zakiaao-tech · 2026-09-14T16:30:19Z

All done!

zakiaao-tech added 3 commits September 11, 2026 17:41

Initial commit

a9b5770

Added name and email validation to form in index.html

5c1e178

Added colour, size for validation to form in index.html

f9437e6

zakiaao-tech added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 11, 2026

abdishakoor-dev reviewed Sep 14, 2026

View reviewed changes

abdishakoor-dev added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Sep 14, 2026

zakiaao-tech added 5 commits September 14, 2026 13:26

Changed label and removed Last name and <legend>

6a476a1

Removed submit button from email

7db0e90

Removed spaces in id and name

54ded4f

left one submit button at the end and removed unnecessary spaces

98961ad

Ran prettier to format document

43145a0

zakiaao-tech added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 14, 2026

abdishakoor-dev reviewed Sep 14, 2026

View reviewed changes

abdishakoor-dev removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 14, 2026

zakiaao-tech added 3 commits September 14, 2026 16:15

Removed trailing slash on br and regex, added =" to regex as required…

0dff25d

… pattern

Made sure that the for on the labels is matching

39bfc0d

cleaned up

9e4795c

zakiaao-tech added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 14, 2026

abdishakoor-dev reviewed Sep 14, 2026

View reviewed changes

Fixed / > endings and x ticking boxes in README checklist

f95b8bd

Uh oh!

Uh oh!

Conversation

zakiaao-tech commented Sep 11, 2026

Learners, PR Template

Task code

Changelist

Questions

Uh oh!

netlify Bot commented Sep 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cyf-onboarding-module ready!

Uh oh!

abdishakoor-dev left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abdishakoor-dev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zakiaao-tech commented Sep 14, 2026

Uh oh!

abdishakoor-dev left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zakiaao-tech commented Sep 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented Sep 11, 2026 •

edited

Loading

abdishakoor-dev left a comment •

edited

Loading

abdishakoor-dev left a comment •

edited

Loading