CodeYourFuture · Giontr · May 10, 2026 · May 11, 2026 · May 11, 2026 · Sambuxc
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
@@ -34,18 +34,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 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 colour from a defined set of 3 colours.
+- [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
@@ -3,25 +3,77 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>T-shirt sales</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Product Pick</h1>
+      <h1>Welcome to T-shirt Sales</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-->
+         <h1>Verify your order </h1>
+        <!--Full Name -->
+        <div>
+        <label for="name">Full Name:</label>
+        <input type="text" id="name" name="name" required>
+        </div>
+
+        <!--Email -->
+        <div>
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required>
+        </div>
+
+        <!--T-shirt color -->
+        <div>
+        <label for="color">T-shirt color:</label>
+        <select id="color" name="color" required>
+          <option value="" disabled selected>Select a color</option>
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+          <option value="green">Green</option>
+        </select>
+        </div>
+
+        <!--T-shirt size -->
+        <div id="sizeBox">
+        <fieldset>
+          <legend>T-shirt size:</legend>
+          <div>
+          <label for="very-small">XS</label>
+          <input type="radio" id="very-small" name="size" value="very-small" required>
+          </div>
+          <div>
+          <label for="small">S</label>
+          <input type="radio" id="small" name="size" value="small" required>
+          </div>
+          <div>
+          <label for="medium">M</label>
+          <input type="radio" id="medium" name="size" value="medium" required>
+          </div>
+          <div>
+          <label for="large">L</label>
+          <input type="radio" id="large" name="size" value="large" required>
+          </div>
+          <div>
+          <label for="very-large">XL</label>
+          <input type="radio" id="very-large" name="size" value="very-large" required>
+          </div>
+        </fieldset>
+        </div>
+        <!--Submit button -->
+        <div>
+        <button type="submit">Submit</button>
+        </div>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Giorgi Natriashvili</p>
     </footer>
   </body>
 </html>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
@@ -0,0 +1,22 @@
+form > div {
+  margin-bottom: 10px;
+}
+
+input[type="radio"] {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px 0 0;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+#sizeBox > div {
+  padding: 8px 12px;       
+  min-height: 5px;        
+  display: flex;
+  align-items: center;
+}
+
+#sizeBox label {
+  cursor: pointer;
+  padding: 4px 0;
+}