London | 26-ITP-SEP | Abdennour Hachemi | Sprint 1 | form-controls by AbdennourHachemi · Pull Request #1503 · CodeYourFuture/Module-JavaScript-Fundamentals

AbdennourHachemi · 2026-09-11T22:21:21Z

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

A solution to the T-shirt order form using HTML , i have added an external css file , had to close to first pull request since there were some accessiblity issues, I was confused on how to do the PR , but the instructions and searching the net was helpful.

… to allow single selection

netlify · 2026-09-11T22:21:26Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`d62854f`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6aa9642460c595000863861d
😎 Deploy Preview	https://deploy-preview-1503--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: 90 (🟢 up 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.

abdishakoor-dev

Good start, and the coloured squares behind the colour options are a nice touch. Things to sort before it can be marked Complete:

No submit button, so the form can't be submitted and none of the validation ever runs. See line 90.
An empty name goes through. The pattern is right, so something else is missing. See line 20.
The form goes through without a size. See line 55.
A stray full stop on line 50 shows up on the page, and the HTML validator from the README checklist (https://validator.w3.org/) reports one error, on line 39.
Formatting. Prettier fails on both files. Run npx prettier --write Form-Controls from the repo root and push.

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

abdishakoor-dev · 2026-09-14T13:38:21Z

+					</div>
+				</div>
+			</div>
+		</form>


The form closes here with no submit button. Open the deploy preview and try to send the form. What's missing, and what does the browser do with required and pattern until it's there?

abdishakoor-dev · 2026-09-14T13:38:21Z

+	<main>
+		<form>
+			<div id="fn"><label for="fname">Please Enter your First name:</label>
+				<input type="text" id="fname" name="fname" pattern=".*\S.*\S.*"> <br>


The pattern attribute is right and does what the README asks. Once you've added a submit button, leave the name empty and submit. It goes through. What have you put on the email field on line 26 that this field doesn't have? Also, the task asks for one name field, not first and last.

One field now, and required. Done.

abdishakoor-dev · 2026-09-14T13:38:21Z

+					<div class="sizeOption">
+						<label for="xs">XS</label>
+						<div>
+							<input type="radio" name="size" value="xs" id="xs">


Pick no size and submit: the form goes through. You've already solved this for colour on line 45. What's different about these six?

abdishakoor-dev · 2026-09-14T13:38:21Z

+				<input type="email" id="email" name="email" required><br>
+			</div>
+			<div class="colorSelection">
+				<label>Please pick a color:</label> <br>


This label isn't attached to any control, it's just acting as a heading for the group. Which element does the MDN page from the prep use to group a set of radio buttons and give them a caption? Same for line 50.

Still open. The <label for="colorOption"> you added points at nothing, see the comment on line 35. The element you're after wraps the whole group.

Marking Complete anyway, but the answer is fieldset and legend, see the main comment.

abdishakoor-dev · 2026-09-14T13:38:21Z

+				</div>
+			</div>
+			<div id="sizediv">
+				<label>Please select the t-shirt size:</label> <br> .


There's a stray . after the <br> here and it shows on the page.

abdishakoor-dev · 2026-09-14T13:38:21Z

+				<div class="colorOption">
+					<label for="greenOption">Green</label>
+					<div class="square" id="greenOptions">
+						<input type="radio" name="color" id="greenOption"value="green">


Missing space between id="greenOption" and value="green". This is the one error the HTML validator (https://validator.w3.org/, from the README checklist) reports. The formatter will fix it.

AbdennourHachemi · 2026-09-15T10:33:26Z

Thanks Abdi for reviewing the code, i have gone through all the remarks and fixed what need to be fixed.

abdishakoor-dev

Most of the list is done, thanks. Two things left before I can mark this Complete:

The captions for the two radio groups. <label for="colorOption"> on line 35 and <label for="sizeOption"> on line 62 point at ids that don't exist, so the HTML validator (https://validator.w3.org/) reports both, and a label can only ever label one control anyway. This is the same question as before: which element groups a set of radios and gives the group a caption? The MDN page from the prep on structuring a form shows it, and it's the one thing on the original list still open.
The footer text is now an <h5>. The validator flags it: the page jumps from <h1> straight to <h5>. Is "By Abdennour Hachemi" a heading? Look at what the starter file used there.

One small thing, not a blocker: styles.css isn't quite in Prettier's style any more, lines 41 to 43 and 50 have drifted. Either something changed after formatting, or a second formatter in VS Code is undoing Prettier's work on save. Run Format Document on it once more as the last step before you commit; if it drifts again, check Prettier is set as the default formatter.

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

abdishakoor-dev · 2026-09-15T11:24:18Z

+          <input type="email" id="email" required /><br />
+        </div>
+        <div class="colorSelection">
+          <label for="colorOption">Please pick a color:</label> <br />


There's no element with id="colorOption", so this label labels nothing, and the same on line 62. A <label> attaches to one control. For a group of radios you want the element that wraps the group and takes a caption. What is it called?

AbdennourHachemi · 2026-09-15T15:32:53Z

Hi Abdi, hopefully this time is sorted , Thanks for your help.

abdishakoor-dev

Footer fixed and the validator is clean, so this is Complete. Thanks for sticking with it.

Two things for next time rather than for this PR. First, the element I was pointing at for the radio groups is <fieldset> with a <legend> inside it: the fieldset wraps the group and the legend is its caption, which is what connects "Please pick a color" to the three radios for a screen reader. A <p> shows the text but doesn't make that connection. The MDN page on structuring a form has an example. Second, Prettier still flags index.html for a few blank lines with spaces in them and a <meta charset="utf-8" > on line 4; run Format Document once more as the last step before committing.

AbdennourHachemi added 5 commits September 9, 2026 00:14

start working on form

30d9e25

adding CSS file and updating the index.html file

e05cec1

corecting typos and making adding attribute name to size radio button…

cd10040

… to allow single selection

formatting html file

4ac2403

fixed some accessiblity issues

b0acd57

AbdennourHachemi 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

AbdennourHachemi added 6 commits September 14, 2026 16:58

update files

bba3065

update files

5923885

fixing issues raised in the PR review

e64b174

testing

57d7ed9

updating css file

8161e1b

Remove broken submodule

8a13945

AbdennourHachemi added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 15, 2026

abdishakoor-dev reviewed Sep 15, 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 15, 2026

Fixing latest issues

d62854f

AbdennourHachemi added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 15, 2026

abdishakoor-dev reviewed Sep 15, 2026

View reviewed changes

Uh oh!

Conversation

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

Uh oh!

Task code

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!

abdishakoor-dev Sep 14, 2026 • 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!

abdishakoor-dev Sep 14, 2026 • 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!

AbdennourHachemi commented Sep 15, 2026

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!

Uh oh!

AbdennourHachemi commented Sep 15, 2026

Uh oh!

abdishakoor-dev left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AbdennourHachemi commented Sep 11, 2026 •

edited

Loading

netlify Bot commented Sep 11, 2026 •

edited

Loading

abdishakoor-dev left a comment •

edited

Loading

abdishakoor-dev Sep 14, 2026 •

edited

Loading

abdishakoor-dev Sep 14, 2026 •

edited

Loading