Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Order Form</title>
	<link rel="stylesheet" href="style.css">
	<script>
       const form = document.querySelector('#order-form');
const productSelects = form.querySelectorAll('select[name="product"]');
const quantityInputs = form.querySelectorAll('input[name^="quantity"]');
const shippingRadios = form.querySelectorAll('input[name="shipping"]');
const stateSelect = form.querySelector('select[name="state"]');
const submitBtn = form.querySelector('button[type="submit"]');
const orderSummary = document.querySelector('#order-summary');

const products = [  { name: 'Product 1', price: 10.99 },  { name: 'Product 2', price: 8.99 },  { name: 'Product 3', price: 12.99 }];

const shippingOptions = [  { name: 'Standard', price: 4.99 },  { name: 'Express', price: 9.99 },  { name: 'Overnight', price: 14.99 }];

const taxRates = { 'KY': 0.06, 'OH': 0.0575, 'other': 0 };

form.addEventListener('submit', (event) => {
  event.preventDefault();
    orderSummary.innerHTML = summary;

  const quantities = Array.from(quantityInputs).map(input => parseInt(input.value) || 0);
  if (quantities.every(quantity => quantity === 0)) {
    alert('Please select at least 1 product to order.');
    return;
  }

  const selectedShipping = Array.from(shippingRadios).find(radio => radio.checked);
  if (!selectedShipping) {
    alert('Please select a shipping option.');
    return;
  }

  const selectedState = stateSelect.value;
  if (selectedState === '') {
    alert('Please select a state.');
    return;
  }

  const subtotal = products.reduce((total, product, index) => total + product.price * quantities[index], 0);
  const taxRate = taxRates[selectedState] || taxRates['other'];
  const tax = subtotal * taxRate;
  const shippingCost = shippingOptions.find(option => option.name === selectedShipping.value).price;
  const total = subtotal + tax + shippingCost;

  // Build order summary
  const date = new Date().toLocaleDateString();
  const productsList = products.map((product, index) => {
    const quantity = quantities[index];
    const price = product.price.toFixed(2);
    return `
      <tr>
        <td>${product.name}</td>
        <td>${quantity}</td>
        <td>$${price}</td>
      </tr>
    `;
  }).join('');

  const summary = `
    <h2>Order Summary</h2>
    <p>Your order was successfully placed on ${date}.</p>
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        ${productsList}
      </tbody>
    </table>
    <p>Tax: $${tax.toFixed(2)}</p>
    <p>Shipping: $${shippingCost.toFixed(2)}</p>
    <p>Total: $${total.toFixed(2)}</p>
  `;


    </script>
</head>
<body>
	<nav>
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="order.html">Order Form</a></li>
		</ul>
	</nav>
	<header>
		<img src="logo.png" alt="Company Logo">
		<h1>Order Form</h1>
	</header>
	<main>
        <div id="order-summary"></div>

		<form id="order-form" >
			<h2>Customer Information</h2>
			<label for="customer-name">Name:</label>
			<input type="text" id="customer-name" name="customer-name" required>

			<label for="street-address">Street Address:</label>
			<input type="text" id="street-address" name="street-address" required>

			<label for="city">City:</label>
			<input type="text" id="city" name="city" required>

			<label for="state">State:</label>
			<select id="state" name="state" required>
				<option value="">Select a state</option>
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
				<!-- add all 50 states here -->
				<option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Conneticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachussetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
			</select>

			<label for="zip-code">Zip Code:</label>
			<input type="text" id="zip-code" name="zip-code" required>

			<h2>Products</h2>
			<p>Please enter the quantity of each product you want to order:</p>
			<label for="product1">Product 1:</label>
			<input type="number" id="product1" name="product1" min="0">

			<label for="product2">Product 2:</label>
			<input type="number" id="product2" name="product2" min="0">

			<label for="product3">Product 3:</label>
			<input type="number" id="product3" name="product3" min="0">

			<h2>Shipping</h2>
			<p>Please select a shipping option:</p>
			<label>
				<input type="radio" name="shipping" value="overnight" required>
				Overnight - $15.00
			</label>
			<label>
				<input type="radio" name="shipping" value="2day" required>
				2-Day - $10.00
			</label>
			<label>
				<input type="radio" name="shipping" value="standard" required>
				Standard - $5.00
			</label>

			<button type="submit">Place Order</button>
		</form>
	</main>

	<footer>
		<p>&copy; 2023 My Company Name | EKU | CSC 160 Final Project</p>
	</footer>
</body>
</html>