North west | 26-ITP-Sept | Brian Yorachi | Sprint 1 | Form controls by BrianY315 · Pull Request #1516 · CodeYourFuture/Module-JavaScript-Fundamentals

BrianY315 · 2026-09-13T16:52:51Z

Self checklist

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

Task Code
CYF-1004

Changelist

I created an HTML form for ordering a T-shirt. It collects the following data: customer's name, email, t-shirt colour and size.

Summary

This PR implements the T-shirt order form with the required fields and validation.

netlify · 2026-09-13T16:52:57Z

✅ Deploy Preview for cyf-onboarding-module ready!

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

valentina-starr1 · 2026-09-14T19:50:57Z

Great work on this,

The form implementation looks solid and addresses all requirements:

Correct input fields and semantic structure (Name, Email, Colour, Size).

Proper regex validation (.\S.\S.*) ensuring at least two non-space characters for the name.

Complete size dropdown list with all 6 required options (XS through XXL).

Strong accessibility setup with linked labels (for) and aria-describedby helper text.

This PR is approved and ready to merge.

BrianY315 · 2026-09-15T10:17:53Z

@valentina-starr1

I am having trouble doing a merge on this PR. I cannot see the merge button as I passed all criteria? any guidance would be welcome.

cjyuan · 2026-09-17T15:28:38Z

Your PR description is not yet formatted correctly. Could you refer to some of these completed PRs to see how the PR description should look like, and then update your PR description accordingly?

To learn more about Markdown, see

Basic writing and formatting syntax -- Just learn the syntax of "headings" for now. You can explore the rest when you have time later.
Tasklist (Checkboxes)

In ITP, the PR will only be reviewed; it won't be merged into CYF's repo.

cjyuan

Code is well formatted and free of syntax error. Well done.

Could you address the inline comments?

Suggestion: Use AI to explore "How to address inline comments in a PR?" and then practice what you learn in this PR.

cjyuan · 2026-09-17T15:30:43Z

You were supposed to implement the form in index.html.

index.html is the correct file for the T-shirt form task.

cjyuan · 2026-09-17T15:31:32Z

+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background: #f7f7f7;
+      padding: 40px;
+      line-height: 1.6;
+    }


Could you move the internal CSS to an external fie? It is best practice to separate CSS from HTML.

Thanks for the review. I’ve updated the form and moved the CSS into a separate stylesheet as requested. I also kept the naming consistent across the form fields.

cjyuan · 2026-09-17T15:38:10Z

+      id="customer-name" 
+      name="customer-name" 
+      required 
+      pattern=".*\S.*\S.*"
+      aria-describedby="nameHelp"
+    >
+    <small id="nameHelp">Name must contain at least two non‑space characters.</small> 


customer-name - This naming convention is called kebab-case.

nameHelp - This naming convention is called camelCase.

It's best practice to use a consistent naming convention throughout.

I’ve updated the form field names to use a consistent naming convention throughout the page, using kebab-case for the form IDs and names to keep them clear and consistent.

cjyuan

Code looks good.

Note:
The PR description is not yet in the right format -- You should keep the original self-checklist and maintain the order of Self-checklist, Task-Code, and Changelist sections.

Have you watched this How To Submit Coursework at CodeYourFuture video before? At 7:25 mark, the video shows how to prepare the PR Description.

You don't need to change this PR description; you can practice it in future PRs.

cjyuan · 2026-09-18T13:38:44Z

The code had been moved to index.html. If this file is no longer needed, you should remove it from this PR branch to keep the branch clean.

cjyuan · 2026-09-18T13:43:36Z

+            <label class="option" for="tshirt-colour-red">
+              <input id="tshirt-colour-red" name="tshirt-colour" type="radio" value="red" required />
+              <span>Red</span>
+            </label>
+
+            <label class="option" for="tshirt-colour-blue">
+              <input id="tshirt-colour-blue" name="tshirt-colour" type="radio" value="blue" />
+              <span>Blue</span>
+            </label>
+
+            <label class="option" for="tshirt-colour-black">
+              <input id="tshirt-colour-black" name="tshirt-colour" type="radio" value="black" />
+              <span>Black</span>
+            </label>


Do you know why the for and id attributes on lines 43-56 are optional?

I removed the redundant for and matching id attributes where the label already wraps the control, and committed the change. for + id are useful when the label and input are separate elements, since this is not the case I have removed them as they are already paired.

BrianY315 added 4 commits September 13, 2026 15:00

Add basic html structure

57ce907

Add_form_fields

028d352

Add email and colour label

165edc5

add size options and submit button

ccf9091

This comment has been minimized.

Sign in to view

Liam310 added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Sep 14, 2026

cjyuan reviewed Sep 17, 2026

View reviewed changes

cjyuan 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 17, 2026

BrianY315 added 2 commits September 18, 2026 13:28

Add T-shirt order form and external stylesheet

4ec919d

Use consistent kebab-case form field names

5d2e6f6

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

cjyuan reviewed Sep 18, 2026

View reviewed changes

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 18, 2026

BrianY315 added 2 commits September 18, 2026 18:00

Remove duplicate form file

a6075cd

Simplify form labels

b4b6f2f

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

Uh oh!

Conversation

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

Uh oh!

Summary

Uh oh!

netlify Bot commented Sep 13, 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!

This comment has been minimized.

valentina-starr1 commented Sep 14, 2026

Uh oh!

BrianY315 commented Sep 15, 2026

Uh oh!

cjyuan commented Sep 17, 2026

Uh oh!

cjyuan 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!

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!

cjyuan 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!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

BrianY315 commented Sep 13, 2026 •

edited

Loading

netlify Bot commented Sep 13, 2026 •

edited

Loading