Birmingham|26-ITP-May|Yonas Gebre|Sprint 1|Form Control by yonasdesbelegebre · Pull Request #1264 · CodeYourFuture/Module-Onboarding

yonasdesbelegebre · 2026-05-14T02:03:38Z

Learners, PR Template

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

Changelist

The form collects customer names and email addresses, as well as t-shirt sizes and colors.
The inputs are all required.
For customer names, it is only possible to use characters.
For the email, I use a regular expression.
For t-shirt colors, there are 3 available choices as radio type with colors black, red, and blue.
For T-shirt , i use select one from the list of 6 sizes.
Styles for the form and elements.

netlify · 2026-05-14T02:03:43Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`af88358`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a27bbd72d7c1800083760f8
😎 Deploy Preview	https://deploy-preview-1264--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.

Luro91 · 2026-05-24T05:23:08Z

Good job that you separated the CSS into its own file—that’s an excellent best practice and will make your code much easier to read, debug, and maintain as it grows.

Luro91 · 2026-05-24T05:23:29Z

Why are there changes in this file? How is it related to the task?

sorry, could you make it clear. Did you need more explanation about the code.

You commited some change to Form-Controls/README.md which I don't understand.

yonasdesbelegebre

I have learned more about how to validate and clean my code, thank you for your feedback.

Luro91

I get an Accessibility score of 89 in Lighthouse. How can you get it to 100?

Luro91 · 2026-06-06T05:09:47Z

+        <div>
+          <label for="customername">Customer name *: </label>
+          <input type="text" id="customername" name="customername" required 
+          pattern="^[A-Za-z]{2,}$" 


This does not allow special characters like the German ä,ü,ö or Russian ед

Luro91 · 2026-06-06T05:12:08Z

You commited some change to Form-Controls/README.md which I don't understand.

yonasdesbelegebre

I hope fixed the issues now.

Luro91 · 2026-06-08T04:17:35Z

@@ -0,0 +1,74 @@
+/* body style */
+    input:valid{


The indentation is a bit off here

Luro91 · 2026-06-08T04:19:23Z

+        <div>
+          <label for="customername">Customer name *: </label>
+          <input type="text" id="customername" name="customername" required 
+          pattern="^[\p{Latin}\p{Ll}]$" minlength="2" maxlength="50" 


I see the following error in the browser console when I enter characters:

index.html?customername=a%C3%A4&customeremail=a%40tes.com&color=Black&sizes=xs:1 Pattern attribute value ^[\p{Latin}\p{Ll}]$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[\p{Latin}\p{Ll}]$/v: Invalid property name in character class

Luro91 · 2026-06-09T04:37:00Z

+        <div>
+          <label for="customername">Customer name *: </label>
+          <input type="text" id="customername" name="customername" required 
+          pattern="^[A-Za-zÀ-ÖØ-öø-ÿĀ-ž\s'-]+$" minlength="2" maxlength="50" 


This still shows an error in the browser console. Also how can you ensure that all characters can be entered. For example Asian characters. Get a hint in the Readme document

Pattern attribute value ^[A-Za-zÀ-ÖØ-öø-ÿĀ-ž\s'-]+$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[A-Za-zÀ-ÖØ-öø-ÿĀ-ž\s'-]+$/v: Invalid character in character class

Luro91 · 2026-06-09T04:37:53Z

+        <div>
+          <label for="customeremail">Customer email: </label>
+          <input type="email" id="customeremail" name="customeremail" required 
+          pattern="^[\p{L}\p{N}._%+-]+@[\p{L}\p{N}.-]+\.[\p{L}]{2,}$"


I also get an error on the browser console for this:

Pattern attribute value ^[\p{L}\p{N}.%+-]+@[\p{L}\p{N}.-]+.[\p{L}]{2,}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[\p{L}\p{N}.%+-]+@[\p{L}\p{N}.-]+.[\p{L}]{2,}$/v: Invalid character in character class

haftomprogrammer and others added 4 commits May 13, 2026 17:44

the html format only

778e937

Style added for the forms

304b08c

modify the name label

c70d30f

color performance optimization

2f0ee3b

yonasdesbelegebre added 2 commits May 16, 2026 15:29

add div for labels

f409355

modified the form color and perofrmance desktop

55ffbef

This comment was marked as resolved.

Sign in to view

yonasdesbelegebre added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 22, 2026

Luro91 added the Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. label May 24, 2026

Luro91 reviewed May 24, 2026

View reviewed changes

yonasdesbelegebre added 2 commits May 29, 2026 13:31

modifed feedbacks

a82cab3

email includes more characters

1bcb7c1

yonasdesbelegebre commented May 29, 2026

View reviewed changes

radio button error

df00e2f

yonasdesbelegebre mentioned this pull request Jun 5, 2026

26-ITP-May | Onboarding | Yonas Gebre yonasdesbelegebre/My-Coursework-Planner#12

Open

yonasdesbelegebre 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 Jun 5, 2026

Luro91 reviewed Jun 6, 2026

View reviewed changes

Luro91 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 Jun 6, 2026

added label for the select

a72d6c6

yonasdesbelegebre commented Jun 6, 2026

View reviewed changes

yonasdesbelegebre added 🏕 Priority Mandatory This work is expected 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 Jun 6, 2026

Luro91 reviewed Jun 8, 2026

View reviewed changes

Luro91 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 Jun 8, 2026

customer name fixed

03ed0e7

yonasdesbelegebre added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Module-Onboarding The name of the module. and removed Reviewed Volunteer to add when completing a review with trainee action still to take. labels Jun 8, 2026

Luro91 reviewed Jun 9, 2026

View reviewed changes

Luro91 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 Jun 9, 2026

trying to fix

af88358

yonasdesbelegebre 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 Jun 9, 2026

Uh oh!

Conversation

yonasdesbelegebre commented May 14, 2026

Learners, PR Template

Changelist

Uh oh!

netlify Bot commented May 14, 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 was marked as resolved.

Uh oh!

Uh oh!

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!

Uh oh!

Uh oh!

yonasdesbelegebre left a comment

Choose a reason for hiding this comment

Uh oh!

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

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

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented May 14, 2026 •

edited

Loading