JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<div class="back">
  <div class="page">
    <input id="name" type="text" placeholder="請輸入貴賓姓名" />
    <select id="menu">
      <option>男裝</option>
      <option>女裝</option>
    </select>
    <select id="menu2">
      <option>上衣</option>
      <option>下身</option>
      <option>外套</option>
    </select>
    <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>
      </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;
}

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

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

#name,#menu,#menu2 {
  border-radius: 10px;
  height: 30px;
  margin: auto 5px;
}

.back {
  background-color: #f6e4e8;
}

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

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

hr {
  width: 500px;
}

body {
  margin: 0px;
}

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

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("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
  }
  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;

}

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