Skip to content

Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 2 | Form Controls #1113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
mahmoudshaabo1984 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 2 | Form Controls #1113

mahmoudshaabo1984 wants to merge 2 commits into from
+91 −9

Conversation

@mahmoudshaabo1984
Copy link

@mahmoudshaabo1984 mahmoudshaabo1984 commented Feb 1, 2026 •
edited
Loading

I have completed the Form Controls task for Sprint 2.

Work done:

  • Built a T-shirt order form using HTML only.
  • Implemented HTML form validation (required, minlength=2, type=email).
  • Used fieldset/legend for accessibility.

Learners, PR Template

  • 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

@netlify
Copy link

netlify bot commented Feb 1, 2026 •
edited
Loading

✅ Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit 0c342f9
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/6981d0ee9eb72e0008db04e7
😎 Deploy Preview https://deploy-preview-1113--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: 91 (🟢 up 5 from production)
PWA: -
View the detailed breakdown and full score reports

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

@github-actions

This comment has been minimized.

Sign in to view
@mahmoudshaabo1984 mahmoudshaabo1984 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 1, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 1, 2026
@mahmoudshaabo1984 mahmoudshaabo1984 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 1, 2026
cjyuan
cjyuan reviewed Feb 3, 2026
View reviewed changes
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

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

Code looks pretty solid. Just some minor changes needed.

  • Currently Lighthouse Accessibility score is 93. Can you improve the score to 100?

Reason given by Lighthouse: Touch targets do not have sufficient size or spacing.

Feel free to use AI to help you figure out possible ways to tackle this issue.

Form-Controls/index.html
Comment on lines 18 to 25
<input
id="customerName"
name="customerName"
type="text"
required
minlength="2"
autocomplete="name"
/>
Copy link
Contributor

@cjyuan cjyuan Feb 3, 2026

Choose a reason for hiding this comment

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

Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?

Form-Controls/index.html Outdated
Comment on lines 42 to 49
<input
id="colourBlack"
name="colour"
type="radio"
value="black"
required
/>
<label for="colourBlack">Black</label>
Copy link
Contributor

@cjyuan cjyuan Feb 3, 2026

Choose a reason for hiding this comment

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

Note: You could consider wrapping the radio button input element inside the label element. This way, you don't need to use id and for attributes.

@cjyuan 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 Feb 3, 2026
@mahmoudshaabo1984
Copy link
Author

mahmoudshaabo1984 commented Feb 3, 2026

Hi CJ, I have updated the code to address your feedback. I used semantic HTML to increase touch targets for accessibility (targeting score 100) and added the name validation pattern. Ready for your review! Thanks.

@cjyuan
Copy link
Contributor

cjyuan commented Feb 3, 2026

Changes look great! Well done.

Do you know what the regular expression .*\S.* means? Regular expressions are widely used in tech. Do explore the subject when you have spare time.

@cjyuan cjyuan added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Reviewed Volunteer to add when completing a review with trainee action still to take. labels Feb 3, 2026
@mahmoudshaabo1984
Copy link
Author

mahmoudshaabo1984 commented Feb 3, 2026 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cjyuan cjyuan cjyuan left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mahmoudshaabo1984 @cjyuan