From 84e4a52d84da95ec91476528ec93b53ff5389694 Mon Sep 17 00:00:00 2001
From: Epunch <msm.razagh@gmail.com>
Date: Sun, 5 Oct 2025 13:53:05 +0200
Subject: [PATCH 1/7] update the form

---
 Form-Controls/index.html | 42 ++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..a580eaa44 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,7 +4,6 @@
     <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" />
   </head>
   <body>
@@ -13,15 +12,42 @@ <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-->
+        <!-- The user should be able to enter their name -->
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" placeholder="Enter your name" required />
+        <br /><br />
+
+        <!-- The user should be able to choose a product -->
+        <label for="product">Choose a product:</label>
+        <select id="product" name="product" required>
+          <option value="">--Select one--</option>
+          <option value="laptop">Laptop</option>
+          <option value="phone">Phone</option>
+          <option value="headphones">Headphones</option>
+        </select>
+        <br /><br />
+
+        <!-- The user should be able to select a delivery method -->
+        <p>Delivery Method:</p>
+        <label>
+          <input type="radio" name="delivery" value="pickup" required /> Pick up
+        </label>
+        <label>
+          <input type="radio" name="delivery" value="delivery" /> Home delivery
+        </label>
+        <br /><br />
+
+        <!-- The user should be able to write comments -->
+        <label for="comments">Comments:</label><br />
+        <textarea id="comments" name="comments" rows="4" cols="30" placeholder="Your comments here..."></textarea>
+        <br /><br />
+
+        <!-- The user should be able to submit the form -->
+        <button type="submit">Submit</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Meysam Razagh</h2>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file

From 0be7955e5bda8c0010de8513d45649f84d9f47c4 Mon Sep 17 00:00:00 2001
From: Epunch <msm.razagh@gmail.com>
Date: Sun, 5 Oct 2025 14:05:23 +0200
Subject: [PATCH 2/7] update the form

---
 Form-Controls/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index a580eaa44..a718eeb4f 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -48,6 +48,7 @@ <h1>Product Pick</h1>
     </main>
     <footer>
       <h2>By Meysam Razagh</h2>
+      <!-- joke joke joke -->
     </footer>
   </body>
 </html>
\ No newline at end of file

From 8336e42c2dccabcb36934b23a57cdc385f976fbc Mon Sep 17 00:00:00 2001
From: Meysam Razagh <48224515+Epunch@users.noreply.github.com>
Date: Wed, 22 Oct 2025 17:59:53 +0200
Subject: [PATCH 3/7] Refactor form layout and add Tailwind CSS styling

Updated the title and added Tailwind CSS for styling. Enhanced the form layout and added a confirmation message upon submission.
---
 Form-Controls/index.html | 248 ++++++++++++++++++++++++++++++++-------
 1 file changed, 205 insertions(+), 43 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index a718eeb4f..c3fa8c0b2 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -3,52 +3,214 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>My Form Exercise</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Configure Tailwind to use Inter font and rounded elements -->
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+            },
+            colors: {
+                'brand-primary': '#4f46e5', // Custom color for a subtle change
+            }
+          },
+        },
+      }
+    </script>
+    <style>
+      /* Apply a clean, readable font globally */
+      body {
+        font-family: 'Inter', sans-serif;
+      }
+      /* Custom CSS Change: Add a slight scale effect on button hover */
+      #product-form button[type="submit"]:hover {
+        transform: scale(1.01);
+      }
+    </style>
   </head>
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
-        <!-- The user should be able to enter their name -->
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="name" placeholder="Enter your name" required />
-        <br /><br />
-
-        <!-- The user should be able to choose a product -->
-        <label for="product">Choose a product:</label>
-        <select id="product" name="product" required>
-          <option value="">--Select one--</option>
-          <option value="laptop">Laptop</option>
-          <option value="phone">Phone</option>
-          <option value="headphones">Headphones</option>
-        </select>
-        <br /><br />
-
-        <!-- The user should be able to select a delivery method -->
-        <p>Delivery Method:</p>
-        <label>
-          <input type="radio" name="delivery" value="pickup" required /> Pick up
-        </label>
-        <label>
-          <input type="radio" name="delivery" value="delivery" /> Home delivery
-        </label>
-        <br /><br />
-
-        <!-- The user should be able to write comments -->
-        <label for="comments">Comments:</label><br />
-        <textarea id="comments" name="comments" rows="4" cols="30" placeholder="Your comments here..."></textarea>
-        <br /><br />
-
-        <!-- The user should be able to submit the form -->
-        <button type="submit">Submit</button>
+  <body class="bg-gray-50 flex flex-col items-center justify-center min-h-screen p-4">
+    <main id="main-content" class="w-full max-w-md my-8">
+      
+      <!-- 1. Changed the header -->
+      <header class="text-center mb-8 p-4 bg-white rounded-xl shadow-lg">
+        <h1 class="text-5xl font-black tracking-tight text-brand-primary">The Product Picker App</h1>
+        <p class="text-gray-600 mt-2 text-lg font-medium">Select your desired product and confirm your delivery details.</p>
+      </header>
+
+      <!-- 2. Added section for "article image" changes (placeholder for context) -->
+      <div class="mb-8 p-6 bg-yellow-50 rounded-xl border-2 border-dashed border-yellow-300 shadow-inner text-center">
+        <p class="text-yellow-800 font-semibold mb-2">Image Placeholder (Related to "Changed the article images")</p>
+        <img 
+            src="https://placehold.co/400x150/f9fafb/374151?text=Product+Hero+Image" 
+            alt="Placeholder for product hero image" 
+            class="w-full h-auto rounded-lg shadow-md"
+            onerror="this.onerror=null; this.src='https://placehold.co/400x150/f9fafb/374151?text=Image+Unavailable';"
+        />
+      </div>
+
+      <!-- The form is wrapped in a modern card layout -->
+      <form id="product-form" class="bg-white p-8 shadow-2xl rounded-xl border border-gray-100 space-y-6">
+        
+        <!-- Field 1: Name Input -->
+        <div>
+          <label for="name" class="block text-sm font-semibold text-gray-700 mb-1">Name:</label>
+          <input 
+            type="text" 
+            id="name" 
+            name="name" 
+            placeholder="Enter your full name"
+            required 
+            class="mt-1 block w-full px-4 py-2 border-2 border-gray-200 rounded-xl shadow-sm focus:ring-brand-primary focus:border-brand-primary transition duration-200"
+          />
+        </div>
+
+        <!-- Field 2: Product Selection (Dropdown) -->
+        <div>
+          <label for="product" class="block text-sm font-semibold text-gray-700 mb-1">Choose a product:</label>
+          <select 
+            id="product" 
+            name="product" 
+            required 
+            class="mt-1 block w-full px-4 py-2 border-2 border-gray-200 rounded-xl shadow-sm bg-white focus:ring-brand-primary focus:border-brand-primary transition duration-200"
+          >
+            <option value="" disabled selected>-- Select one --</option>
+            <option value="laptop">Laptop</option>
+            <option value="phone">Phone</option>
+            <option value="headphones">Headphones</option>
+          </select>
+        </div>
+
+        <!-- Field 3: Delivery Method (Radio Buttons) -->
+        <fieldset class="p-4 border border-gray-200 rounded-xl">
+          <legend class="text-sm font-semibold text-gray-700">Delivery Method:</legend>
+          <div class="mt-2 space-y-2">
+            
+            <div class="flex items-center">
+              <input 
+                type="radio" 
+                id="pickup" 
+                name="delivery" 
+                value="pickup" 
+                required 
+                class="h-4 w-4 text-brand-primary border-gray-300 focus:ring-brand-primary"
+              />
+              <label for="pickup" class="ml-3 block text-sm font-medium text-gray-700">
+                Pick up
+              </label>
+            </div>
+            
+            <div class="flex items-center">
+              <input 
+                type="radio" 
+                id="home_delivery" 
+                name="delivery" 
+                value="delivery" 
+                class="h-4 w-4 text-brand-primary border-gray-300 focus:ring-brand-primary"
+              />
+              <label for="home_delivery" class="ml-3 block text-sm font-medium text-gray-700">
+                Home delivery
+              </label>
+            </div>
+
+          </div>
+        </fieldset>
+
+        <!-- Field 4: Comments (Textarea) -->
+        <div>
+          <label for="comments" class="block text-sm font-semibold text-gray-700 mb-1">Comments:</label>
+          <textarea 
+            id="comments" 
+            name="comments" 
+            rows="4" 
+            placeholder="Write any comments or special requests here..."
+            class="mt-1 block w-full px-4 py-2 border-2 border-gray-200 rounded-xl shadow-sm focus:ring-brand-primary focus:border-brand-primary transition duration-200"
+          ></textarea>
+        </div>
+
+        <!-- Field 5: Submit Button -->
+        <button 
+          type="submit" 
+          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-base font-bold text-white bg-brand-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary transition duration-150 ease-in-out"
+        >
+          Submit Order
+        </button>
       </form>
     </main>
-    <footer>
-      <h2>By Meysam Razagh</h2>
-      <!-- joke joke joke -->
+    
+    <!-- 3. Changed the footer -->
+    <footer class="mt-auto w-full max-w-md text-center p-4">
+      <h2 class="text-xs font-semibold text-gray-500 border-t border-gray-300 pt-4">© 2025 Product Pick - Developed by Meysam Razagh</h2>
     </footer>
+
+    <script>
+      /**
+       * Submits the form data and displays a confirmation message.
+       * @param {Event} event - The form submission event.
+       */
+      const handleFormSubmit = (event) => {
+        // 1. Prevent the default form submission (which causes a page reload)
+        event.preventDefault();
+
+        // 2. Capture the form and main content elements
+        const form = document.getElementById('product-form');
+        const mainContent = document.getElementById('main-content');
+        
+        // Use FormData to easily grab all form field values
+        const formData = new FormData(form);
+
+        // Extract values
+        const name = formData.get('name') || 'N/A';
+        const product = formData.get('product') || 'Not Selected';
+        
+        // Get the friendly product name for display
+        const productElement = document.getElementById('product');
+        const selectedOption = productElement.options[productElement.selectedIndex];
+        const productText = selectedOption ? selectedOption.text : 'Not Selected';
+
+        const delivery = formData.get('delivery') || 'Not Selected';
+        const comments = formData.get('comments') || 'No comments.';
+
+        // 3. Create the confirmation message HTML
+        const confirmationHTML = `
+          <div class="bg-white p-8 shadow-2xl rounded-xl border border-gray-100 space-y-6 text-center animate-fadeIn">
+            <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <h2 class="text-2xl font-bold text-gray-800">Order Confirmed!</h2>
+            <p class="text-gray-600">Thank you, <span class="font-bold text-brand-primary">${name}</span>! Your order is being processed.</p>
+            
+            <div class="text-left space-y-2 p-4 rounded-lg bg-indigo-50 border-t-2 border-brand-primary mt-4">
+              <p><strong>Product:</strong> <span class="font-medium">${productText}</span></p>
+              <p><strong>Delivery Method:</strong> <span class="font-medium">${delivery === 'pickup' ? 'Pick up' : 'Home delivery'}</span></p>
+              <p><strong>Comments:</strong> <span class="italic text-gray-500">${comments}</span></p>
+            </div>
+
+            <!-- Button to reload/reset the form -->
+            <button 
+              onclick="window.location.reload()" 
+              class="mt-6 w-full flex justify-center py-2 px-4 border border-transparent rounded-xl shadow-md text-sm font-medium text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out"
+            >
+              Place New Order
+            </button>
+          </div>
+        `;
+
+        // 4. Replace the form with the confirmation message
+        mainContent.innerHTML = confirmationHTML;
+      };
+
+      // Add the event listener when the window loads
+      window.onload = () => {
+        const form = document.getElementById('product-form');
+        if (form) {
+          form.addEventListener('submit', handleFormSubmit);
+        }
+      };
+    </script>
   </body>
-</html>
\ No newline at end of file
+</html>

From ed5957be9343abd43047104355d7ad09e6323771 Mon Sep 17 00:00:00 2001
From: Meysam Razagh <48224515+Epunch@users.noreply.github.com>
Date: Thu, 23 Oct 2025 15:24:05 +0200
Subject: [PATCH 4/7] Revert to original simple form structure

This commit removes the Tailwind CSS integration and complex styling to revert the index.html file back to its starting, basic HTML/CSS state.
---
 Form-Controls/index.html | 248 +++++++--------------------------------
 1 file changed, 42 insertions(+), 206 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index c3fa8c0b2..f29f7739c 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -3,214 +3,50 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My Form Exercise</title>
+    <title>My form exercise</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- Load Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Configure Tailwind to use Inter font and rounded elements -->
-    <script>
-      tailwind.config = {
-        theme: {
-          extend: {
-            fontFamily: {
-              sans: ['Inter', 'sans-serif'],
-            },
-            colors: {
-                'brand-primary': '#4f46e5', // Custom color for a subtle change
-            }
-          },
-        },
-      }
-    </script>
-    <style>
-      /* Apply a clean, readable font globally */
-      body {
-        font-family: 'Inter', sans-serif;
-      }
-      /* Custom CSS Change: Add a slight scale effect on button hover */
-      #product-form button[type="submit"]:hover {
-        transform: scale(1.01);
-      }
-    </style>
   </head>
-  <body class="bg-gray-50 flex flex-col items-center justify-center min-h-screen p-4">
-    <main id="main-content" class="w-full max-w-md my-8">
-      
-      <!-- 1. Changed the header -->
-      <header class="text-center mb-8 p-4 bg-white rounded-xl shadow-lg">
-        <h1 class="text-5xl font-black tracking-tight text-brand-primary">The Product Picker App</h1>
-        <p class="text-gray-600 mt-2 text-lg font-medium">Select your desired product and confirm your delivery details.</p>
-      </header>
-
-      <!-- 2. Added section for "article image" changes (placeholder for context) -->
-      <div class="mb-8 p-6 bg-yellow-50 rounded-xl border-2 border-dashed border-yellow-300 shadow-inner text-center">
-        <p class="text-yellow-800 font-semibold mb-2">Image Placeholder (Related to "Changed the article images")</p>
-        <img 
-            src="https://placehold.co/400x150/f9fafb/374151?text=Product+Hero+Image" 
-            alt="Placeholder for product hero image" 
-            class="w-full h-auto rounded-lg shadow-md"
-            onerror="this.onerror=null; this.src='https://placehold.co/400x150/f9fafb/374151?text=Image+Unavailable';"
-        />
-      </div>
-
-      <!-- The form is wrapped in a modern card layout -->
-      <form id="product-form" class="bg-white p-8 shadow-2xl rounded-xl border border-gray-100 space-y-6">
-        
-        <!-- Field 1: Name Input -->
-        <div>
-          <label for="name" class="block text-sm font-semibold text-gray-700 mb-1">Name:</label>
-          <input 
-            type="text" 
-            id="name" 
-            name="name" 
-            placeholder="Enter your full name"
-            required 
-            class="mt-1 block w-full px-4 py-2 border-2 border-gray-200 rounded-xl shadow-sm focus:ring-brand-primary focus:border-brand-primary transition duration-200"
-          />
-        </div>
-
-        <!-- Field 2: Product Selection (Dropdown) -->
-        <div>
-          <label for="product" class="block text-sm font-semibold text-gray-700 mb-1">Choose a product:</label>
-          <select 
-            id="product" 
-            name="product" 
-            required 
-            class="mt-1 block w-full px-4 py-2 border-2 border-gray-200 rounded-xl shadow-sm bg-white focus:ring-brand-primary focus:border-brand-primary transition duration-200"
-          >
-            <option value="" disabled selected>-- Select one --</option>
-            <option value="laptop">Laptop</option>
-            <option value="phone">Phone</option>
-            <option value="headphones">Headphones</option>
-          </select>
-        </div>
-
-        <!-- Field 3: Delivery Method (Radio Buttons) -->
-        <fieldset class="p-4 border border-gray-200 rounded-xl">
-          <legend class="text-sm font-semibold text-gray-700">Delivery Method:</legend>
-          <div class="mt-2 space-y-2">
-            
-            <div class="flex items-center">
-              <input 
-                type="radio" 
-                id="pickup" 
-                name="delivery" 
-                value="pickup" 
-                required 
-                class="h-4 w-4 text-brand-primary border-gray-300 focus:ring-brand-primary"
-              />
-              <label for="pickup" class="ml-3 block text-sm font-medium text-gray-700">
-                Pick up
-              </label>
-            </div>
-            
-            <div class="flex items-center">
-              <input 
-                type="radio" 
-                id="home_delivery" 
-                name="delivery" 
-                value="delivery" 
-                class="h-4 w-4 text-brand-primary border-gray-300 focus:ring-brand-primary"
-              />
-              <label for="home_delivery" class="ml-3 block text-sm font-medium text-gray-700">
-                Home delivery
-              </label>
-            </div>
-
-          </div>
-        </fieldset>
-
-        <!-- Field 4: Comments (Textarea) -->
-        <div>
-          <label for="comments" class="block text-sm font-semibold text-gray-700 mb-1">Comments:</label>
-          <textarea 
-            id="comments" 
-            name="comments" 
-            rows="4" 
-            placeholder="Write any comments or special requests here..."
-            class="mt-1 block w-full px-4 py-2 border-2 border-gray-200 rounded-xl shadow-sm focus:ring-brand-primary focus:border-brand-primary transition duration-200"
-          ></textarea>
-        </div>
-
-        <!-- Field 5: Submit Button -->
-        <button 
-          type="submit" 
-          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-base font-bold text-white bg-brand-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary transition duration-150 ease-in-out"
-        >
-          Submit Order
-        </button>
+  <body>
+    <header>
+      <h1>Product Pick</h1>
+    </header>
+    <main>
+      <form>
+        <!-- The user should be able to enter their name -->
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" placeholder="Enter your name" required />
+        <br /><br />
+
+        <!-- The user should be able to choose a product -->
+        <label for="product">Choose a product:</label>
+        <select id="product" name="product" required>
+          <option value="">--Select one--</option>
+          <option value="laptop">Laptop</option>
+          <option value="phone">Phone</option>
+          <option value="headphones">Headphones</option>
+        </select>
+        <br /><br />
+
+        <!-- The user should be able to select a delivery method -->
+        <p>Delivery Method:</p>
+        <label>
+          <input type="radio" name="delivery" value="pickup" required /> Pick up
+        </label>
+        <label>
+          <input type="radio" name="delivery" value="delivery" /> Home delivery
+        </label>
+        <br /><br />
+
+        <!-- The user should be able to write comments -->
+        <label for="comments">Comments:</label><br />
+        <textarea id="comments" name="comments" rows="4" cols="30" placeholder="Your comments here..."></textarea>
+        <br /><br />
+
+        <!-- The user should be able to submit the form -->
+        <button type="submit">Submit</button>
       </form>
     </main>
-    
-    <!-- 3. Changed the footer -->
-    <footer class="mt-auto w-full max-w-md text-center p-4">
-      <h2 class="text-xs font-semibold text-gray-500 border-t border-gray-300 pt-4">© 2025 Product Pick - Developed by Meysam Razagh</h2>
+    <footer>
+      <h2>By Meysam Razagh</h2>
+      <!-- joke joke joke -->
     </footer>
-
-    <script>
-      /**
-       * Submits the form data and displays a confirmation message.
-       * @param {Event} event - The form submission event.
-       */
-      const handleFormSubmit = (event) => {
-        // 1. Prevent the default form submission (which causes a page reload)
-        event.preventDefault();
-
-        // 2. Capture the form and main content elements
-        const form = document.getElementById('product-form');
-        const mainContent = document.getElementById('main-content');
-        
-        // Use FormData to easily grab all form field values
-        const formData = new FormData(form);
-
-        // Extract values
-        const name = formData.get('name') || 'N/A';
-        const product = formData.get('product') || 'Not Selected';
-        
-        // Get the friendly product name for display
-        const productElement = document.getElementById('product');
-        const selectedOption = productElement.options[productElement.selectedIndex];
-        const productText = selectedOption ? selectedOption.text : 'Not Selected';
-
-        const delivery = formData.get('delivery') || 'Not Selected';
-        const comments = formData.get('comments') || 'No comments.';
-
-        // 3. Create the confirmation message HTML
-        const confirmationHTML = `
-          <div class="bg-white p-8 shadow-2xl rounded-xl border border-gray-100 space-y-6 text-center animate-fadeIn">
-            <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            <h2 class="text-2xl font-bold text-gray-800">Order Confirmed!</h2>
-            <p class="text-gray-600">Thank you, <span class="font-bold text-brand-primary">${name}</span>! Your order is being processed.</p>
-            
-            <div class="text-left space-y-2 p-4 rounded-lg bg-indigo-50 border-t-2 border-brand-primary mt-4">
-              <p><strong>Product:</strong> <span class="font-medium">${productText}</span></p>
-              <p><strong>Delivery Method:</strong> <span class="font-medium">${delivery === 'pickup' ? 'Pick up' : 'Home delivery'}</span></p>
-              <p><strong>Comments:</strong> <span class="italic text-gray-500">${comments}</span></p>
-            </div>
-
-            <!-- Button to reload/reset the form -->
-            <button 
-              onclick="window.location.reload()" 
-              class="mt-6 w-full flex justify-center py-2 px-4 border border-transparent rounded-xl shadow-md text-sm font-medium text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out"
-            >
-              Place New Order
-            </button>
-          </div>
-        `;
-
-        // 4. Replace the form with the confirmation message
-        mainContent.innerHTML = confirmationHTML;
-      };
-
-      // Add the event listener when the window loads
-      window.onload = () => {
-        const form = document.getElementById('product-form');
-        if (form) {
-          form.addEventListener('submit', handleFormSubmit);
-        }
-      };
-    </script>
-  </body>
-</html>

From 1bd6fce492846f5b1c8dea31cac225bf2e7e52f5 Mon Sep 17 00:00:00 2001
From: Meysam Razagh <48224515+Epunch@users.noreply.github.com>
Date: Wed, 12 Nov 2025 11:27:19 +0100
Subject: [PATCH 5/7] Back TO Default

---
 Form-Controls/index.html | 43 +++++++++-------------------------------
 1 file changed, 9 insertions(+), 34 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f29f7739c..65a866cdb 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,6 +4,7 @@
     <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" />
   </head>
   <body>
@@ -12,41 +13,15 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- The user should be able to enter their name -->
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="name" placeholder="Enter your name" required />
-        <br /><br />
-
-        <!-- The user should be able to choose a product -->
-        <label for="product">Choose a product:</label>
-        <select id="product" name="product" required>
-          <option value="">--Select one--</option>
-          <option value="laptop">Laptop</option>
-          <option value="phone">Phone</option>
-          <option value="headphones">Headphones</option>
-        </select>
-        <br /><br />
-
-        <!-- The user should be able to select a delivery method -->
-        <p>Delivery Method:</p>
-        <label>
-          <input type="radio" name="delivery" value="pickup" required /> Pick up
-        </label>
-        <label>
-          <input type="radio" name="delivery" value="delivery" /> Home delivery
-        </label>
-        <br /><br />
-
-        <!-- The user should be able to write comments -->
-        <label for="comments">Comments:</label><br />
-        <textarea id="comments" name="comments" rows="4" cols="30" placeholder="Your comments here..."></textarea>
-        <br /><br />
-
-        <!-- The user should be able to submit the form -->
-        <button type="submit">Submit</button>
+        <!-- write your html here-->
+        <!-- 
+          try writing out the requirements first as comments
+        this will also help you fill in your PR message later-->
       </form>
     </main>
     <footer>
-      <h2>By Meysam Razagh</h2>
-      <!-- joke joke joke -->
+      <!-- change to your name-->
+      <h2>By HOMEWORK SOLUTION</h2>
     </footer>
+  </body>
+</html>

From 42d699cfb24ef5cf1637769057d503eadd0b2024 Mon Sep 17 00:00:00 2001
From: Epunch <msm.razagh@gmail.com>
Date: Fri, 14 Nov 2025 23:50:33 +0100
Subject: [PATCH 6/7] Update index.html

---
 Wireframe/index.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..404ab0151 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,9 +8,9 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe PR</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        I did some changes for undrestanding this process.
       </p>
     </header>
     <main>
@@ -18,15 +18,14 @@ <h1>Wireframe</h1>
         <img src="placeholder.svg" alt="" />
         <h2>Title</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          “I made some changes here as part of learning this process.”
         </p>
         <a href="">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Made by Meysam !
       </p>
     </footer>
   </body>

From 4e19a774bca6a7054993d896f07614eceb2018b0 Mon Sep 17 00:00:00 2001
From: Epunch <msm.razagh@gmail.com>
Date: Sat, 15 Nov 2025 15:15:49 +0100
Subject: [PATCH 7/7] form controls exercise

---
 Form-Controls/index.html | 48 +++++++++++++++++++++++++++++++++-------
 indextest.html           |  0
 2 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 indextest.html

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..0db1ddb59 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,24 +4,56 @@
     <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" />
   </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-->
+
+        <!-- customer name -->
+        <label for="name">Name:</label>
+        <input id="name" name="name" type="text" minlength="2" required>
+
+        <br><br>
+
+        <!-- customer email -->
+        <label for="email">Email:</label>
+        <input id="email" name="email" type="email" required>
+
+        <br><br>
+
+        <!-- t-shirt colour -->
+        <p>Colour:</p>
+        <label><input type="radio" name="color" value="red" required> Red</label>
+        <label><input type="radio" name="color" value="blue"> Blue</label>
+        <label><input type="radio" name="color" value="green"> Green</label>
+
+        <br><br>
+
+        <!-- t-shirt size -->
+        <p>Size:</p>
+        <label><input type="radio" name="size" value="XS" required> XS</label>
+        <label><input type="radio" name="size" value="S"> S</label>
+        <label><input type="radio" name="size" value="M"> M</label>
+        <label><input type="radio" name="size" value="L"> L</label>
+        <label><input type="radio" name="size" value="XL"> XL</label>
+        <label><input type="radio" name="size" value="XXL"> XXL</label>
+
+        <br><br>
+
+        <button type="submit">Submit</button>
+
       </form>
     </main>
+
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      //my name
+      <h2>By MEYSAM RAZAGH</h2>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/indextest.html b/indextest.html
new file mode 100644
index 000000000..e69de29bb
