london | may2025 | mohammad | aldali | form-controls #475

mohammadaldali · 2025-05-14T12:07:16Z

Learners, PR Template

Self checklist

I have committed my files one by one, on purpose, and for a reason
I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME
I have tested my changes
My changes follow the style guide
My changes meet the requirements of this task

Changelist

Created a semantic HTML form for collecting t-shirt order info.
Validated user name and email inputs.
Restricted color selection to red, green, and blue.
Restricted size selection to XS, S, M, L, XL, XXL.
Removed CSS as per the spec.
Removed unnecessary aria-label to clear W3C validation warning.
Improved consistency in values.

Questions

Ask any questions you have for your reviewer.

netlify · 2025-05-14T12:07:21Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`5540d7b`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/683ddc426f45f6000828b6ea
😎 Deploy Preview	https://deploy-preview-475--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: 86 (no change from production) PWA: - View the detailed breakdown and full score reports

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

cjyuan

A well-prepared PR makes it easier for reviewers to approve it with minimal back-and-forth.

The "PR Essentials" file on the Canvas in the #cyf-code-review channel has some helpful tips to make your PRs more robust and ready for review.

Can you take a few minutes to check against the essentials, including how to prepare PR description? Doing so can help speed up the review process.

And as a practice to get better at using AI tools, try running your code by ChatGPT. You can ask ChatGPT

review HTML code:
...        <--- paste your HTML code here

Then take a look at the suggestions it gives you, and pick out the ones that actually make sense for your project. It's a great way to learn and improve your work.

Once you've finished making changes, please leave a comment on this PR so I’ll get notified. Thanks!

…s and validation

mohammadaldali · 2025-05-25T12:41:15Z

hi #cjyuan
Thanks for the helpful suggestions!

I've reviewed the code with ChatGPT, cleaned up the structure, and added proper validations. Looking forward to your feedback!

cjyuan

You are off to a solid start.

Can you address the following issues and the comments I left with the code to further improve your implementation?

While there is no error, W3C Markup Validation Service shows some warnings in your code. Can you address those warnings?
The Lighthouse accessibility score is high but not yet 100. Can you improve the score to 100?
In your PR description, in the "Changelist" section, can you briefly describe what you have implemented in this PR branch?

cjyuan · 2025-05-25T13:47:03Z

Form-Controls/index.html

+          <label for="password">Password:</label>
+          <span aria-label="required"><strong>*</strong></span>
+          <input type="password" id="password" name="password" placeholder="Enter your password" minlength="8" required>


It’s important to ensure the implementation adheres to the specifications outlined in the README.md to maintain consistency and avoid unexpected behavior. If you’d like to introduce new features you believe are useful, it’s best to request pre-approval first to ensure alignment with project goals.

cjyuan · 2025-05-25T13:51:10Z

Form-Controls/index.html

+        <section>
+          <h2>Choose your T-shirt</h2>


For forms, using <fieldset> with <legend> are specifically designed for grouping form controls and labeling them. As such, they are more semantic than using <section> with <h2>.

cjyuan · 2025-05-25T13:52:14Z

Form-Controls/index.html

+
+        <section>
+          <h2>Choose your T-shirt</h2>
+          <p>Please fill all required information</p>


Why place this instruction in the middle of the form when all fields are required?

cjyuan · 2025-05-25T13:53:19Z

Form-Controls/index.html

+        <section>
+          <label for="name">Your name:</label>
+          <span aria-label="required"><strong> * </strong></span>
+          <input type="text" id="name" name="user-name" placeholder="Enter your name" required>


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?

…idation, and cleaned up HTML

mohammadaldali · 2025-05-25T15:02:14Z

Thanks for the feedback!

I removed the password field as it wasn’t required.
I also added a pattern to the name input to only allow letters and one space between names — no spaces at the beginning or end.

I cleaned up the HTML using only semantic elements like fieldset and legend.
I also checked that there are no W3C validation warnings.

Let me know if anything else needs fixing.

cjyuan

Code are greatly improved! Well done!

Can you address the following issues to further improve your implementations?

The Lighthouse accessibility score is 95. The spec asks for 100. Can you improve this score to 100?
Can you also address the warning indicated by the W3C Markup Validation Service?
To follow best practices, make sure to
- Check the items in the Self-Checklist to confirm your pull request meets the guidelines (which you have done! Good!)
- Provide a brief description (under the "Changelist" section) summarizing the purpose of the PR and the changes you’ve made

… requirements: - Removed unnecessary ARIA attributes to avoid validation issues. - Added proper `<label>` elements for all inputs and selects. - Adjusted the input, select, and button sizes to meet the required touch target size (min 44px height). - Updated the "Choose your size" label and fixed the placeholder text. - Re-tested with Lighthouse and now the accessibility score is 100%. Let me know if anything else needs updating. Thanks!

mohammadaldali · 2025-05-31T10:00:48Z

the warning shown in the W3C Validator is not related to the HTML code I wrote.
It appears to come from the original repository or external assets being loaded automatically.
Specifically, the warning is about a element, which my code does not include at all.
I have not made any changes to the core str
ucture that could cause this issue.

cjyuan · 2025-05-31T12:12:50Z

The errors I see are these:

This is the file I checked: https://github.com/CodeYourFuture/Module-Onboarding/blob/7c5825928d00e2e122f5af924bf14e325d838b3b/Form-Controls/index.html

mohammadaldali · 2025-06-02T16:30:04Z

I’ve removed the stray
tags inside the elements, which were causing HTML validation errors. I also cleaned up some unnecessary line breaks to improve the structure and readability of the

cjyuan

According to https://validator.w3.org/, there is still an error in your code. Can you fix it?

You can use the above website to check for errors yourself.

cjyuan · 2025-06-02T16:45:02Z

Form-Controls/index.html

+
+          </select>
+          <hr>  
+         <label for="size" >choose your size: </label>


Can you make these labels more consistent in terms of wording and letter case?

I've done ,
could you chek please?

cjyuan · 2025-06-02T17:12:38Z

Code is error free now. Good job.

As for the label, I would have just used "Color:" and "Size:" because the legend of the field set already mentions "T-shirt".

mohammadaldali · 2025-06-02T17:16:24Z

I'VE DONE

cjyuan · 2025-06-02T17:31:39Z

Changes look good.

add autocomplete attributes and fix form structure

af2a103

mohammadaldali changed the title ~~add autocomplete attributes and fix form structure~~ london | may2025 | mohammad | aldali | form-controls May 14, 2025

mohammadaldali requested review from SallyMcGrath, jenny-alexander and shieldo May 15, 2025 18:38

mohammadaldali added 👀 Review Requirements Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. and removed 👀 Review Requirements labels May 19, 2025

cjyuan reviewed May 22, 2025

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 May 22, 2025

Refactor T-shirt order form: improved structure, added required field…

4c85198

…s and validation

mohammadaldali 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 May 25, 2025

cjyuan reviewed May 25, 2025

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 May 25, 2025

Fixed form based on feedback: removed password, added proper name val…

238efec

…idation, and cleaned up HTML

mohammadaldali 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 May 25, 2025

i try to make accessibility (100)

149d232

mohammadaldali requested a review from cjyuan May 25, 2025 15:30

cjyuan reviewed May 25, 2025

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 May 25, 2025

mohammadaldali removed the Reviewed Volunteer to add when completing a review with trainee action still to take. label May 27, 2025

mohammadaldali 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 May 31, 2025

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 May 31, 2025

removed som <br>

731e939

mohammadaldali requested a review from cjyuan June 2, 2025 16:30

mohammadaldali 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 2, 2025

cjyuan reviewed Jun 2, 2025

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 Jun 2, 2025

i did labels more consistent

008ff98

mohammadaldali 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 2, 2025

mohammadaldali mentioned this pull request Jun 2, 2025

My Onboarding Module Coursework Submission - Mohammad Aldali #683

Closed

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 Jun 2, 2025

I have done of it

5540d7b

mohammadaldali 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 2, 2025

cjyuan added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jun 2, 2025

mohammadaldali mentioned this pull request Jun 5, 2025

Step 1 Submission mohammadaldali/My-Coursework-Planner#2

Open

illicitonion closed this Sep 1, 2025

Uh oh!

london | may2025 | mohammad | aldali | form-controls #475

london | may2025 | mohammad | aldali | form-controls #475

Uh oh!

Conversation

mohammadaldali commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Learners, PR Template

Changelist

Questions

Uh oh!

netlify bot commented May 14, 2025 • 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!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

mohammadaldali commented May 25, 2025

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

cjyuan May 25, 2025

Choose a reason for hiding this comment

Uh oh!

cjyuan May 25, 2025

Choose a reason for hiding this comment

Uh oh!

cjyuan May 25, 2025

Choose a reason for hiding this comment

Uh oh!

cjyuan May 25, 2025

Choose a reason for hiding this comment

Uh oh!

mohammadaldali commented May 25, 2025

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

mohammadaldali commented May 31, 2025

Uh oh!

cjyuan commented May 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mohammadaldali commented Jun 2, 2025

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

mohammadaldali Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

cjyuan commented Jun 2, 2025

Uh oh!

mohammadaldali commented Jun 2, 2025

Uh oh!

cjyuan commented Jun 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mohammadaldali commented May 14, 2025 •

edited

Loading

netlify bot commented May 14, 2025 •

edited

Loading

cjyuan commented May 31, 2025 •

edited

Loading