ITP-2025-1 | Tam Huynh | Week 1 | Wireframe to Web Code

.github/pull_request_template.md

@@ -2,11 +2,11 @@
 
 You must title your PR like this:
 
-Region | Cohort | FirstName LastName | Sprint | Assignment Title
+Cohort | FirstName LastName | Week | Assignment Title
 
 For example,
 
-London | 25-ITP-May | Carol Owen | Sprint 1 | Alarm Clock
+ITP-2025-1 | Carol Owen | Week 1 | Alarm Clock
 
 Fill in the template below - remove any sections that don't apply.
 

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,18 @@ 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] My form is semantic html.
+- [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

@@ -17,11 +17,42 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+       <label for="name">What's your name?</label>
+       <br>
+       <input type="text" name="text" id="name" minlength="3" required value="yourName">
+       <br>
+
+       <label for="mail">What's your email?</label>
+       <br>
+       <input type="email" id="mail" name="mail" required placeholder="example@domain.com">
+
+       <p>What color do you like?</p>
+
+       <label for="black">black</label>
+       <input type="radio" id="black" name="answer" value="black">
+       <br>
+       <label for="white">white</label>
+       <input type="radio" id="white" name="answer" value="white">
+       <br>
+       <label for="blue">blue</label>
+       <input type="radio" id="blue" name="answer" value="blue">
+       <br>
+
+       <label for="size">What's size?</label>
+       <select id="size" name="size">
+        <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>
+
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Tam</h2>
     </footer>
   </body>
 </html>