JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<div class="back">
  <div class="page">
    <div class="namediv">
      <input id="name" type="text" placeholder="請輸入貴賓姓名" />
    </div>
    <br>
    <div class="menu-group">
      <select id="menu">
        <option>男裝</option>
        <option>女裝</option>
      </select>
      <select id="menu2">
        <option>上衣</option>
        <option>下身</option>
        <option>外套</option>
      </select>
    </div>
    <br>
    <div class="numberdiv">
      <input id="number" type="text" placeholder="請輸入您想訂購的數量">
    </div>
    <button class="btn" onclick="myfunction()">
      我要訂購
    </button>

    <button class="btn" onclick="myfunction2()">
      認識工廠
    </button>
  </div>
  <hr>
  <br>
  <div class="paperback">
    <div class="paper">
      <h3>
        您的訂單
      </h3>
      <div class="vipback">
        <br>
        <p id="vipname">
          顧客姓名 :
        </p>
        <p id="sex">
          服裝分類 :
        </p>
        <p id="kind">
          服裝類型 :
        </p>
        <p id="many">
          訂購數量 :
        </p>
        <p id="money">
          初步估價 :
        </p>
        <br>
      </div>
    </div>
    <br>
  </div>
</div>
<br>

CSS

.btn {
  width: 115px;
  height: 35px;
  font-size: 17px;
  border-radius: 5px;
  margin: 10px;
  color: white;
  background-color: rgb(183 60 88);
  font-weight: bold;
  border-color: rgb(183 60 88);
}

.btn:hover {
  background-color: #913147;
}

.btn:active {
  transform: scale(0.9);
}

#name,
#menu,
#menu2,
#number {
  border-radius: 10px;
  height: 30px;
  margin: auto 5px;
  border-color: rgb(183 60 88);
}

.back {
  background-color: #fffafa;
}

.paper {
  background-color: #e6cfe6;
  width: 250px;
  border-radius: 10px;
}

.paperback {
  display: flex;
  justify-content: center;
}

hr {
  width: 400px;
}

body {
  margin: 0px;
}

.vipback {
  color: white;
  background-color: #b068b0;
  padding: 0px 0px 0px 30px;
  border-radius: 0px 0px 10px 10px; 
}

.menu-group,
.namediv,
.numberdiv {
  display: block;
}

.page {
  text-align: center;
  padding-top: 20px;
}

select {
  padding: 0px 36px;
}

#name {
  width: 250px;
}

#number {
  width: 250px;
}

.paper h3{
  padding: 0px 15px;
}

JavaScript

function myfunction() {
  var buy = document.getElementById("number").value;
  var x = parseInt(buy);
  var str = document.getElementById("name").value;
  var noname = "";
  if (str != noname) {
    if (buy <= 0) {
      alert("煩請輸入訂購數量。");
    } else if (x < 100) {
      alert("抱歉，我們工廠的最低出貨量是 100 件。");
    } else if (x > 5000) {
      alert("抱歉，我們工廠的最高出貨量是 5,000 件。");
    } else {
      var str = document.getElementById("name").value;
      alert(
        str +
          "您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！"
      );
      document.getElementById("vipname").textContent = "顧客姓名 : " + str;
      var choose = document.getElementById("menu");
      var index = choose.selectedIndex;
      var bg = choose.options[index].text;
      var str2 = "男裝";
      if (str2 == bg) {
        alert(
          "最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！"
        );
        document.getElementById("money").textContent = "初步估價:" + btotal;
      } else {
        alert(
          "最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！"
        );
      }
      document.getElementById("sex").textContent = "服裝分類 : " + bg;
      var choose2 = document.getElementById("menu2");
      var index2 = choose2.selectedIndex;
      var tshirt = choose2.options[index2].text;
      document.getElementById("kind").textContent = "服裝類型 : " + tshirt;
      var buy = document.getElementById("number").value;
      document.getElementById("many").textContent = "訂購數量 : " + buy;
      var a1 = 600;
      var a2 = 500;
      var btotal = parseInt(buy) * a1;
      var gtotal = parseInt(buy) * a2;
      if (str2 == bg) {
        document.getElementById("money").textContent = "初步估價 : " + btotal;
      } else {
        document.getElementById("money").textContent = "初步估價 : " + gtotal;
      }
    }
  } else {
    alert("煩請填寫您的大名。");
  }
}

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