JSFiddle - React, Tailwind, and code Playground

by CryptoMars

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<nav>
  <div class="navbar text-bg-primary p-3">
    <h1 class="m-0">成衣工廠線上下單</h1>
    <ul class="navbar-nav list-unstyled">     
        <li>
    <button type="button" class="btn btn-info" onclick="about()">認識工廠</button>
  </li>      
    </ul>
  </div>
</nav>
<div class="container">
<form>
  <div class="d-flex align-items-center my-3">
     <label class="form-label mb-0" for="name">姓名：</label>
     <input class="form-control w-auto" type="text" id="name" placeholder="請輸入姓名">
   </div> 
   <div class="d-flex align-items-center my-3">
     <label class="form-label mb-0" for="clothes-style">分類：</label>
     <select class="form-select w-auto" name="clothes-style" id="clothes-style">
       <option value="men">MEN</option>
       <option value="women">WOMEN</option>
       <option value="kids">KIDS</option>
       <option value="sports">SPORTS</option>
     </select>
   </div>   
   <div class="d-flex align-items-center my-3">
     <label class="form-label mb-0" for="clothes-type">類型：</label>
     <select class="form-select w-auto" name="clothes-type" id="clothes-type">
       <option value="upperBody">上衣</option>
       <option value="coat">外套</option>
       <option value="lowerBody">下身</option>
     </select>
   </div>   
   <div class="d-flex align-items-center my-3">
     <label class="form-label mb-0" for="clothes-type">數量：</label>
     <input id="quantity" class="form-control w-auto" type="number" min="1" max="99">
   </div>  
    <button type="button" class="btn btn-success mb-5" onclick="order()">我要訂購</button>
 </form>   
    <hr>
    <section>
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">您的訂單</h3>
        </div>
        <div class="card-body">
          <ul class="list-unstyled">
            <li>顧客姓名：<span...

JavaScript

const price = {
	men: 600,
  women: 500,
  kids: 400,
  sports: 400,
}


function order(){ 
	const cname = document.getElementById("name").value;
  const clothesStyle = document.getElementById("clothes-style");
  const clothesType = document.getElementById("clothes-type"); 
  const quantity = document.getElementById("quantity");
	const orderCname = document.querySelector(".order-cname");
  const orderStyle = document.querySelector(".order-style");
  const orderType = document.querySelector(".order-type");
  const orderQuantity = document.querySelector(".order-quantity");
  const orderValuation = document.querySelector(".order-valuation");  
 	
	alert(cname + "您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");
  if (clothesStyle.options[clothesStyle.selectedIndex].value == "men") {
  	alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
  } else if (clothesStyle.options[clothesStyle.selectedIndex].value == "women") {
  	alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！");
  }
  orderCname.textContent = cname;
  orderStyle.textContent = clothesStyle.options[clothesStyle.selectedIndex].text;
  orderType.textContent = clothesType.options[clothesType.selectedIndex].text;
  orderQuantity.textContent = quantity.value;
  orderValuation.textContent = parseInt(quantity.value) * price[clothesStyle.options[clothesStyle.selectedIndex].value];
  }

function about(){
	alert("我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！");
}