ITP London Jan 2025| Samunta Sunuwar |Module Onboarding | Form Controls|WEEK 2

Form-Controls/README.md

@@ -4,10 +4,10 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
-- [ ] Test with Devtools
-- [ ] Refactor using Devtools
+- [x] Interpret requirements and check against a list of criteria
+- [x] Write a valid form
+- [x] Test with Devtools
+- [x] Refactor using Devtools
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -30,18 +30,17 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have used HTML only.
+- [x] I have used HTML only.
 - [x] I have not used any CSS or JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic html.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
-- [ ] 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] All inputs have associated labels.
+- [x] My Lighthouse Accessibility score is 100.
+- [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
+- [x] I require one size from a defined set of 6 sizes.
 
 ## Resources
 

Form-Controls/index.html

@@ -12,16 +12,64 @@
       <h1>Product Pick</h1>
     </header>
     <main>
+      <p>
+        <strong>Required fields are followed by</strong>
+        <strong><span aria-label="required">*</span></strong>.
+      </p>
       <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>
+        <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
+        2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
+        3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
+        4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
+        <section id="customer">
+          <fieldset>
+            <legend>Customer Details</legend>
+            <p>
+              <label for="name">Name:<strong><a aria-label="required">*</a></strong>
+              <input type="text" id="name" name="name" placeholder="Full Name" minlength="3" required>
+            </p>
+            <p>
+              <label for="email">Email:<strong><a aria-label="required">*</a></strong>
+              <input type="email" id="email" name="email" placeholder="Email Address" required>
+            </p>    
+            </fieldset>
+       </section>
+       <section id="order">
+        <fieldset>
+          <legend>Order Details</legend>
+            <p>
+              <label for="color">Please pick a color for the T-shirt:</label>
+              <select id="color" name="color">
+                  <option value="Black">Black</option>
+                  <option value="Gray">Gray</option>
+                  <option value="White">White</option>
+              </select> 
+            </p>
+            <p>
+                <label for="size">Please pick a size for the T-shirt:</label>
+                <select id="size" name="size">
+                    <option value="XS">Extra Small</option>
+                    <option value="S">Small</option>
+                    <option value="M">Medium</option>
+                    <option value="L">Large</option>
+                    <option value="XL">Extra Large</option>
+                    <option value="XXL">2XL</option>
+                </select>
+              </p>
+              <p>
+                <label for="number">Please input quantity you would like to order:<strong><a aria-label="required">*</a></strong></label>
+                <input type="number" id="number" name="number" min="1" max="10" required>
+              </p>
+          </fieldset>
+       </section>
+       </form>
+      <section id="buttons">
+        <button>Submit</button>
+      </section>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Samunta Sunuwar - Jan 2025 Cohort</h2>
     </footer>
   </body>
 </html>