Skip to content

Glasgow | ITP-MAY-2026 | Tuan Nguyen | Sprint 1 | Form control#1214

Open
Jacknguyen4438 wants to merge 16 commits into
CodeYourFuture:mainfrom
Jacknguyen4438:Form-control-work
Open

Glasgow | ITP-MAY-2026 | Tuan Nguyen | Sprint 1 | Form control#1214
Jacknguyen4438 wants to merge 16 commits into
CodeYourFuture:mainfrom
Jacknguyen4438:Form-control-work

Conversation

@Jacknguyen4438
Copy link
Copy Markdown

@Jacknguyen4438 Jacknguyen4438 commented May 3, 2026

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

Changelist

Hello and thank you for your time reading this PR, this one is a resubmission of this course work that I have finished doing Jan ITP and I would like to submit again for review here is the link of the old PR #1103 . If change need to make please let know.

Questions

No questions.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 3, 2026

Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit 3692bcb
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/69f9c021fe13600008c77a53
😎 Deploy Preview https://deploy-preview-1214--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
2 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 86 (no change 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.

@github-actions

This comment has been minimized.

@Jacknguyen4438 Jacknguyen4438 changed the title Glasgow | ITP-MAY-2026| Tuan Nguyen | Sprint 2| Form control Glasgow | ITP-2026-May | Tuan Nguyen | Sprint 2| Form control May 3, 2026
@github-actions

This comment has been minimized.

@Jacknguyen4438 Jacknguyen4438 changed the title Glasgow | ITP-2026-May | Tuan Nguyen | Sprint 2| Form control Glasgow | 2026-ITP-May | Tuan Nguyen | Sprint 2| Form control May 3, 2026
@github-actions

This comment has been minimized.

@Jacknguyen4438 Jacknguyen4438 changed the title Glasgow | 2026-ITP-May | Tuan Nguyen | Sprint 2| Form control Glasgow | 2026-ITP-May | Tuan Nguyen | Sprint 2 | Form control May 3, 2026
@github-actions

This comment has been minimized.

@Jacknguyen4438 Jacknguyen4438 added 📅 Sprint 1 Assigned during Sprint 1 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Module-Onboarding The name of the module. labels May 5, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 5, 2026
@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 5, 2026
@github-actions

This comment has been minimized.

@Jacknguyen4438 Jacknguyen4438 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 5, 2026
@Jacknguyen4438 Jacknguyen4438 changed the title Glasgow | MAY-2026 | Tuan Nguyen | Sprint 2 | Form control Glasgow | ITP-MAY-2026 | Tuan Nguyen | Sprint 2 | Form control May 5, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 5, 2026
@github-actions

This comment has been minimized.

@Jacknguyen4438 Jacknguyen4438 added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. NotCoursework labels May 5, 2026
@illicitonion illicitonion changed the title Glasgow | ITP-MAY-2026 | Tuan Nguyen | Sprint 2 | Form control Glasgow | ITP-MAY-2026 | Tuan Nguyen | Sprint 1 | Form control May 5, 2026
@Jacknguyen4438 Jacknguyen4438 added 📅 Sprint 2 Assigned during Sprint 2 of this module 📅 Sprint 1 Assigned during Sprint 1 of this module Core This is a core task and should be completed by all trainees and removed 📅 Sprint 1 Assigned during Sprint 1 of this module 📅 Sprint 2 Assigned during Sprint 2 of this module labels May 11, 2026
Comment thread Form-Controls/index.html
Comment on lines +17 to +18
<label for="name">Customer name:</label>
<input type="text" id="name" name="name" required placeholder="john smith">
Copy link
Copy Markdown
Contributor

@Poonam-raj Poonam-raj May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A valid name is meant to have at least two characters or more. At the moment I can submit a name of "P" which doesn't follow our rules but is allowed by the form. Can you add validation to only allow 2 or more characters?
And can you communicate that rule if someone doesn't follow it?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank for you for your feed back I will make the validation change and message you back

Comment thread Form-Controls/index.html
<input type="email" id="email" name="email" required placeholder="example123@gmail.com">
</div>
<br>
<fieldset>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good use of fieldset

Comment thread Form-Controls/index.html
Comment on lines +28 to +33
<input type="radio" id="color-red" name="color" value="red" required>
<label for="color-red">Red</label>
<input type="radio" id="color-blue" name="color" value="blue" required>
<label for="color-blue">Blue</label>
<input type="radio" id="color-green" name="color" value="green" required>
<label for="color-green">Green</label>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As an extension on this - it's worth thinking about how we communicate information as easily as possible. When selecting colours, it's nice to also see the colour associated. One way to improve this more is to add a colour to the radio buttons here

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your feed back, I will make this change and message you back when it done

Comment thread Form-Controls/index.html
<legend>Pick a color of your choosing</legend>
<input type="radio" id="color-red" name="color" value="red" required>
<label for="color-red">Red</label>
<input type="radio" id="color-blue" name="color" value="blue" required>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A additional thought:
All of your tags have the name "color" but you could be even more descriptive about the data we create here. Imagining we use this color in a t-shirt order, we might have other colours we want to add in future for the "design" on the t-shirt. Worth thinking about labelling this colour more descriptively so people know this is associated with "t-shirt colour"

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your feed back, I understand that is way of writing the code can send hard to understand data I will make correct change and message you back.

Comment thread Form-Controls/index.html
Comment on lines +37 to +45
<label for="size">Shirt size</label>
<select id="size" name="shirt size" required>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
Copy link
Copy Markdown
Contributor

@Poonam-raj Poonam-raj May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could wrap this in a fieldset tag too

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the feed back, I will see which tags I can wrap this around and make change

Comment thread Form-Controls/index.html
<div>
<br>
<label for="size">Shirt size</label>
<select id="size" name="shirt size" required>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here you've demonstrated a good naming choice in the "name" tag, using "shirt size" describes this data accurately

Comment thread Form-Controls/index.html
</select>
</div>
<br>
<button type="submit">Submit</button>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Demonstrates good practice by adding submit button

@Poonam-raj Poonam-raj added Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels May 11, 2026
Copy link
Copy Markdown
Contributor

@Poonam-raj Poonam-raj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good work - largely fulfils the criteria of accessibility and requirements. Only remaining work - minimum character length of the name field

Note across your HTML: tags that contain multiple words (e.g. name tags in select menus) could be better as kebab-case as this is easier to use when we using tags to reference elements in CSS (in the future), and for better readability.

@Jacknguyen4438
Copy link
Copy Markdown
Author

Jacknguyen4438 commented May 11, 2026

@Poonam-raj Thank you for your time on checking this PR I will make change need to be done and I will message you back when the done is completed.

@Poonam-raj Poonam-raj added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. labels May 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Core This is a core task and should be completed by all trainees Module-Onboarding The name of the module. Reviewed Volunteer to add when completing a review with trainee action still to take. 📅 Sprint 1 Assigned during Sprint 1 of this module

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants