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>
  <div class="paperback">
    <div class="paper">
      <h3>
        您的訂單
      </h3>
      <div class="vipback">
        <p id="vipname">
          顧客姓名 :
        </p>
        <p id="sex">
          服裝分類 :
        </p>
        <p id="kind">
          服裝類型 :
        </p>
        <p id="many">
          訂購數量 :
        </p>
        <p id="money">
          初步估價 :
        </p>
      </div>
    </div>
    <br>
  </div>
</div>

CSS

.btn {
  width: 100px;
  height: 50px;
  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: #f6e4e8;
}

.paper {
  background-color: #de9dab;
  width: 250px;
  padding: 20px 0px 20px 50px;
  margin: 20px 0px 20px 0px;
  border-radius: 10px;
}

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

hr {
  width: 500px;
}

body {
  margin: 0px;
}

.vipback {
  color: white;
  background-color: #002073;
  padding: 0px 20px;
}

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

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

select{
  padding: 0px 15px;
}

JavaScript

function myfunction() {
  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
  }
}

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