JSFiddle - React, Tailwind, and code Playground

by aelgy369

HTML

<input type="text" id="name" placeholder="請先輸入姓名">
<div class="section">
  <select id="types">
    <option value="" selected disabled>款式</option>
    <option value="man">男裝</option>
    <option value="women">女裝</option>
  </select>
</div>
<div class="section">
  <select id="items">
    <option value="" selected disabled>類型</option>
    <option value="jacket">外套</option>
    <option value="cloth">上衣</option>
    <option value="pants">下身</option>
  </select>
</div>
<!-- 數量 -->
<div class="section">
  <input type="number" id="number" placeholder="請填寫數量">
</div>
<div id="buttonSection">
  <button class='order' onclick="order()">
    我要訂購
  </button>

  <button class='recog' onclick="recognize()">
    認識工廠
  </button>
</div>


<div id="orderList" style="display: none">
  <p id="orderTitle">
    您的訂單
  </p>
  <hr id="orderHr">
  <p>
    顧客姓名：<span id=nameCheck></span>
  </p>
  <p>
    服裝分類：<span id="userTypes"></span>
  </p>
  <p>
    服裝類型：<span id="userItems"></span>
  </p>
  <p>
    訂購數量：<span id="itemNums"></span>
  </p>
  <p>
    初步估價：<span id="totalNums"></span>
  </p>
</div>

CSS

button.order{
  font-size: 20px;
  background-color: #FFE153;
  border-width: 1px;
  border-radius: 10px;
}

button.order:hover {
  font-size: 24px;
  background-color: #D9B300;
  transition-duration: 0.2s;
}

button.recog{
  font-size: 20px;
  background-color: #FFE153;
  border-width: 1px;
  border-radius: 10px;
}

button.recog:hover {
  font-size: 24px;
  background-color: #D9B300;
  transition-duration: 0.2s;
}

#buttonSection {
  margin: 24px 0;
}

#name {
  font-size: 20px;
  border-radius: 10px;
  border-width: 1px;
  text-align: center;
}

#orderList{
  background-color: #D0D0D0;
  width: 200px;
  height: 300px;
  border-radius: 10px;
  padding: 8px 4px;
}

#orderHr {
  border-color: black;
}

#orderTitle {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  align-items: center;
  margin: 8px 0px 8px 0px;
}

div.section {
  margin: 12px 0px;
}

#types {
  font-size: 20px;
  border-radius: 10px;
  width: 200px;
  text-align: center;
  color: #6C6C6C;
}

#items {
  font-size: 20px;
  border-radius: 10px;
  width: 200px;
  text-align: center;
  color: #6C6C6C;
}

#number {
  font-size: 20px;
  border-radius: 10px;
  border-width: 1px;
  text-align: center;
}

JavaScript

function order() {
  // 驗證寫在前面
  const str = document.getElementById('name').value;
  const typesValue = document.getElementById('types').value;
  const itemsValue = document.getElementById('items').value;
  const itemNumbers = document.getElementById('number').value;
  if (str.trim() === "") return alert("煩請填寫您的姓名");
  if (typesValue === "") return alert("煩請選擇款式");
  if (itemsValue === "") return alert("煩請選擇類型");
  if (itemNumbers === "" || itemNumbers <= 0) {
  	return alert("煩請輸入訂購數量") } 
    else if (itemNumbers < 100) {
    return alert("抱歉，我們工廠的最低出貨量是 100 件")
    } else if (itemNumbers > 5000) {
    return alert("抱歉，我們工廠的最高出貨量是 5000 件")
    }
  
  // 如果驗證沒問題就可以跑後面的
  alert(str + "，謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");
  promoteAlert()
  showOrder()
}

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

function promoteAlert() {
  const types = document.getElementById('types');
  const typesIndex = types.selectedIndex;
  const typesText = types.options[typesIndex].text;
  const itemNumbers = document.getElementById('number').value;
  if (typesText === "男裝") {
    alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！")
    const menPrice = 600;
    const totalNums = menPrice * itemNumbers;
    document.getElementById('totalNums').textContent = totalNums;
  } else {
    alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！")
    const womenPrice = 500;
    const totalNums = womenPrice * itemNumbers;
    document.getElementById('totalNums').textContent = totalNums;
  }
}

function showOrder() {
  // 一開始不顯示，但點按鈕後會跑出來
  const order = document.getElementById('orderList').style.display = "";
  getName();
  getTypes();
  getItems();
  getNumbers();
}


function getName() {
  const str = document.getElementById('name').value;
  document.getElementById('nameCheck').textContent = str;
}

function getTypes() {
  const types = document.getElementById('types');
  const typesIndex = types.selectedIndex;
  const typesText = types.options[typesIndex].text;
 ...