From 217bca054f14e5dd5842b385e8c277c9855e28d3 Mon Sep 17 00:00:00 2001
From: Tarawally <41825140+Tarawally@users.noreply.github.com.>
Date: Tue, 3 Jun 2025 21:44:57 +0000
Subject: [PATCH 1/4] T-shirt order form

---
 Form-Controls/index.html | 61 ++++++++++++++++++++++++++++++++++------
 1 file changed, 52 insertions(+), 9 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..84696c9c2 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,24 +4,67 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
-    <meta name="description" content="" />
+    <meta name="description" content="T-Shirt Order Form" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <header>
-      <h1>Product Pick</h1>
+      <h1 style="text-align: center;">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-->
+      <form style="background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 500px; margin: 20px auto;">
+        <!-- Customer Name Input -->
+        <div style="margin-bottom: 15px;">
+          <label for="customerName" style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Name:</label>
+          <input type="text" id="customerName" name="customerName" required minlength="2" placeholder="Enter your full name" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
+        </div>
+      
+        <!-- Customer Email Input -->
+        <div style="margin-bottom: 15px;">
+          <label for="emailAddress" style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Email:</label>
+          <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com" pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$" title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com)." style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
+        </div>
+      
+        <!-- T-Shirt Colour Selection -->
+        <fieldset style="margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; padding: 10px 15px;">
+          <legend style="padding: 0 10px; font-weight: bold; color: #333;">Choose T-Shirt Colour:</legend>
+          <div style="margin-bottom: 8px;">
+            <input type="radio" id="colorRed" name="shirtColor" value="red" required style="margin-right: 8px; vertical-align: middle;">
+            <label for="colorRed" style="font-weight: normal; display: inline;">Red</label>
+          </div>
+          <div style="margin-bottom: 8px;">
+            <input type="radio" id="colorBlue" name="shirtColor" value="blue" style="margin-right: 8px; vertical-align: middle;">
+            <label for="colorBlue" style="font-weight: normal; display: inline;">Blue</label>
+          </div>
+          <div>
+            <input type="radio" id="colorGreen" name="shirtColor" value="green" style="margin-right: 8px; vertical-align: middle;">
+            <label for="colorGreen" style="font-weight: normal; display: inline;">Green</label>
+          </div>
+        </fieldset>
+      
+        <!-- T-Shirt Size Selection -->
+        <div style="margin-bottom: 15px;">
+          <label for="shirtSize" style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Choose Size:</label>
+          <select id="shirtSize" name="shirtSize" required style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
+            <option value="">-- Please choose 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>
+        </div>
+      
+        <!-- Submit Section Button -->
+        <div>
+          <button type="submit" style="background-color: #2E7D32; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; display: block; width: auto; margin: 10px 0 0 0;">Place Order</button>
+        </div>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2 style="text-align: center;">By Samuel Tarawally</h2>
     </footer>
   </body>
 </html>
+  
\ No newline at end of file

From a53e1e033682e52d4e0a9d0854e869971630e23b Mon Sep 17 00:00:00 2001
From: Tarawally <41825140+Tarawally@users.noreply.github.com.>
Date: Tue, 3 Jun 2025 21:53:18 +0000
Subject: [PATCH 2/4] removed HTML inline style elements

---
 Form-Controls/index.html | 47 ++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 84696c9c2..b34ca402d 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -9,43 +9,43 @@
   </head>
   <body>
     <header>
-      <h1 style="text-align: center;">Product Pick</h1>
+      <h1>Product Pick</h1>
     </header>
     <main>
-      <form style="background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 500px; margin: 20px auto;">
+      <form>
         <!-- Customer Name Input -->
-        <div style="margin-bottom: 15px;">
-          <label for="customerName" style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Name:</label>
-          <input type="text" id="customerName" name="customerName" required minlength="2" placeholder="Enter your full name" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
+        <div>
+          <label for="customerName">Name:</label>
+          <input type="text" id="customerName" name="customerName" required minlength="2" placeholder="Enter your full name">
         </div>
       
         <!-- Customer Email Input -->
-        <div style="margin-bottom: 15px;">
-          <label for="emailAddress" style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Email:</label>
-          <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com" pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$" title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com)." style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
+        <div>
+          <label for="emailAddress">Email:</label>
+          <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com" pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$" title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
         </div>
       
         <!-- T-Shirt Colour Selection -->
-        <fieldset style="margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; padding: 10px 15px;">
-          <legend style="padding: 0 10px; font-weight: bold; color: #333;">Choose T-Shirt Colour:</legend>
-          <div style="margin-bottom: 8px;">
-            <input type="radio" id="colorRed" name="shirtColor" value="red" required style="margin-right: 8px; vertical-align: middle;">
-            <label for="colorRed" style="font-weight: normal; display: inline;">Red</label>
+        <fieldset>
+          <legend>Choose T-Shirt Colour:</legend>
+          <div>
+            <input type="radio" id="colourRed" name="shirtColour" value="red" required>
+            <label for="colourRed">Red</label>
           </div>
-          <div style="margin-bottom: 8px;">
-            <input type="radio" id="colorBlue" name="shirtColor" value="blue" style="margin-right: 8px; vertical-align: middle;">
-            <label for="colorBlue" style="font-weight: normal; display: inline;">Blue</label>
+          <div>
+            <input type="radio" id="colourBlue" name="shirtColour" value="blue">
+            <label for="colourBlue">Blue</label>
           </div>
           <div>
-            <input type="radio" id="colorGreen" name="shirtColor" value="green" style="margin-right: 8px; vertical-align: middle;">
-            <label for="colorGreen" style="font-weight: normal; display: inline;">Green</label>
+            <input type="radio" id="colourGreen" name="shirtColour" value="green">
+            <label for="colourGreen">Green</label>
           </div>
         </fieldset>
       
         <!-- T-Shirt Size Selection -->
-        <div style="margin-bottom: 15px;">
-          <label for="shirtSize" style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Choose Size:</label>
-          <select id="shirtSize" name="shirtSize" required style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
+        <div>
+          <label for="shirtSize">Choose Size:</label>
+          <select id="shirtSize" name="shirtSize" required>
             <option value="">-- Please choose a size --</option>
             <option value="xs">XS</option>
             <option value="s">S</option>
@@ -58,13 +58,12 @@ <h1 style="text-align: center;">Product Pick</h1>
       
         <!-- Submit Section Button -->
         <div>
-          <button type="submit" style="background-color: #2E7D32; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; display: block; width: auto; margin: 10px 0 0 0;">Place Order</button>
+          <button type="submit">Place Order</button>
         </div>
       </form>
     </main>
     <footer>
-      <h2 style="text-align: center;">By Samuel Tarawally</h2>
+      <h2>By Samuel Tarawally</h2>
     </footer>
   </body>
 </html>
-  
\ No newline at end of file

From 2c40071598674b283b6a54e2ece10a2bc1b74db0 Mon Sep 17 00:00:00 2001
From: Tarawally <41825140+Tarawally@users.noreply.github.com.>
Date: Tue, 3 Jun 2025 22:10:26 +0000
Subject: [PATCH 3/4] prettier code format

---
 Form-Controls/index.html | 128 ++++++++++++++++++++-------------------
 1 file changed, 67 insertions(+), 61 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index b34ca402d..f9f8c0161 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,69 +1,75 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
-    <meta name="description" content="T-Shirt Order Form" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
-        <!-- Customer Name Input -->
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>My form exercise</title>
+  <meta name="description" content="T-Shirt Order Form" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+
+<body>
+  <header>
+    <h1>Product Pick</h1>
+  </header>
+  <main>
+    <form>
+      <!-- Customer Name Input -->
+      <div>
+        <label for="customerName">Name:</label>
+        <input type="text" id="customerName" name="customerName" required minlength="2"
+          placeholder="Enter your full name">
+      </div>
+
+      <!-- Customer Email Input -->
+      <div>
+        <label for="emailAddress">Email:</label>
+        <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com"
+          pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$"
+          title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
+      </div>
+
+      <!-- T-Shirt Colour Selection -->
+      <fieldset>
+        <legend>Choose T-Shirt Colour:</legend>
         <div>
-          <label for="customerName">Name:</label>
-          <input type="text" id="customerName" name="customerName" required minlength="2" placeholder="Enter your full name">
+          <input type="radio" id="colourRed" name="shirtColour" value="red" required>
+          <label for="colourRed">Red</label>
         </div>
-      
-        <!-- Customer Email Input -->
         <div>
-          <label for="emailAddress">Email:</label>
-          <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com" pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$" title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
+          <input type="radio" id="colourBlue" name="shirtColour" value="blue">
+          <label for="colourBlue">Blue</label>
         </div>
-      
-        <!-- T-Shirt Colour Selection -->
-        <fieldset>
-          <legend>Choose T-Shirt Colour:</legend>
-          <div>
-            <input type="radio" id="colourRed" name="shirtColour" value="red" required>
-            <label for="colourRed">Red</label>
-          </div>
-          <div>
-            <input type="radio" id="colourBlue" name="shirtColour" value="blue">
-            <label for="colourBlue">Blue</label>
-          </div>
-          <div>
-            <input type="radio" id="colourGreen" name="shirtColour" value="green">
-            <label for="colourGreen">Green</label>
-          </div>
-        </fieldset>
-      
-        <!-- T-Shirt Size Selection -->
         <div>
-          <label for="shirtSize">Choose Size:</label>
-          <select id="shirtSize" name="shirtSize" required>
-            <option value="">-- Please choose 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>
+          <input type="radio" id="colourGreen" name="shirtColour" value="green">
+          <label for="colourGreen">Green</label>
         </div>
-      
-        <!-- Submit Section Button -->
-        <div>
-          <button type="submit">Place Order</button>
-        </div>
-      </form>
-    </main>
-    <footer>
-      <h2>By Samuel Tarawally</h2>
-    </footer>
-  </body>
-</html>
+      </fieldset>
+
+      <!-- T-Shirt Size Selection -->
+      <div>
+        <label for="shirtSize">Choose Size:</label>
+        <select id="shirtSize" name="shirtSize" required>
+          <option value="">-- Please choose 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>
+      </div>
+
+      <!-- Submit Section Button -->
+      <div>
+        <button type="submit">Place Order</button>
+      </div>
+    </form>
+  </main>
+  <footer>
+    <h2>By Samuel Tarawally</h2>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file

From e89d5e02b0ea6a2844bfad7328df2d4a2c71bf74 Mon Sep 17 00:00:00 2001
From: Tarawally <41825140+Tarawally@users.noreply.github.com.>
Date: Wed, 4 Jun 2025 17:00:53 +0000
Subject: [PATCH 4/4] refactor(form): replace <div> with <p> for better spacing
 & accessibility

---
 Form-Controls/index.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f9f8c0161..390f438b6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,39 +16,39 @@ <h1>Product Pick</h1>
   <main>
     <form>
       <!-- Customer Name Input -->
-      <div>
+      <p>
         <label for="customerName">Name:</label>
         <input type="text" id="customerName" name="customerName" required minlength="2"
           placeholder="Enter your full name">
-      </div>
+      </p>
 
       <!-- Customer Email Input -->
-      <div>
+      <p>
         <label for="emailAddress">Email:</label>
         <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com"
           pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$"
           title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
-      </div>
+      </p>
 
       <!-- T-Shirt Colour Selection -->
       <fieldset>
         <legend>Choose T-Shirt Colour:</legend>
-        <div>
+        <p>
           <input type="radio" id="colourRed" name="shirtColour" value="red" required>
           <label for="colourRed">Red</label>
-        </div>
-        <div>
+        </p>
+        <p>
           <input type="radio" id="colourBlue" name="shirtColour" value="blue">
           <label for="colourBlue">Blue</label>
-        </div>
-        <div>
+        </p>
+        <p>
           <input type="radio" id="colourGreen" name="shirtColour" value="green">
           <label for="colourGreen">Green</label>
-        </div>
+        </p>
       </fieldset>
 
       <!-- T-Shirt Size Selection -->
-      <div>
+      <p>
         <label for="shirtSize">Choose Size:</label>
         <select id="shirtSize" name="shirtSize" required>
           <option value="">-- Please choose a size --</option>
@@ -59,12 +59,12 @@ <h1>Product Pick</h1>
           <option value="xl">XL</option>
           <option value="xxl">XXL</option>
         </select>
-      </div>
+      </p>
 
       <!-- Submit Section Button -->
-      <div>
+      <p>
         <button type="submit">Place Order</button>
-      </div>
+      </p>
     </form>
   </main>
   <footer>
