CodeYourFuture · d-odumosu · May 13, 2026 · May 13, 2026 · May 16, 2026 · May 20, 2026
diff --git 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
-- [ ] 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 ] Interpret requirements and check against a list of criteria
+- [ x ] Write a valid form
+- [ 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>}}>-->
 
 ## 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.
-- [ ] 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 ] My form is semantic HTML.
+- [ x ] All inputs have associated labels.
+- [ 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.
+- [ x ] I require one size from a defined set of 6 sizes.
 
 ### Developers must adhere to professional standards.
 
@@ -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
@@ -1,27 +1,121 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<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-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
-    </footer>
-  </body>
+    <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>
+        <h1>Product Pick</h1>
+</header>
+
+        <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)-->
+
+
+            <div class="form-group">
+                <label for="firstname">First Name </label>
+                <input
+                        type="text"
+                        id="firstname"
+                        name="firstname"
+                        required
+                        pattern="^[A-Za-z\s'-]{2,}$"
+                        title="first name must be more than 2 characters">
+            </div>
+
+            <div class="form-group">
+                <label for="lastname">Last Name</label>
+                <input
+                        type="text"
+                        id="lastname"
+                        name="lastname"
+                        required
+                        pattern="^[A-Za-z\s'-]{2,}$"
+                        title="last name must be more than 2 characters">
+            </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"
+                                required>
+                        <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 class="form-group">
+                <label for="sizing">Choose a size:</label>
+                <select id="sizing" name="size" required>
+                    <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>
+
+<footer>
+    <!-- change to your name-->
+        <p>By DAMILOLA ODUMOSU</p>
+</footer>
+</body>
 </html>
+
diff --git a/Form-Controls/main.css b/Form-Controls/main.css
@@ -0,0 +1,56 @@
+* {
+    box-sizing: border-box;
+    margin:0;
+}
+header, footer{
+    text-align:center;
+}
+h1{
+    font-size: 4rem;
+    font-weight: 900;
+    line-height: 1;
+}
+body{
+    font-family: "Lato", sans-serif;
+    font-size:18px;
+    background-color:#c1121f;
+    color:#fff;
+    line-height: 1.6;
+}
+
+form{
+    width: 50%;
+    background: #780000;
+    padding:45px;
+    margin: 100px auto;
+    border: 2px solid #9a031e;
+    border-radius:5px
+}
+.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;
+}