Skip to content

South Africa | 26-ITP | Quentin Gwele | Sprint 1 | Form Controls - #1510

Open
lwandogwele52-ui wants to merge 3 commits into
CodeYourFuture:mainfrom
lwandogwele52-ui:feature/form-controls
Open

lwandogwele52-ui wants to merge 3 commits into
CodeYourFuture:mainfrom
lwandogwele52-ui:feature/form-controls

Conversation

@lwandogwele52-ui

Copy link
Copy Markdown

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

Task code

CYF-1004

Changelist

  • Add customer name validation
  • Add email input
  • Add color selector and size options

@netlify

netlify Bot commented Sep 12, 2026

Copy link
Copy Markdown

Deploy Preview for cyf-onboarding-module ready!

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

@lwandogwele52-ui lwandogwele52-ui added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 12, 2026
@tiakavousi tiakavousi 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 Sep 15, 2026

@tiakavousi tiakavousi left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice start! A few comments to help you complete the assignment:

  • Please resolve all the comments
  • Please add a CSS file and use it to style your HTML page, as required by the assignment.
  • After pushing your changes , please add the Need Review label

Comment thread Form-Controls/index.html Outdated
<option value="black">Black</option>
</select>
</div>
<!-- 4. T-shirt Size (6 options: XS, S, M, L, XL, XXL) -->

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Since there are only three colour options, would radio buttons provide a better UX here? They allow users to see all available options immediately without opening a dropdown. The current is still valid for a single-choice selection.

Comment thread Form-Controls/index.html Outdated

<!-- Submit Button -->
<button type="submit">Submit Order</button>
<header>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The <header> should come before the <main> in the document structure.
A more semantic order would be:

<header><main> <footer>

This makes the page structure clearer for browsers, assistive technologies, and other tools that rely on semantic HTML.

Comment thread Form-Controls/index.html Outdated
this will also help you fill in your PR message later-->
</form>
</main>
<footer>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Please also check your <footer>: the closing </footer> tag is missing.

Also, please follow the requirement mentioned in the comment by adding a <p> element containing your name inside the footer.

@tiakavousi tiakavousi 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 Sep 15, 2026
@lwandogwele52-ui lwandogwele52-ui added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 15, 2026

@tiakavousi tiakavousi left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice work resolving the comments,

on the CSS , the form is clearly styled and the selectors are generally appropriate.

A few things to consider:

  • Avoid styling all div elements globally with A class name would be more specific and maintainable.
  • Consider adding a hover state to the submit button to give the user visual feedback when interacting with it.

@tiakavousi tiakavousi removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 16, 2026
@lwandogwele52-ui

lwandogwele52-ui commented Sep 16, 2026 via email

Copy link
Copy Markdown
Author

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

Labels

Reviewed Volunteer to add when completing a review with trainee action still to take.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants