From 29f9281053c1997f98d026cc3fd65aec65281b56 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Wed, 13 May 2026 17:04:01 +0100
Subject: [PATCH 1/8] feat:added firstname, lastname, email and shirt color.

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..2932f0224 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -17,6 +17,48 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+
+<!--        first and lastname (ensure it contains at least two non-space characters.)-->
+<!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+<!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+<!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
+      <div class="form">
+
+        <div class="form-group">
+          <label for="firstname">First Name</label>
+          <input type="text" id="firstname" name="firstname" required>
+        </div>
+
+        <div class="form-group">
+          <label for="lastname">Last Name</label>
+          <input type="text" id="lastname" name="lastname" required>
+        </div>
+
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" required>
+        </div>
+
+        <div class="form-group">
+          <fieldset>
+            <legend>Choose a shirt color:</legend>
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice1" name="shirt" value="blue">
+              <label for="choice1">Blue</label>
+            </div>
+
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice2" name="shirt" value="green">
+              <label for="choice2">Green</label>
+            </div>
+
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice3" name="shirt" value="yellow">
+              <label for="choice3">Yellow</label>
+            </div>
+          </fieldset>
+        </div>
+      </div>
       </form>
     </main>
     <footer>

From 694558fee87709af4dbaad676ec3b718a1a52895 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Wed, 13 May 2026 18:42:38 +0100
Subject: [PATCH 2/8] feat: all form fields completed.

---
 Form-Controls/index.html | 62 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 2932f0224..4c71d609e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -26,44 +26,92 @@ <h1>Product Pick</h1>
 
         <div class="form-group">
           <label for="firstname">First Name</label>
-          <input type="text" id="firstname" name="firstname" required>
+          <input
+                  type="text"
+                  id="firstname"
+                  name="firstname"
+                  required
+                  pattern=""
+                  title=""
+          >
         </div>
 
         <div class="form-group">
           <label for="lastname">Last Name</label>
-          <input type="text" id="lastname" name="lastname" required>
+          <input
+                  type="text"
+                  id="lastname"
+                  name="lastname"
+                  required
+                  pattern=""
+                  title="">
         </div>
 
         <div class="form-group">
           <label for="email">Email</label>
-          <input type="email" id="email" name="email" required>
+          <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  required
+                  pattern=""
+                  title="">
         </div>
 
         <div class="form-group">
           <fieldset>
             <legend>Choose a shirt color:</legend>
             <div class="form-group-fieldset">
-              <input type="radio" id="choice1" name="shirt" value="blue">
+              <input
+                      type="radio"
+                      id="choice1"
+                      name="shirt"
+                      value="blue"
+              >
               <label for="choice1">Blue</label>
             </div>
 
             <div class="form-group-fieldset">
-              <input type="radio" id="choice2" name="shirt" value="green">
+              <input
+                      type="radio"
+                      id="choice2"
+                      name="shirt"
+                      value="green"
+              >
               <label for="choice2">Green</label>
             </div>
 
             <div class="form-group-fieldset">
-              <input type="radio" id="choice3" name="shirt" value="yellow">
+              <input
+                      type="radio"
+                      id="choice3"
+                      name="shirt"
+                      value="yellow"
+              >
               <label for="choice3">Yellow</label>
             </div>
           </fieldset>
         </div>
+
+        <div class="form-group">
+          <label for="sizing">Choose a size:</label>
+          <select id="sizing" name="size">
+            <option value="">--Please choose an option--</option>
+            <option value="ex-small">XS</option>
+            <option value="small">S</option>
+            <option value="medium">M</option>
+            <option value="large">L</option>
+            <option value="ex-large">XL</option>
+            <option value="ex-ex-large">XXL</option>
+
+          </select>
+        </div>
       </div>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By DAMILOLA ODUMOSU</p>
     </footer>
   </body>
 </html>

From 5388ad50d974eec00510e11e435a50f438709e57 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 16 May 2026 14:37:31 +0100
Subject: [PATCH 3/8] feat: new branch created.

---
 Form-Controls/index.html | 218 ++++++++++++++++++++-------------------
 1 file changed, 114 insertions(+), 104 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4c71d609e..5bec2a962 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,117 +1,127 @@
 <!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="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <header>
-      <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-->
+<head>
+  <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" />
+  <link rel="stylesheet" href="main.css">
 
-<!--        first and lastname (ensure it contains at least two non-space characters.)-->
-<!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
-<!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
-<!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
-      <div class="form">
+</head>
+<body>
+<header>
+  <div class="container">
+    <h1>Product Pick</h1>
+  </div>
+</header>
+<main>
+  <div class="container">
+    <form>
+      <!-- write your html here-->
+      <!--
+        try writing out the requirements first as comments
+      this will also help you fill in your PR message later-->
 
-        <div class="form-group">
-          <label for="firstname">First Name</label>
-          <input
-                  type="text"
-                  id="firstname"
-                  name="firstname"
-                  required
-                  pattern=""
-                  title=""
-          >
-        </div>
+      <!--        first and lastname (ensure it contains at least two non-space characters.)-->
+      <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+      <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+      <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
 
-        <div class="form-group">
-          <label for="lastname">Last Name</label>
-          <input
-                  type="text"
-                  id="lastname"
-                  name="lastname"
-                  required
-                  pattern=""
-                  title="">
-        </div>
 
-        <div class="form-group">
-          <label for="email">Email</label>
-          <input
-                  type="email"
-                  id="email"
-                  name="email"
-                  required
-                  pattern=""
-                  title="">
-        </div>
+      <div class="form-group">
+        <label for="firstname">First Name</label>
+        <input
+                type="text"
+                id="firstname"
+                name="firstname"
+                required
+                pattern=""
+                title=""
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="lastname">Last Name</label>
+        <input
+                type="text"
+                id="lastname"
+                name="lastname"
+                required
+                pattern=""
+                title="">
+      </div>
+
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                pattern=""
+                title="">
+      </div>
 
-        <div class="form-group">
-          <fieldset>
-            <legend>Choose a shirt color:</legend>
-            <div class="form-group-fieldset">
-              <input
-                      type="radio"
-                      id="choice1"
-                      name="shirt"
-                      value="blue"
-              >
-              <label for="choice1">Blue</label>
-            </div>
+      <div class="form-group">
+        <fieldset>
+          <legend>Choose a shirt color:</legend>
+          <div class="form-group-fieldset">
+            <input
+                    type="radio"
+                    id="choice1"
+                    name="shirt"
+                    value="blue"
+            >
+            <label for="choice1">Blue</label>
+          </div>
 
-            <div class="form-group-fieldset">
-              <input
-                      type="radio"
-                      id="choice2"
-                      name="shirt"
-                      value="green"
-              >
-              <label for="choice2">Green</label>
-            </div>
+          <div class="form-group-fieldset">
+            <input
+                    type="radio"
+                    id="choice2"
+                    name="shirt"
+                    value="green"
+            >
+            <label for="choice2">Green</label>
+          </div>
 
-            <div class="form-group-fieldset">
-              <input
-                      type="radio"
-                      id="choice3"
-                      name="shirt"
-                      value="yellow"
-              >
-              <label for="choice3">Yellow</label>
-            </div>
-          </fieldset>
-        </div>
+          <div class="form-group-fieldset">
+            <input
+                    type="radio"
+                    id="choice3"
+                    name="shirt"
+                    value="yellow"
+            >
+            <label for="choice3">Yellow</label>
+          </div>
+        </fieldset>
+      </div>
 
-        <div class="form-group">
-          <label for="sizing">Choose a size:</label>
-          <select id="sizing" name="size">
-            <option value="">--Please choose an option--</option>
-            <option value="ex-small">XS</option>
-            <option value="small">S</option>
-            <option value="medium">M</option>
-            <option value="large">L</option>
-            <option value="ex-large">XL</option>
-            <option value="ex-ex-large">XXL</option>
+      <div class="form-group">
+        <label for="sizing">Choose a size:</label>
+        <select id="sizing" name="size">
+          <option value="">--Please choose an option--</option>
+          <option value="ex-small">XS</option>
+          <option value="small">S</option>
+          <option value="medium">M</option>
+          <option value="large">L</option>
+          <option value="ex-large">XL</option>
+          <option value="ex-ex-large">XXL</option>
 
-          </select>
-        </div>
+        </select>
       </div>
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <p>By DAMILOLA ODUMOSU</p>
-    </footer>
-  </body>
+      <button>Submit</button>
+    </form>
+  </div>
+</main>
+
+<footer>
+  <!-- change to your name-->
+  <div class="container">
+    <p>By DAMILOLA ODUMOSU</p>
+  </div>
+</footer>
+</body>
 </html>
+

From cfb77a3b21d9b102ba9e497879a7c655a0dcb4e6 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Wed, 20 May 2026 15:20:03 +0100
Subject: [PATCH 4/8] feat: for validation completed for names and email using
 pattern attribute.

---
 Form-Controls/README.md  | 28 ++++++++++++++--------------
 Form-Controls/index.html | 24 ++++++++++++------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index 844572470..3c82ee9bb 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
+- [ x ] Interpret requirements and check against a list of criteria
+- [ x ] Write a valid form
 - [ ] Test with Devtools
 - [ ] Refactor using Devtools
-- [ ] Use version control by committing often and pushing regularly to GitHub
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [ x ] Use version control by committing often and pushing regularly to GitHub
+- [ x ] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -22,30 +22,30 @@ Writing that out as a series of questions to ask yourself:
 
 1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
 2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
-3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
+3. What color should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
 4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
 
 All fields are required.
 Do not write a form action for this project.
 
-## Acceptnce Criteria
+## Acceptance Criteria
 
 ### Developers must test their work.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have only used HTML and CSS.
-- [ ] I have not used any JavaScript.
+- [ x ] I have only used HTML and CSS.
+- [ x ] I have not used any JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic HTML.
-- [ ] All inputs have associated labels.
+- [ x ] My form is semantic HTML.
+- [ x ] All inputs have associated labels.
 - [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. 
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [ x ] I require a valid name. 
+- [ x ] I require a valid email.
+- [ x ] I require one color from a defined set of 3 colors.
+- [ x ] I require one size from a defined set of 6 sizes.
 
 ### Developers must adhere to professional standards.
 
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 5bec2a962..528fc9e46 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"/>
   <link rel="stylesheet" href="main.css">
 
 </head>
@@ -18,7 +18,7 @@ <h1>Product Pick</h1>
 <main>
   <div class="container">
     <form>
-      <!-- write your html here-->
+      <!-- write your HTML here-->
       <!--
         try writing out the requirements first as comments
       this will also help you fill in your PR message later-->
@@ -30,14 +30,14 @@ <h1>Product Pick</h1>
 
 
       <div class="form-group">
-        <label for="firstname">First Name</label>
+        <label for="firstname">First Name </label>
         <input
                 type="text"
                 id="firstname"
                 name="firstname"
                 required
-                pattern=""
-                title=""
+                pattern="^[A-Za-z]{2,15}$"
+                title="first name must be between 2 and 15 characters"
         >
       </div>
 
@@ -48,8 +48,8 @@ <h1>Product Pick</h1>
                 id="lastname"
                 name="lastname"
                 required
-                pattern=""
-                title="">
+                pattern="^[A-Za-z]{2,15}$"
+                title="last name must be between 2 and 15 characters">
       </div>
 
       <div class="form-group">
@@ -59,8 +59,8 @@ <h1>Product Pick</h1>
                 id="email"
                 name="email"
                 required
-                pattern=""
-                title="">
+                pattern="^[^\s@]+@[^\s@]\.(com|co\.uk)$"
+                title="Enter a valid email">
       </div>
 
       <div class="form-group">

From 64cacffa18426a53be3b01cec20a27a79befedc2 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Wed, 20 May 2026 16:28:10 +0100
Subject: [PATCH 5/8] refactored: included type = 'submit in submit button',
 removed the pattern attribute in email

---
 Form-Controls/README.md  |  14 +--
 Form-Controls/index.html | 201 +++++++++++++++++++--------------------
 2 files changed, 107 insertions(+), 108 deletions(-)

diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index 3c82ee9bb..6d8b6f468 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -6,8 +6,8 @@
 
 - [ x ] Interpret requirements and check against a list of criteria
 - [ x ] Write a valid form
-- [ ] Test with Devtools
-- [ ] Refactor using Devtools
+- [ x ] Test with Devtools
+- [ x ] Refactor using Devtools
 - [ x ] Use version control by committing often and pushing regularly to GitHub
 - [ x ] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{<objectives>}}>-->
@@ -41,7 +41,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
 
 - [ x ] My form is semantic HTML.
 - [ x ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
+- [ x ] My Lighthouse Accessibility score is 100.
 - [ x ] I require a valid name. 
 - [ x ] I require a valid email.
 - [ x ] I require one color from a defined set of 3 colors.
@@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [ x ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [ x ] My code is consistently formatted
+- [ x ] My page content is free of typos and grammatical mistakes
+- [ x ] I commit often and push regularly to GitHub
 
 ## Resources
 - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 528fc9e46..af48de985 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,126 +1,125 @@
 <!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=""/>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <link rel="stylesheet" href="main.css">
+    <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"/>
+    <link rel="stylesheet" href="main.css">
 
 </head>
 <body>
 <header>
-  <div class="container">
-    <h1>Product Pick</h1>
-  </div>
+    <div class="container">
+        <h1>Product Pick</h1>
+    </div>
 </header>
 <main>
-  <div class="container">
-    <form>
-      <!-- write your HTML here-->
-      <!--
-        try writing out the requirements first as comments
-      this will also help you fill in your PR message later-->
+    <div class="container">
+        <form>
+            <!-- write your HTML here-->
+            <!--
+              try writing out the requirements first as comments
+            this will also help you fill in your PR message later-->
 
-      <!--        first and lastname (ensure it contains at least two non-space characters.)-->
-      <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
-      <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
-      <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
+            <!--        first and lastname (ensure it contains at least two non-space characters.)-->
+            <!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+            <!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+            <!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
 
 
-      <div class="form-group">
-        <label for="firstname">First Name </label>
-        <input
-                type="text"
-                id="firstname"
-                name="firstname"
-                required
-                pattern="^[A-Za-z]{2,15}$"
-                title="first name must be between 2 and 15 characters"
-        >
-      </div>
+            <div class="form-group">
+                <label for="firstname">First Name </label>
+                <input
+                        type="text"
+                        id="firstname"
+                        name="firstname"
+                        required
+                        pattern="^[A-Za-z]{2,15}$"
+                        title="first name must be between 2 and 15 characters"
+                >
+            </div>
 
-      <div class="form-group">
-        <label for="lastname">Last Name</label>
-        <input
-                type="text"
-                id="lastname"
-                name="lastname"
-                required
-                pattern="^[A-Za-z]{2,15}$"
-                title="last name must be between 2 and 15 characters">
-      </div>
+            <div class="form-group">
+                <label for="lastname">Last Name</label>
+                <input
+                        type="text"
+                        id="lastname"
+                        name="lastname"
+                        required
+                        pattern="^[A-Za-z]{2,15}$"
+                        title="last name must be between 2 and 15 characters">
+            </div>
 
-      <div class="form-group">
-        <label for="email">Email</label>
-        <input
-                type="email"
-                id="email"
-                name="email"
-                required
-                pattern="^[^\s@]+@[^\s@]\.(com|co\.uk)$"
-                title="Enter a valid email">
-      </div>
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        required>
 
-      <div class="form-group">
-        <fieldset>
-          <legend>Choose a shirt color:</legend>
-          <div class="form-group-fieldset">
-            <input
-                    type="radio"
-                    id="choice1"
-                    name="shirt"
-                    value="blue"
-            >
-            <label for="choice1">Blue</label>
-          </div>
+            </div>
 
-          <div class="form-group-fieldset">
-            <input
-                    type="radio"
-                    id="choice2"
-                    name="shirt"
-                    value="green"
-            >
-            <label for="choice2">Green</label>
-          </div>
+            <div class="form-group">
+                <fieldset>
+                    <legend>Choose a shirt color:</legend>
+                    <div class="form-group-fieldset">
+                        <input
+                                type="radio"
+                                id="choice1"
+                                name="shirt"
+                                value="blue"
+                        >
+                        <label for="choice1">Blue</label>
+                    </div>
 
-          <div class="form-group-fieldset">
-            <input
-                    type="radio"
-                    id="choice3"
-                    name="shirt"
-                    value="yellow"
-            >
-            <label for="choice3">Yellow</label>
-          </div>
-        </fieldset>
-      </div>
+                    <div class="form-group-fieldset">
+                        <input
+                                type="radio"
+                                id="choice2"
+                                name="shirt"
+                                value="green"
+                        >
+                        <label for="choice2">Green</label>
+                    </div>
 
-      <div class="form-group">
-        <label for="sizing">Choose a size:</label>
-        <select id="sizing" name="size">
-          <option value="">--Please choose an option--</option>
-          <option value="ex-small">XS</option>
-          <option value="small">S</option>
-          <option value="medium">M</option>
-          <option value="large">L</option>
-          <option value="ex-large">XL</option>
-          <option value="ex-ex-large">XXL</option>
+                    <div class="form-group-fieldset">
+                        <input
+                                type="radio"
+                                id="choice3"
+                                name="shirt"
+                                value="yellow"
+                        >
+                        <label for="choice3">Yellow</label>
+                    </div>
+                </fieldset>
+            </div>
 
-        </select>
-      </div>
-      <button>Submit</button>
-    </form>
-  </div>
+            <div class="form-group">
+                <label for="sizing">Choose a size:</label>
+                <select id="sizing" name="size">
+                    <option value="">--Please choose an option--</option>
+                    <option value="ex-small">XS</option>
+                    <option value="small">S</option>
+                    <option value="medium">M</option>
+                    <option value="large">L</option>
+                    <option value="ex-large">XL</option>
+                    <option value="ex-ex-large">XXL</option>
+
+                </select>
+            </div>
+            <button type="submit">Submit</button>
+        </form>
+    </div>
 </main>
 
 <footer>
-  <!-- change to your name-->
-  <div class="container">
-    <p>By DAMILOLA ODUMOSU</p>
-  </div>
+    <!-- change to your name-->
+    <div class="container">
+        <p>By DAMILOLA ODUMOSU</p>
+    </div>
 </footer>
 </body>
 </html>

From b01c11e79a47a0baea79496abffca9f6cda4e327 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Wed, 20 May 2026 23:29:43 +0100
Subject: [PATCH 6/8] refactored: refactored pattern attribute to accept
 hyphenated names

---
 Form-Controls/index.html | 10 +++++-----
 Form-Controls/main.css   | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 Form-Controls/main.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index af48de985..f78f43719 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -7,7 +7,6 @@
     <meta name="description" content=""/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" href="main.css">
-
 </head>
 <body>
 <header>
@@ -16,7 +15,7 @@ <h1>Product Pick</h1>
     </div>
 </header>
 <main>
-    <div class="container">
+    <div class="container main-container">
         <form>
             <!-- write your HTML here-->
             <!--
@@ -36,7 +35,7 @@ <h1>Product Pick</h1>
                         id="firstname"
                         name="firstname"
                         required
-                        pattern="^[A-Za-z]{2,15}$"
+                        pattern="^[A-Za-z\s'-]{2,}$"
                         title="first name must be between 2 and 15 characters"
                 >
             </div>
@@ -48,7 +47,7 @@ <h1>Product Pick</h1>
                         id="lastname"
                         name="lastname"
                         required
-                        pattern="^[A-Za-z]{2,15}$"
+                        pattern="^[A-Za-z\s'-]{2,}$"
                         title="last name must be between 2 and 15 characters">
             </div>
 
@@ -71,6 +70,7 @@ <h1>Product Pick</h1>
                                 id="choice1"
                                 name="shirt"
                                 value="blue"
+                                required
                         >
                         <label for="choice1">Blue</label>
                     </div>
@@ -99,7 +99,7 @@ <h1>Product Pick</h1>
 
             <div class="form-group">
                 <label for="sizing">Choose a size:</label>
-                <select id="sizing" name="size">
+                <select id="sizing" name="size" required>
                     <option value="">--Please choose an option--</option>
                     <option value="ex-small">XS</option>
                     <option value="small">S</option>
diff --git a/Form-Controls/main.css b/Form-Controls/main.css
new file mode 100644
index 000000000..a824e952a
--- /dev/null
+++ b/Form-Controls/main.css
@@ -0,0 +1,34 @@
+*{
+    box-sizing: border-box;
+}
+
+body{
+    margin:0;
+    padding:0;
+    font-family: "Times New Roman", Times, serif;
+    /*line-height:;*/
+    background:#403d39;
+}
+header, footer{
+    background:#ccc5b9;
+}
+/*footer{*/
+/*    */
+/*}*/
+.main-container{
+    background:#edede9;
+    padding:40px 30px;
+}
+.container{
+    /*width:;*/
+    margin: 0 auto;
+}
+h1{
+    font-size:2rem;
+    text-align:center;
+    margin-top: 0;
+    padding:30px 0;
+}
+.form-group{
+    margin-bottom:10px;
+}

From 22f0855f54c5afc6fa8c4425d58e391be3ab81e7 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 23 May 2026 19:37:27 +0100
Subject: [PATCH 7/8] feat: CSS styling completed.

---
 Form-Controls/index.html | 21 +++++--------
 Form-Controls/main.css   | 67 ++++++++++++++++++++++++++--------------
 2 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f78f43719..1113cec36 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -7,15 +7,16 @@
     <meta name="description" content=""/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" href="main.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
 </head>
 <body>
 <header>
-    <div class="container">
         <h1>Product Pick</h1>
-    </div>
 </header>
-<main>
-    <div class="container main-container">
+
         <form>
             <!-- write your HTML here-->
             <!--
@@ -36,8 +37,7 @@ <h1>Product Pick</h1>
                         name="firstname"
                         required
                         pattern="^[A-Za-z\s'-]{2,}$"
-                        title="first name must be between 2 and 15 characters"
-                >
+                        title="first name must be more than 2 characters">
             </div>
 
             <div class="form-group">
@@ -48,7 +48,7 @@ <h1>Product Pick</h1>
                         name="lastname"
                         required
                         pattern="^[A-Za-z\s'-]{2,}$"
-                        title="last name must be between 2 and 15 characters">
+                        title="last name must be more than 2 characters">
             </div>
 
             <div class="form-group">
@@ -70,8 +70,7 @@ <h1>Product Pick</h1>
                                 id="choice1"
                                 name="shirt"
                                 value="blue"
-                                required
-                        >
+                                required>
                         <label for="choice1">Blue</label>
                     </div>
 
@@ -112,14 +111,10 @@ <h1>Product Pick</h1>
             </div>
             <button type="submit">Submit</button>
         </form>
-    </div>
-</main>
 
 <footer>
     <!-- change to your name-->
-    <div class="container">
         <p>By DAMILOLA ODUMOSU</p>
-    </div>
 </footer>
 </body>
 </html>
diff --git a/Form-Controls/main.css b/Form-Controls/main.css
index a824e952a..3dac10013 100644
--- a/Form-Controls/main.css
+++ b/Form-Controls/main.css
@@ -1,34 +1,55 @@
-*{
+* {
     box-sizing: border-box;
-}
-
-body{
     margin:0;
-    padding:0;
-    font-family: "Times New Roman", Times, serif;
-    /*line-height:;*/
-    background:#403d39;
 }
 header, footer{
-    background:#ccc5b9;
+    text-align:center;
 }
-/*footer{*/
-/*    */
-/*}*/
-.main-container{
-    background:#edede9;
-    padding:40px 30px;
+h1{
+    font-size: 4rem;
+    font-weight: 900;
+    line-height: 1;
 }
-.container{
-    /*width:;*/
-    margin: 0 auto;
+body{
+    font-family: "Lato", sans-serif;
+    font-size:18px;
+    background-color:#c1121f;
+    color:#fff;
+    line-height: 1.6;
 }
-h1{
-    font-size:2rem;
-    text-align:center;
-    margin-top: 0;
-    padding:30px 0;
+
+form{
+    width: 50%;
+    background: #780000;
+    padding:45px;
+    margin: 100px auto;
+    border: 2px solid #9a031e;
 }
 .form-group{
     margin-bottom:10px;
 }
+label {
+    text-transform: uppercase;
+    margin-right:10px;
+}
+input {
+    background: #fefae0;
+    color: #880d1e;
+    border: 2px solid #f26a8d;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+}
+
+button{
+    cursor: pointer;
+    background-color:#e63946;
+    padding: 1em 1.5em;
+    border: 0;
+    border-radius: 16px;
+}
+p{
+    text-transform:lowercase;
+    font-family: "Pinyon Script", cursive;
+    font-weight: 400;
+    font-style: normal;
+}
\ No newline at end of file

From 202157bf235c45b84f9413c8ba6179ee4a726e46 Mon Sep 17 00:00:00 2001
From: d-odumosu <dt.odumosu@gmail.com>
Date: Sat, 23 May 2026 19:44:53 +0100
Subject: [PATCH 8/8] feat: CSS styling, added border radius to the form.

---
 Form-Controls/main.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/main.css b/Form-Controls/main.css
index 3dac10013..6531a9ef2 100644
--- a/Form-Controls/main.css
+++ b/Form-Controls/main.css
@@ -24,6 +24,7 @@ form{
     padding:45px;
     margin: 100px auto;
     border: 2px solid #9a031e;
+    border-radius:5px
 }
 .form-group{
     margin-bottom:10px;
@@ -52,4 +53,4 @@ p{
     font-family: "Pinyon Script", cursive;
     font-weight: 400;
     font-style: normal;
-}
\ No newline at end of file
+}