London | 26-ITP-Sept | Fung Nin Lee | Sprint 1 | Forms Control by leerogerfn · Pull Request #1484 · CodeYourFuture/Module-JavaScript-Fundamentals

leerogerfn · 2026-09-09T09:31:14Z

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

initial set up.
submit form requirements.
added fieldset for the form
added customer name
added email address
added color with 3 options
added size for 6 options
added submit button
final version
removed fieldset and changed code of header
set required for all questions in the form.
removed unnecessary paragraph tags for cleaner form layout.
fixed problem of reminder still come out even name submission fulfilled the requirement. And the pull down menu is required to select an option.
added br to seperate different parts of form.
deleted div open code in line 24.
required attributes to options. Use fieldset for color group radio buttons.
removed empty p in line 53.
removed HOMEWORK SOLUTION in line 62.
moved header to body elements.
added br in line 50.
fixed default placeholder options in line 40.

netlify · 2026-09-09T09:31:21Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`3401c11`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6aa875efeae8e70009c48c81
😎 Deploy Preview	https://deploy-preview-1484--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: 83 (🔴 down 3 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.

hey-hammad

Good work overall! The form is clear and covers the main requirements. A few small improvements to structure, validation, and accessibility would make it stronger.

hey-hammad · 2026-09-11T15:31:29Z

-      <h1>Product Pick</h1>
+    <fieldset>
+      <legend>Product Pick</legend>
    </header>


Can you please review the header tag, there is no opening <header> tag.

hey-hammad · 2026-09-11T15:32:54Z

+        <input type="text" id="name" name="name" pattern=".*\S.*\S.*">  
+           <div>
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email">


The task says all fields are required. How will the form prevent submission if the user leaves the name, email, colour, or size blank?

hey-hammad · 2026-09-11T15:33:52Z

+  </main>
+</fieldset>
+
+<button type="submit">submit</button>


The submit button currently doesn't do anything, will moving to another place fix this?

Hi Hammad, thank you for reviews and comments. It seems the requirement did not include submitting information to sowhere. Could you elaborate more what I have to do on this point?

The button is in the right place now, inside the form. The task says not to write a form action, so it doesn't need to send the data anywhere. Its job is to make the browser run the validation when it's clicked. Nothing more to do on this one.

hey-hammad · 2026-09-11T15:34:45Z

+        <label for="email">Email</label>
+        <input type="email" id="email" name="email">
+        </div>
+        <p></p>


is there a reason for adding empty <p> tag here?

hey-hammad · 2026-09-11T15:36:49Z

  <body>
-    <header>
-      <h1>Product Pick</h1>
+    <fieldset>


Please review the fieldset tags, think about the correct placement when building a form, more on this in the link below. Thanks

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset

…ed the requirement. And the pull down menu is required to select an option.

abdishakoor-dev

Picking this up from Hammad's review. The validation is now right: name, email, colour and size are all required and the name pattern works. Good.

Things to sort before it can be marked Complete:

The <header> has ended up inside <head> (line 7). <head> is for things like <title> and <meta>. Everything the user sees goes in <body>. The starter file on main had the header in the right place, compare against it.
The <div> opened on line 24 is never closed. The HTML validator from the README checklist (https://validator.w3.org/) gives up at that point with 10 errors, and Prettier can't parse the file at all. Fix the structure, then run the validator again until it's clean.
required on line 43 is on an <option>, where it isn't allowed. You already have it on the <select>, which is where it works.
"Color" on line 26 is loose text. Hammad pointed you at fieldset for this and it was removed rather than moved. Which element gives a group of radio buttons a caption?
The footer still has HOMEWORK SOLUTION in it, line 61.
Formatting. Once the structure is fixed, run npx prettier --write Form-Controls from the repo root. The indentation is all over the place at the moment.

Add the Needs Review label again once you've pushed.

abdishakoor-dev · 2026-09-14T13:43:44Z

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>My form exercise</title>
+    <header><h1>Product Pick</h1></header>


This is inside <head>. Which part of the page does <head> describe, and where should something the user sees go? The starter file had this right.

abdishakoor-dev · 2026-09-14T13:43:44Z

+        <input type="email" id="email" name="email" required>
+        </div>
+
+        <div>


This <div> is never closed. Count the opening and closing divs from here to line 51. That's why the validator stops and Prettier can't format the file.

Fixed, and the validator is clean now.

abdishakoor-dev · 2026-09-14T13:43:44Z

+      <div>
+        <label for="size">Size</label>
+        <select name="size" id="size" required>
+          <option disabled hidden selected required value="">Select One</option>


required isn't an attribute an <option> can have. The one on the <select> on line 42 is the one doing the work, so this can go.

abdishakoor-dev · 2026-09-14T13:43:44Z

+
+        <div>
+          <br>
+          Color


Loose text as a heading for the radios. Hammad's fieldset link was about this. What does the MDN page from the prep on structuring a form use to group radio buttons and caption them?

That's the one. Fieldset and legend, done.

abdishakoor-dev · 2026-09-14T13:43:44Z

+          <option value="xxl">XXL</option>
+        </select>
+      </div>
+      <p></p>


Hammad asked about the empty <p> and there's still one here. What is it for?

Gone, good.

abdishakoor-dev · 2026-09-14T13:43:44Z

+
+
+<footer>
+  <p>By Fung Nin Lee (Roger) HOMEWORK SOLUTION</p>


HOMEWORK SOLUTION should have gone when you put your name in.

Hi Abdi. Thank you for your comments. Could you feel free to check if it is OK now?

Yes, all the structure points are done. One thing left, formatting, see the main comment.

…tton.

abdishakoor-dev

All six structure points are sorted: header in the right place, the div closed, required off the option, fieldset and legend on the colour radios, the empty <p> gone and your name in the footer. The validator is clean and every field is validated the way the task asks. Good work getting through that list.

One thing left before I mark this Complete: the formatting check. "My code is consistently formatted" is on the README checklist, and the tool that does it for you is called Prettier. It rearranges spacing and indentation to one agreed style, so that your code is easy to read and so that a reviewer only sees the changes you meant to make, not stray spaces and tabs. At the moment index.html fails that check; look at how far the indentation wanders between lines 14 and 35.

Prettier comes with the CYF extension pack you were asked to install during onboarding. If you're not sure you have it, open VS Code, go to Extensions, and search for CodeYourFuture Extension Pack; install it if it isn't there: https://marketplace.visualstudio.com/items?itemName=CodeYourFuture.cyf-extension-pack

Then open index.html, right click in the editor, choose Format Document, and pick Prettier if VS Code asks which formatter to use. Save, commit the changes it makes, push, and add the Needs Review label again. To make this happen automatically every time you save, follow the format on save steps here: https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md

leerogerfn · 2026-09-14T22:34:17Z

All six structure points are sorted: header in the right place, the div closed, required off the option, fieldset and legend on the colour radios, the empty <p> gone and your name in the footer. The validator is clean and every field is validated the way the task asks. Good work getting through that list.

One thing left before I mark this Complete: the formatting check. "My code is consistently formatted" is on the README checklist, and the tool that does it for you is called Prettier. It rearranges spacing and indentation to one agreed style, so that your code is easy to read and so that a reviewer only sees the changes you meant to make, not stray spaces and tabs. At the moment index.html fails that check; look at how far the indentation wanders between lines 14 and 35.

Prettier comes with the CYF extension pack you were asked to install during onboarding. If you're not sure you have it, open VS Code, go to Extensions, and search for CodeYourFuture Extension Pack; install it if it isn't there: https://marketplace.visualstudio.com/items?itemName=CodeYourFuture.cyf-extension-pack

Then open index.html, right click in the editor, choose Format Document, and pick Prettier if VS Code asks which formatter to use. Save, commit the changes it makes, push, and add the Needs Review label again. To make this happen automatically every time you save, follow the format on save steps here: https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md

Hi @abdishakoor-dev , I just completed formatting check. Please confirm if it is good to complete. Thank you.

leerogerfn added 9 commits September 9, 2026 00:15

initial setup

3acf9bd

submit form requirements.

4ea47cd

added fieldset for the form

b23155b

added customer name

56ce344

added emal address

8eebedc

added color with 3 options

f81e814

added size for 6 options

00d9593

added submit button

b71b7df

final version

7a2fe70

This comment has been minimized.

Sign in to view

leerogerfn closed this Sep 9, 2026

leerogerfn reopened this Sep 9, 2026

This comment has been minimized.

Sign in to view

leerogerfn added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 9, 2026

This comment has been minimized.

Sign in to view

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

leerogerfn added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 9, 2026

This comment has been minimized.

Sign in to view

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

leerogerfn added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 9, 2026

hey-hammad 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 11, 2026

hey-hammad suggested changes Sep 11, 2026

View reviewed changes

hey-hammad 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 11, 2026

leerogerfn added 2 commits September 12, 2026 10:17

removed fieldset and chnaged code of header.

b50f040

set required for all questions in the form.

e4c0e3e

leerogerfn 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 Sep 12, 2026

leerogerfn added 2 commits September 12, 2026 15:01

fixed problem of reminder still come out even name submission fulfill…

a53022c

…ed the requirement. And the pull down menu is required to select an option.

added <br> to seperate different parts of form.

5a42135

leerogerfn added the 📅 Sprint 1 Assigned during Sprint 1 of this module label Sep 12, 2026

abdishakoor-dev reviewed Sep 14, 2026

View reviewed changes

abdishakoor-dev 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 Sep 14, 2026

leerogerfn added 7 commits September 14, 2026 22:08

deleted div open code in line 24.

f3a35c6

required attributes to options. Use fieldset for color group radio bu…

37378b4

…tton.

removed empty p in line 53.

028040f

removed HOMEWORK SOLUTION in line 62.

58c127f

moved header to body elements.

a8ca697

added br in line 50.

deea624

fixed the default placeholder options in line 40.

dfe5ad2

leerogerfn 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 Sep 14, 2026

abdishakoor-dev reviewed Sep 14, 2026

View reviewed changes

abdishakoor-dev 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 Sep 14, 2026

leerogerfn 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 Sep 14, 2026

Formatting

3401c11

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

Uh oh!

Uh oh!

Conversation

leerogerfn commented Sep 9, 2026 • edited by abdishakoor-dev Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Learners, PR Template

Task code

Changelist

Uh oh!

netlify Bot commented Sep 9, 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 has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

hey-hammad left a comment

Choose a reason for hiding this comment

Uh oh!

hey-hammad Sep 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Choose a reason for hiding this comment

Uh oh!

hey-hammad Sep 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abdishakoor-dev 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!

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!

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!

abdishakoor-dev left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leerogerfn commented Sep 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

leerogerfn commented Sep 9, 2026 •

edited by abdishakoor-dev

Loading

netlify Bot commented Sep 9, 2026 •

edited

Loading

hey-hammad Sep 11, 2026 •

edited

Loading

hey-hammad Sep 11, 2026 •

edited

Loading

abdishakoor-dev left a comment •

edited

Loading