London | 26-ITP-Sep | Bartosz Kawiak | Sprint 1 | Form Controls

Form-Controls/index.html

@@ -1,27 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <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" />
+    <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 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-->
+        <p>Choose Size:</p>
+
+        <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>
+
+        <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>

Form-Controls/styles.css

@@ -0,0 +1,139 @@
+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{
+   /* scale: 1.1; */
+    background-color: coral;
+    color: white;
+}
+
+input{
+    justify-self: center;
+    padding: 10px;
+}
+
+input:focus{
+   /* scale: 1.1; */
+    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; 
+
+    }
+}