Purple links

week-3/23-comments/index.html

@@ -32,6 +32,11 @@ <h1>Our t-shirts are amazing!</h1>
           <p>Add your comments and let us know what you think!</p>
 
           <!-- Your comment form goes here -->
+          <form action="get">
+            <label for="comment"><strong>Add your message</strong></label>
+            <textarea name="comment" id="comment" cols="40" rows="15"></textarea>
+            <button type="submit">Send comment</button>
+          </form>
         </div>
       </main>
     </div>

week-3/24-dietary/index.html

@@ -20,6 +20,14 @@ <h1>Codi Summit</h1>
 
         <form>
           <!-- Your multiple choice goes here -->
+          <fieldset>
+            <legend>Please select all of your dietary requirements:</legend>
+            <label><input type="checkbox" name="Halal" />Halal</label><br />
+            <label><input type="checkbox" name="Kosher" />Kosher</label><br />
+            <label><input type="checkbox" name="Vegeterian" />Vegeterian</label><br />
+            <label><input type="checkbox" name="vegan" />Vegan</label><br />
+            <label><input type="checkbox" name="Gluten free" />Gluten free</label>
+          </fieldset>
           <button type="submit">Submit</button>
         </form>
       </main>

week-3/25-shirt-size/index.html

@@ -29,7 +29,14 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
                 </div>
               </td>
               <td>
-                Medium
+                <form>
+                  <label class="screenreader" for="size">Choose a size</label>
+                  <select id="size">
+                    <option value="Small">Small</option>
+                    <option value="Medium" selected>Medium</option>
+                    <option value="Large">Large</option>
+                  </select>
+                </form>
               </td>
               <td>
                 1

week-3/25-shirt-size/styles.css

@@ -1 +1,8 @@
 /* Add your CSS below */
+
+.screenreader {
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  left: -2000px;
+  display: none;
+}

week-3/26-checkout-groups/index.html

@@ -38,7 +38,27 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
           <h2 class="checkout__title">Checkout</h2>
           <form method="GET" id="checkout-form" class="checkout__form">
             <!-- Add the form fields here -->
+            <fieldset name="first-form">
+              <legend>Billing Address</legend>
+              <label>Address Line 1 <input type="text" name="billing-address-1"/></label>
 
+              <label>Address Line 2 <input type="text" name="billing-address-2"/></label>
+
+              <label>Postcode <input type="text" name="billing-postcode"/></label>
+
+              <label>City <input type="text" name="billing-postcode"/></label>
+            </fieldset>
+
+            <fieldset name="second-form">
+              <legend>Delivery Address</legend>
+              <label>Address Line 1 <input type="text" name="Delivery-address-1"/></label>
+
+              <label>Address Line 2 <input type="text" name="delivery-address-2"/></label>
+
+              <label>Postcode <input type="text" name="delivery-address-postcode"/></label>
+
+              <label>City <input type="text" name="delivery-address-city"/></label>
+            </fieldset>
             <button type="submit">Complete Purchase</button>
           </form>
         </div>

week-3/27-attributes/index.html

@@ -42,26 +42,26 @@ <h2 class="checkout__title">Checkout</h2>
               <legend>Billing Address</legend>
               <p>
                 <label for="billing-address-1">Address Line 1</label>
-                <input type="text" name="billing-address-1" id="billing-address-1" />
+                <input type="text" name="billing-address-1" id="billing-address-1" required />
               </p>
               <p>
                 <label for="billing-address-2">Address Line 2</label>
                 <input type="text" name="billing-address-2" id="billing-address-2" />
               </p>
               <p>
                 <label for="billing-postcode">Postcode</label>
-                <input type="text" name="billing-postcode" id="billing-postcode" />
+                <input type="text" name="billing-postcode" id="billing-postcode" required />
               </p>
               <p>
                 <label for="billing-city">City</label>
-                <input type="text" name="billing-city" id="billing-city" />
+                <input type="text" name="billing-city" id="billing-city" required />
               </p>
             </fieldset>
             <fieldset>
               <legend>Delivery Address</legend>
               <p>
                 <label for="delivery-address-1">Address Line 1</label>
-                <input type="text" name="delivery-address-1" id="delivery-address-1" />
+                <input type="text" name="delivery-address-1" id="delivery-address-1" required />
               </p>
               <p>
                 <label for="delivery-address-2">Address Line 2</label>
@@ -73,15 +73,27 @@ <h2 class="checkout__title">Checkout</h2>
                   type="text"
                   name="delivery-address-postcode"
                   id="delivery-address-postcode"
+                  required
                 />
               </p>
               <p>
                 <label for="delivery-address-city">City</label>
-                <input type="text" name="delivery-address-city" id="delivery-address-city" />
+                <input
+                  type="text"
+                  name="delivery-address-city"
+                  id="delivery-address-city"
+                  required
+                />
               </p>
               <p>
                 <label for="delivery-country">Country</label>
-                <input type="text" name="delivery-country" id="delivery-country" />
+                <input
+                  type="text"
+                  name="delivery-country"
+                  id="delivery-country"
+                  value="United Kingdoms"
+                  readonly
+                />
               </p>
               <fieldset>
                 <legend>Delivery Options</legend>
@@ -91,6 +103,8 @@ <h2 class="checkout__title">Checkout</h2>
                     name="delivery-option"
                     id="delivery-option"
                     value="standard"
+                    disabled
+                    checked
                   />
                   Royal Mail
                 </label>

week-3/27-attributes/readme.md

@@ -20,3 +20,6 @@ You should not be able to type anything in the Country field. And the delivery o
 **Extra Credit**
 
 What's the difference between `readonly` and `disabled`? See if you can understand this [question and answer](https://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-ht).
+
+readonly: the user will be unable to edit it but can copy it and the field will be active
+disabled: the user will be unable to do any action also the field will be inactive

week-3/28-git-conflict/styles.css

@@ -1,6 +1,6 @@
 /* Add your own CSS code below */
 .link {
-  color: orangered;
+  color: fuchsia;
   font-weight: 700;
   text-decoration: none;
 }