JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列一：第3課 ── 修改 html 的內容</h1>

<div class="order">
  <div class="data">
    <label for="customer">訂購人姓名</label>
    <input type="text" name="customer" id="customer" placeholder="訂購人姓名" required>
  </div>
  <div class="buttons">
    <button onclick="myFunc()">我要訂購</button>
    <button onclick="myFunc2()">認識工廠</button>
  </div>
  <div class="order-check">
    <h2>您的訂單</h2>
    <p>顧客姓名：<span id="nameCheck"></span></p>
  </div>
</div>

CSS

.order {
  width: 400px;
  margin: 50px auto;
  padding: 50px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.data {
  margin-bottom: 20px;
}

.data,
.buttons {
  width: 100%;
  font-size: 0;
}

.data label,
.data input {
  display: inline-block;
  font-size: 18px;
  vertical-align: middle;
}

.data label {
  width: 30%;
}

.data input {
  width: 70%;
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 50%;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #ccc;
}

.order-check {
  margin-top: 20px;
  background-color: #253a7e;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
}

.order-check h2 {
  text-align: center;
  color: rgb(211, 211, 68);
}

.order-check p {
  text-align: left;
  color: rgb(211, 211, 68);
}

JavaScript

function myFunc() {
  let customerName = document.getElementById("customer").value;
  if (customerName == "") {
    alert("請輸入姓名");
  } else {
    document.getElementById("nameCheck").textContent = customerName;
    alert(
      customerName +
      " 您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！"
    );
  }
}

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