JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <title>ONLINE ORDE</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div class="order">
      <h1>- ONLINE ORDER -</h1>
      <div class="name">
        <label for="">顧客姓名</label>
        <input id="name" type="text" placeholder="請輸入姓名..." required />
      </div>

      <div class="classify">
        <label for="">服裝分類</label>
        <select name="" id="Cclassify">
          <option value="man">MAN</option>
          <option value="lady">LADY</option>
        </select>
      </div>

      <div class="type">
        <label for="">服裝類型</label>
        <select name="" id="Ctype">
          <option value="Coat">外套</option>
          <option value="T-shirt">T恤</option>
          <option value="trouser">褲子</option>
        </select>
      </div>
      <div class="orderCount">
        <label for="">訂購數量</label>
        <input type="number" id="ordercountnumber" />
      </div>
      <div class="card">
        <button onclick="myFunction()">我要訂購</button>
        <button onclick="myFactory()">認識工廠</button>
      </div>
      <div class="ordertext" id="ordertext">
        <div class="ordertitle">
          <h2>您的訂單</h2>
        </div>

        <ul class="ordername">
          <li>顧客姓名:<span id="ordername"></span></li>
          <li>服裝分類:<span id="orderclassify"></span></li>
          <li>服裝類型:<span id="ordertype"></span></li>
          <li>訂購數量:<span id="orderCount"></span>件</li>
          <li>初步估價:<span id="orderPrice"></span>元</li>
        </ul>
      </div>
    </div>

    <script src="index.js"></script>
 ...

CSS

* {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
}

body {
  background: lightblue;
}

.order {
  margin: 50px auto;
  background: rgba(119, 136, 153, 0.5);
  width: 500px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

p {
  margin: 10px 0;
  font-size: 12px;
}

li {
  list-style-type: none;
  font-size: 12px;
}

label {
  font-size: 12px;
  margin-bottom: 10px;
}

input {
  width: 180px;
}

.name {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

input {
  border: 0;
  border-radius: 50px;
  padding: 2px 10px;
  background-color: white;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card > button {
  margin: 20px;
  width: 150px;
  padding: 10px;
  background: lightgray;
  color: white;
  border-radius: 50px;
  border: 2px solid gray;
}

button:hover {
  background: white;
  color: lightblue;
  border: 2px dashed lightblue;
  font-weight: 800;
}

.classify {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.type {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.orderCount {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ocbtn > button {
  width: 35px;
  margin: 0 20px;
  border-radius: 50px;
}
select {
  width: 200px;
  border: 0;
  border-radius: 50px;
  padding: 2px 10px;
  background-color: white;
}

.ordertext {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ordertitle {
  border-bottom: 3px solid lightslategray;
  color: white;
}

.ordername {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

JavaScript

// DOM
var ordername = document.getElementById("ordername");
var Cclassify = document.getElementById("Cclassify");
var Ctype = document.getElementById("Ctype");
var ordertype = document.getElementById("ordertype");
var orderCount = document.getElementById("orderCount");
var orderPrice = document.getElementById("orderPrice");
// 訂購數量
var ordercountnumber = document.getElementById("ordercountnumber");

// 按我要訂購
function myFunction() {
  //
  var name = document.getElementById("name").value;
  var CclassifyIndex = Cclassify.selectedIndex;
  var CtypeIndex = Ctype.selectedIndex;
  var CclassifyText = Cclassify.options[CclassifyIndex].text;
  var CtypeText = Ctype.options[CtypeIndex].text;

  ordername.textContent = name;
  orderclassify.textContent = CclassifyText;
  ordertype.textContent = CtypeText;
  var CclassifyMan = "MAN";
  var ocn = parseInt(ordercountnumber.value);

  // 填寫條件限制
  if (!ocn && !name) {
    // 沒填姓名及數量
    return alert("抱歉，請填寫您的大名及未填訂購數量。");
  } else if (!ocn && name) {
    // 沒填數量
    return alert("抱歉，請填寫您未填訂購數量。");
  } else if (ocn && !name) {
    // 沒填姓名
    return alert("抱歉，請填寫您的大名。");
  } else if (ocn < 100 && name) {
    // 有姓名,數量低於100
    return alert("抱歉，我們工廠的最低出貨量是 100 件。");
  } else if (ocn > 5000 && name) {
    // 有姓名,數量高於5000
    return alert("抱歉，我們工廠的最高出貨量是 5,000 件。");
  }

  alert(
    name +
      "您好！!謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！"
  );
  // 如果選男裝:跳送領帶通知&價格600$
  if (CclassifyText == CclassifyMan) {
    alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
    orderPrice.textContent = ocn * 600;
  } else {
    // 如果選女裝:跳送圍巾通知&價格500$
    alert("近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！");
    orderPrice.textContent = ocn * 500;
  }
  //   if (name == "") {
  //   }
  //  訂購數量顯示
  orderCount.textContent = ocn;
}
// 按認識工廠
function myFactory() {
  var name = document.getElementById("name").value;
  alert(
    name + "您好！!我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！"
  );
}