London | 26-ITP-Sep | Rawan Almutairi | Sprint 1| FormControls by Rawan0-0 · Pull Request #1627 · CodeYourFuture/Module-JavaScript-Fundamentals

Rawan0-0 · 2026-09-28T23:44:51Z

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

(e.g. CYF-1004).

Changelist

Sprint 1 work

Questions

no questions.

netlify · 2026-09-28T23:44:57Z

✅ Deploy Preview for cyf-onboarding-module ready!

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

abdishakoor-dev

Thanks Rawan. A few things need fixing before this is Complete. Your colour radios are good: one name, a label each, and required.

Put every field and the Submit button in one form (index.html line 68).
The name must have two non-space characters (line 19).
The size must be one of the six sizes only (line 42).
Give the name and email boxes a label (lines 18 and 62).
Fix the 11 errors from https://validator.w3.org/ on index.html.
Close the body block in style.css (line 1). Then format the files you changed with Prettier. Format on save steps: https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md
Put your name in the footer (line 74).
Add the task code CYF-1004 to your PR description.

Add the Needs Review label again when you have pushed, and I'll take another look.

abdishakoor-dev · 2026-09-30T16:51:45Z

+<!--The input type="email" is used so the browser can validatae the email address format-->
+<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
+
+<form> <label> <input type="submit"> <input type="resit">


This Submit button is in its own form. That form has no other fields. So the browser checks nothing when you press Submit.

Try it: leave every field empty and press Submit. The form is still sent.

The email field on line 63 is outside both forms too. Every field and the Submit button must be inside one form.

abdishakoor-dev · 2026-09-30T16:51:45Z

-        this will also help you fill in your PR message later-->
+  <!-- write your html here-->
+        Enter your name:
+      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>


Type two spaces in the name box. minlength="2" accepts them, because a space is a character.

The README asks for two non-space characters. It also gives you a regex for this. How can you use it on this input?

abdishakoor-dev · 2026-09-30T16:51:45Z

+ <!-- I need to fix the labels to increase accessbility to 100%-->
+ <label> 
+Select your T-shirt size: 
+<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 


Type XXXL or purple in the size box. The browser accepts both. A datalist only suggests values. It does not limit them.

You already solved this for colour on line 30. How can you do the same for size?

abdishakoor-dev · 2026-09-30T16:51:45Z

-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+  <!-- write your html here-->
+        Enter your name:


This text is not linked to the name box, so it is not a label. The email box on line 62 has the same problem.

How did you link each colour label to its radio?

abdishakoor-dev · 2026-09-30T16:51:45Z

@@ -0,0 +1,17 @@
+body { color: #141414; 


The body block has no closing }. So Prettier cannot format this file.

abdishakoor-dev · 2026-09-30T16:51:45Z

    <footer>
      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Rawan@</p>


The footer should show your name, as in your PR title. Please also delete the comments on lines 17 and 73. They were instructions for you.

Rawan0-0 · 2026-09-30T16:59:49Z

Thanks, Rawan. A few things need fixing before this is Complete. Your colour radios are good: one name, a label each, and required.

Put every field and the Submit button in one form (index.html line 68).

The name must have two non-space characters (line 19).

The size must be one of the six sizes only (line 42).

Give the name and email boxes a label (lines 18 and 62).

Fix the 11 errors from https://validator.w3.org/ on index.html.

Close the body block in style.css (line 1). Then format the files you changed with Prettier. Format on save steps: https://github.com/CodeYourFuture/Module-JavaScript-Fundamentals/blob/main/practical_guide.md

Put your name in the footer (line 74).

Add the task code CYF-1004 to your PR description.

Add the Needs Review label again when you have pushed, and I'll take another look.

Thank you so much for the comprehensive feedback; it's really helpful.

created forms and styled them

f0f6330