ITP-2025-1 | Reyhan Yediyildiz | Week 1 | Wireframe

Form-Controls/index.html

@@ -12,16 +12,45 @@
       <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-->
+      <form id="product-form">
+        <!-- 1. Dropdown to select product -->
+        <label for="product">Choose a product:</label>
+        <select id="product" name="product">
+          <option value="product1" data-price="10">Product 1 - $10</option>
+          <option value="product2" data-price="15">Product 2 - $15</option>
+          <option value="product3" data-price="20">Product 3 - $20</option>
+        </select>
+
+        <!-- 2. Input to select quantity -->
+        <label for="quantity">Quantity:</label>
+        <input type="number" id="quantity" name="quantity" min="1" required />
+
+        <!-- 3. Submit Button -->
+        <button type="submit">Submit</button>
       </form>
+
+      <!-- 4. Area to display total price -->
+      <p id="total-price"></p>
     </main>
     <footer>
       <!-- change to your name-->
       <h2>By HOMEWORK SOLUTION</h2>
     </footer>
+
+    <script>
+      // Function to calculate total price
+      document.getElementById('product-form').addEventListener('submit', function(e) {
+        e.preventDefault(); // Prevent form submission to server
+
+        const productSelect = document.getElementById('product');
+        const selectedProduct = productSelect.options[productSelect.selectedIndex];
+        const price = parseFloat(selectedProduct.getAttribute('data-price'));
+        const quantity = parseInt(document.getElementById('quantity').value);
+
+        // Calculate total price
+        const total = price * quantity;
+        document.getElementById('total-price').textContent = `Total Price: $${total.toFixed(2)}`;
+      });
+    </script>
   </body>
 </html>

Wireframe/README.md

@@ -36,3 +36,5 @@ There are some provided HTML and CSS files you can use to get started. You can u
 - [Wireframe](https://www.productplan.com/glossary/wireframe/)
 - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
 - [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
+
+updated version

Wireframe/index.html

@@ -14,6 +14,7 @@ <h1>Wireframe</h1>
       </p>
     </header>
     <main>
+      <!-- ARTICLE 1 -->
       <article>
         <img src="placeholder.svg" alt="" />
         <h2>Title</h2>
@@ -23,6 +24,25 @@ <h2>Title</h2>
         </p>
         <a href="">Read more</a>
       </article>
+<!-- ARTICLE 2 -->
+       <article>
+        <img src="placeholder.svg" alt="Example placeholder graphic" />
+        <h2>What is a README?</h2>
+        <p>
+          A README file explains what a project is, how it works, and how to use it.
+        </p>
+        <a href="#">Learn more</a>
+      </article>
+
+      <!-- ARTICLE 3 -->
+      <article>
+        <img src="placeholder.svg" alt="Example placeholder graphic" />
+        <h2>What is a Wireframe?</h2>
+        <p>
+          A wireframe is a simple visual guide showing a webpage’s structure and layout.
+        </p>
+        <a href="#">Learn more</a>
+      </article>
     </main>
     <footer>
       <p>