From 9b1da5146f701db33a30ac9967ccb694b4e013f5 Mon Sep 17 00:00:00 2001
From: zadri abdule <zadriabdule@gmail.com>
Date: Mon, 19 May 2025 22:16:05 +0100
Subject: [PATCH 01/10] Add intitial form layout with name and email inputs

---
 Form-Controls/index.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..a814e1c2f 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,10 +13,19 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <!-- REQUIREMENTS -->
+        <!-- what is the custome's name? (min 2 characters) -->
+         <div>
+          <label for="name">Full Name:</label>
+          <input type="text" id="name" name="name" />
+         </div> 
+
+         <dv>
+          <label for="email">Email Address:</label>
+          <input type="email" id="email" name="email" />
+         </dv>
+        
+
       </form>
     </main>
     <footer>

From 05ed32d9b5182336cbbd66ea2c440b463254c3b0 Mon Sep 17 00:00:00 2001
From: zadri abdule <zadriabdule@gmail.com>
Date: Mon, 19 May 2025 23:28:18 +0100
Subject: [PATCH 02/10] Add name and email inputs with validation rules

---
 Form-Controls/index.html | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index a814e1c2f..7b88f5104 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -11,20 +11,26 @@
     <header>
       <h1>Product Pick</h1>
     </header>
+
     <main>
       <form>
         <!-- REQUIREMENTS -->
         <!-- what is the custome's name? (min 2 characters) -->
          <div>
           <label for="name">Full Name:</label>
-          <input type="text" id="name" name="name" />
+          <input type="text" id="name" name="name" required mainlength="2" pattern=".{2,}" />
          </div> 
 
-         <dv>
+        <!-- What is the customer's email? (must be valid) -->
+         <div>
           <label for="email">Email Address:</label>
-          <input type="email" id="email" name="email" />
-         </dv>
-        
+          <input type="email" id="email" name="email" required />
+         </div>
+
+        <!-- What colour should this t-shirt be? (only 3 options) -->
+        <fieldset>
+          
+        </fieldset>
 
       </form>
     </main>

From 58a44cf6d712aa9b52e391f490eaa1f52da3f56b Mon Sep 17 00:00:00 2001
From: zadri abdule <zadriabdule@gmail.com>
Date: Tue, 20 May 2025 00:06:17 +0100
Subject: [PATCH 03/10] Add color selection with 3 radio buttons

---
 Form-Controls/index.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 7b88f5104..b1d897892 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -29,9 +29,23 @@ <h1>Product Pick</h1>
 
         <!-- What colour should this t-shirt be? (only 3 options) -->
         <fieldset>
-          
+          <legend>Choose a T-shirt Color:</legend> 
+          <div>
+            <input type="radio" id="red" name="color" value="red" />
+            <label for="red">Red</label>
+          </div>
+          <div>
+            <input type="radio" id="blue" name="color" value="blue" />
+            <label for="blue">Blue</label>
+          </div>
+          <div>
+            <input type="radio" id="green" name="color" value="green" />
+            <label for="green">Green</label>
+          </div>
         </fieldset>
 
+       <!-- T-shirt Size -->
+      
       </form>
     </main>
     <footer>

From 9cfc9ff97be5806bbfa2a463c90d226e6757d44c Mon Sep 17 00:00:00 2001
From: zadri abdule <zadriabdule@gmail.com>
Date: Tue, 20 May 2025 00:08:38 +0100
Subject: [PATCH 04/10] Add Size selection with 6 dropdown options

---
 Form-Controls/index.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index b1d897892..95e7b1c5e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -45,7 +45,18 @@ <h1>Product Pick</h1>
         </fieldset>
 
        <!-- T-shirt Size -->
-      
+      <div>
+        <label for="size">Select Size:</label>
+        <select id="size" name="size" required>
+         <option value="">--Select a Size--</option>
+         <option value="XS">XS</option>
+         <option value="S">S</option>
+         <option value="M">M</option>
+         <option value="L">L</option>
+         <option value="XL">XL</option>
+         option value="XXL">XXL</select>option>
+        </select>
+      </div>
       </form>
     </main>
     <footer>

From c6b59c1c190ee45c1d5c87bdd725ed5420532efd Mon Sep 17 00:00:00 2001
From: zadri abdule <zadriabdule@gmail.com>
Date: Tue, 20 May 2025 02:27:48 +0100
Subject: [PATCH 05/10] Verify 100 Lighthouse accessibility score

---
 Form-Controls/index.html | 52 ++++++++++++++++++++++++----------------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 95e7b1c5e..c9431c35c 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -15,53 +15,63 @@ <h1>Product Pick</h1>
     <main>
       <form>
         <!-- REQUIREMENTS -->
-        <!-- what is the custome's name? (min 2 characters) -->
+        <!-- what is the customer's name? (min 2 characters) -->
          <div>
-          <label for="name">Full Name:</label>
-          <input type="text" id="name" name="name" required mainlength="2" pattern=".{2,}" />
+           <label for="name">Full Name:</label><br />
+           <input type="text" id="name" name="name" required mainlength="2" autocomplete="name" /><br /><br />
          </div> 
 
         <!-- What is the customer's email? (must be valid) -->
          <div>
-          <label for="email">Email Address:</label>
-          <input type="email" id="email" name="email" required />
+           <label for="email">Email Address:</label><br />
+           <input type="email" id="email" name="email" required autocomplete="email" /><br /><br />
          </div>
 
         <!-- What colour should this t-shirt be? (only 3 options) -->
         <fieldset>
           <legend>Choose a T-shirt Color:</legend> 
+
           <div>
             <input type="radio" id="red" name="color" value="red" />
             <label for="red">Red</label>
-          </div>
+          </div><br />
+
           <div>
             <input type="radio" id="blue" name="color" value="blue" />
             <label for="blue">Blue</label>
-          </div>
+          </div><br />
+
           <div>
             <input type="radio" id="green" name="color" value="green" />
             <label for="green">Green</label>
-          </div>
-        </fieldset>
+          </div><br />
+        </fieldset><br />
 
        <!-- T-shirt Size -->
       <div>
-        <label for="size">Select Size:</label>
-        <select id="size" name="size" required>
-         <option value="">--Select a Size--</option>
-         <option value="XS">XS</option>
-         <option value="S">S</option>
-         <option value="M">M</option>
-         <option value="L">L</option>
-         <option value="XL">XL</option>
-         option value="XXL">XXL</select>option>
-        </select>
+         <label for="size">Select Size:</label>
+         <select id="size" name="size" required>
+           <option value="">--Select a Size--</option>
+           <option value="XS">XS</option>
+           <option value="S">S</option>
+           <option value="M">M</option>
+           <option value="L">L</option>
+           <option value="XL">XL</option>
+           <option value="XXL">XXL</option>
+        </select><br /><br />
       </div>
+
+      <!-- Submit button (optional for testing)-->
+       <div>
+         <button type="submit">Submit</button>
+       </div>
       </form>
     </main>
+
+
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      
+      <h2>By Zadri Abdule</h2>
     </footer>
   </body>
 </html>

From 2ba6397d87477690e231fb2bf514f42a60cf565c Mon Sep 17 00:00:00 2001
From: zadri abdule <zadriabdule@gmail.com>
Date: Tue, 20 May 2025 02:29:15 +0100
Subject: [PATCH 06/10] Finalise form markup and validation

---
 Form-Controls/index.html | 88 +++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 46 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index c9431c35c..c4e6547a6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My form exercise</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
     <header>
@@ -14,64 +14,60 @@ <h1>Product Pick</h1>
 
     <main>
       <form>
-        <!-- REQUIREMENTS -->
-        <!-- what is the customer's name? (min 2 characters) -->
-         <div>
-           <label for="name">Full Name:</label><br />
-           <input type="text" id="name" name="name" required mainlength="2" autocomplete="name" /><br /><br />
-         </div> 
+        <!-- Customer's name -->
+        <div>
+          <label for="name">Full Name:</label><br>
+          <input type="text" id="name" name="name" required minlength="2" autocomplete="name"><br>
+        </div>
 
-        <!-- What is the customer's email? (must be valid) -->
-         <div>
-           <label for="email">Email Address:</label><br />
-           <input type="email" id="email" name="email" required autocomplete="email" /><br /><br />
-         </div>
+        <!-- Email -->
+        <div>
+          <label for="email">Email Address:</label><br>
+          <input type="email" id="email" name="email" required autocomplete="email"><br><br>
+        </div>
 
-        <!-- What colour should this t-shirt be? (only 3 options) -->
+        <!-- T-shirt Color -->
         <fieldset>
-          <legend>Choose a T-shirt Color:</legend> 
-
+          <legend>Choose a T-shirt Color:</legend>
           <div>
-            <input type="radio" id="red" name="color" value="red" />
+            <input type="radio" id="red" name="color" value="red">
             <label for="red">Red</label>
-          </div><br />
-
+          </div><br>
           <div>
-            <input type="radio" id="blue" name="color" value="blue" />
+            <input type="radio" id="blue" name="color" value="blue">
             <label for="blue">Blue</label>
-          </div><br />
-
+          </div><br>
           <div>
-            <input type="radio" id="green" name="color" value="green" />
+            <input type="radio" id="green" name="color" value="green">
             <label for="green">Green</label>
-          </div><br />
-        </fieldset><br />
+          </div><br><br>
+        </fieldset>
 
-       <!-- T-shirt Size -->
-      <div>
-         <label for="size">Select Size:</label>
-         <select id="size" name="size" required>
-           <option value="">--Select a Size--</option>
-           <option value="XS">XS</option>
-           <option value="S">S</option>
-           <option value="M">M</option>
-           <option value="L">L</option>
-           <option value="XL">XL</option>
-           <option value="XXL">XXL</option>
-        </select><br /><br />
-      </div>
+        <!-- Size -->
+        <div>
+          <label for="size">Select Size:</label>
+          <select id="size" name="size" required>
+            <option value="">--Select a Size--</option>
+            <option value="XS">XS</option>
+            <option value="S">S</option>
+            <option value="M">M</option>
+            <option value="L">L</option>
+            <option value="XL">XL</option>
+            <option value="XXL">XXL</option>
+          </select><br><br>
+        </div>
 
-      <!-- Submit button (optional for testing)-->
-       <div>
-         <button type="submit">Submit</button>
-       </div>
+        <!-- Submit -->
+        <div>
+          <button type="submit">Submit</button>
+        </div>
       </form>
     </main>
 
-
     <footer>
-      
       <h2>By Zadri Abdule</h2>
     </footer>
   </body>
 </html>
+
+

From 61df7d852b537b25884254d066308dadb302d11f Mon Sep 17 00:00:00 2001
From: Zadri Abdule <zadriabdule@gmail.com>
Date: Wed, 11 Feb 2026 16:38:04 +0000
Subject: [PATCH 07/10] Add pattern validation to name input field

Updated the name input field to enforce a pattern that disallows only spaces.
---
 Form-Controls/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f03c285af..a51092097 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,7 +17,7 @@ <h1>Product Pick</h1>
         <!-- Customer's name -->
         <div>
           <label for="name">Full Name:</label><br>
-          <input type="text" id="name" name="name" required minlength="2" autocomplete="name"><br>
+          <input type="text" id="name" name="name" pattern=".*\S.*" title="Name can not contain only spaces" required><br>
         </div>
 
         <!-- Email -->

From b8fec857c872bd43cce07ec7736d442274f83df1 Mon Sep 17 00:00:00 2001
From: Zadri Abdule <zadriabdule@gmail.com>
Date: Wed, 11 Feb 2026 17:14:03 +0000
Subject: [PATCH 08/10] Refactor T-shirt color radio buttons for clarity

---
 Form-Controls/index.html | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index a51092097..f7365400d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -29,18 +29,24 @@ <h1>Product Pick</h1>
         <!-- T-shirt Color -->
         <fieldset>
           <legend>Choose a T-shirt Color:</legend>
-          <div>
-            <input type="radio" id="red" name="color" value="red">
-            <label for="red">Red</label>
-          </div><br>
-          <div>
-            <input type="radio" id="blue" name="color" value="blue">
-            <label for="blue">Blue</label>
-          </div><br>
-          <div>
-            <input type="radio" id="green" name="color" value="green">
-            <label for="green">Green</label>
-          </div><br><br>
+          
+          <label>
+            <input type="radio" name="color" value="red">
+            Red
+          </label>
+            
+        
+          <label>
+            <input type="radio" name="color" value="blue">
+            Blue
+          </label>
+          
+          
+          <label>
+            <input type="radio" name="color" value="green">
+            Green
+          </label>
+          
         </fieldset>
 
         <!-- Size -->

From dfa1c8359db4e7795594c669d1f33272b7ce042e Mon Sep 17 00:00:00 2001
From: Zadri Abdule <zadriabdule@gmail.com>
Date: Wed, 11 Feb 2026 20:19:51 +0000
Subject: [PATCH 09/10] Require minimum length of 2 characters for name input

Updated input field for full name to require a minimum length of 2 characters.
---
 Form-Controls/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f7365400d..12e19523d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,7 +17,7 @@ <h1>Product Pick</h1>
         <!-- Customer's name -->
         <div>
           <label for="name">Full Name:</label><br>
-          <input type="text" id="name" name="name" pattern=".*\S.*" title="Name can not contain only spaces" required><br>
+          <input type="text" id="name" name="name" mainlength="2" pattern=".*\S.*" title="Name must be 2 characters cannot contain only spaces" required><br>
         </div>
 
         <!-- Email -->

From 07eb50b19fba2ff5ef5e7f1c959018547d969f36 Mon Sep 17 00:00:00 2001
From: Zadri Abdule <zadriabdule@gmail.com>
Date: Thu, 12 Feb 2026 00:52:47 +0000
Subject: [PATCH 10/10] Make T-shirt color radio buttons required

Updated radio button inputs to be required for color selection.
---
 Form-Controls/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 12e19523d..d380c276e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -31,19 +31,19 @@ <h1>Product Pick</h1>
           <legend>Choose a T-shirt Color:</legend>
           
           <label>
-            <input type="radio" name="color" value="red">
+            <input type="radio" name="color" value="red" required>
             Red
           </label>
             
         
           <label>
-            <input type="radio" name="color" value="blue">
+            <input type="radio" name="color" value="blue" required>
             Blue
           </label>
           
           
           <label>
-            <input type="radio" name="color" value="green">
+            <input type="radio" name="color" value="green" required>
             Green
           </label>