CodeYourFuture · bartoszkawiak · Sep 10, 2026 · Sep 10, 2026 · Sep 10, 2026 · Sep 15, 2026
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -10,6 +10,7 @@
 - [ ] 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
+
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -29,7 +30,7 @@ All fields are required.
 Do not write a form action for this project.
 
 > [!TIP]
-> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. 
+> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`.
 >
 > Now you have the regular expression, it's up to you to figure out how to use it in the context of an HTML form!
 
@@ -47,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
 - [ ] 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 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.
@@ -65,6 +66,7 @@ They ensure your code is reliable, maintainable, and presents a polished, credib
 - [ ] I commit often and push regularly to GitHub
 
 ## Resources
+
 - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
 - [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
 - [Lighthouse](https://developers.google.com/web/tools/lighthouse)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,27 +1,95 @@
-<!DOCTYPE html>
+<!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="description" content="T-shirt order form, pick your product." />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
   </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-->
+        <fieldset>
+          <legend>Order Form</legend>
+          <!--Name at least 2 non space characters-->
+          <label for="name">Name</label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            pattern=".*\S.*\S.*"
+            placeholder="James"
+            required
+          />
+          <!--EMAIL-->
+          <label for="email">Email Address</label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            required
+            placeholder="myemail@email.com"
+          />
+          <!--Color 3 options with select NO multiselect-->
+          <label for="colorOptions">Color</label>
+          <select id="colorOptions" name="color" required>
+            <option value="" disabled selected hidden>Choose here</option>
+            <option value="grey">Grey</option>
+            <option value="black">Black</option>
+            <option value="white">White</option>
+          </select>
+
+          <!--SIZE 6 options XS,S,M,L,XL,XXL-->
+          <fieldset>
+            <legend>Choose Size:</legend>
+
+            <div id="sizeDiv">
+              <div id="xsDiv">
+                <label for="xs">XS</label>
+                <input type="radio" id="xs" name="size" value="xs" required />
+              </div>
+
+              <div id="sDiv">
+                <label for="s">S</label>
+                <input type="radio" id="s" name="size" value="s" />
+              </div>
+
+              <div id="mDiv">
+                <label for="m">M</label>
+                <input type="radio" id="m" name="size" value="m" />
+              </div>
+
+              <div id="lDiv">
+                <label for="l">L</label>
+                <input type="radio" id="l" name="size" value="l" />
+              </div>
+
+              <div id="xlDiv">
+                <label for="xl">XL</label>
+                <input type="radio" id="xl" name="size" value="xl" />
+              </div>
+
+              <div id="xxlDiv">
+                <label for="xxl">XXL</label>
+                <input type="radio" id="xxl" name="size" value="xxl" />
+              </div>
+            </div>
+          </fieldset>
+        </fieldset>
+
+        <div id="buttonGroup">
+          <button type="submit">Submit</button>
+          <button type="reset">Reset</button>
+        </div>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Bartosz Kawiak</p>
     </footer>
   </body>
 </html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
@@ -0,0 +1,136 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: lightsalmon;
+}
+
+h1 {
+  justify-self: center;
+  font-size: clamp(1rem, 10vw, 3rem);
+  justify-content: center;
+}
+
+fieldset {
+  background-color: antiquewhite;
+  position: relative;
+  display: grid;
+  gap: 0.5rem;
+  max-width: 500px;
+  height: auto;
+  justify-self: center;
+  border: 2px solid;
+  margin: auto;
+}
+
+legend {
+  margin: auto;
+  padding: 1rem;
+  color: rgb(87, 0, 0);
+  font-size: larger;
+  text-decoration: underline;
+  text-decoration-color: black;
+  position: relative;
+  top: -10px;
+}
+select {
+  padding: 10px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+option {
+  max-width: 100%;
+}
+
+select:focus {
+  background-color: coral;
+  color: white;
+}
+
+input {
+  justify-self: center;
+  padding: 10px;
+}
+
+input:focus {
+  background-color: coral;
+  color: white;
+}
+
+input[type="text"]:valid,
+input[type="email"]:valid {
+  background-color: coral;
+}
+
+input:focus::placeholder {
+  color: white;
+}
+
+#sizeDiv {
+  display: grid;
+  grid-template-columns: repeat(2, 2fr);
+  justify-items: center;
+}
+
+input[type="radio"]:checked {
+  accent-color: coral;
+}
+
+label:active {
+  color: coral;
+}
+
+label {
+  justify-self: start;
+
+  font-weight: bold;
+}
+
+p {
+  justify-self: center;
+  font-style: italic;
+  font-size: large;
+  margin: auto;
+  padding: 10px;
+}
+
+#buttonGroup {
+  justify-self: center;
+  font-size: larger;
+  max-width: 500px;
+}
+
+button {
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: large;
+  background-color: rgba(209, 105, 68, 0.623);
+}
+
+button:hover {
+  color: rgb(114, 41, 15);
+  opacity: 0.9;
+}
+
+button:active {
+  color: red;
+  scale: 1.2;
+}
+
+footer {
+  opacity: 0.8;
+  font-style: italic;
+  scale: 0.8;
+  justify-content: center;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  #sizeDiv {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  #buttonGroup {
+    justify-self: center;
+    display: grid;
+    width: 100%;
+    justify-content: center;
+  }
+}