JSFiddle - React, Tailwind, and code Playground

by B__rain

HTML

<div class="index">
  <img class="jpg" src="https://as2.ftcdn.net/v2/jpg/05/25/99/51/500_F_525995178_KIcSnlhaA9fCcgbZ0Jv9zdo3eU2KANAw.jpg" alt="">
  <input id="name" type="text" placeholder="請輸入名字...">
    <select id="gender">
     <option value="gender1">請選擇分類</option>
     <option value="man">男裝</option>
     <option value="female">女裝</option>
    </select>
   <select id="clothingtype">
     <option value="shape">請選擇款式</option>
     <option value="Jacket">上衣</option>
     <option value="coat">外套</option>
     <option value="Pants">褲子</option>
     <option value="skirt">裙子</option>
   </select>
  <button class="btn" onclick="order()">我要訂購</button>
  <button class="btn" onclick="about()">認識工廠</button>
  <div class="list">您的訂單：
  <div>顧客姓名:<spen id="name1"></spen></div>
  <div>服裝分類:<spen id="Classification"></spen></div>
  <div>服裝類型:<spen id="style"></spen></div>
  </div>
</div>

SASS

*,html
  /* border: 1px solid ; */
  padding: 0px;
  margin: 0px;
.index
  width: 500px;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
.jpg
  background-size: cover;
.btn
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
  margin: 5p;
  cursor: pointer;
  display: inline;
  margin-top: 10px;
  color: #F0F0F2;
  background-color: #4E64A6;
  &:hover
    background-color: #BF9169;
    transition-duration: 0.5s
.list
  width: 500px
  height: 200px
  background-color: #C7B1A6
  border: 1px dashed

JavaScript

function order() {
  var message = '「謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！」'
  var tie = '「最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！」'
  var scarf = '「最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！」'
  
  var keyword = document.getElementById('name').value;
  
  var menu = document.getElementById("gender");
  var index = menu.selectedIndex;
  var text =  menu.options[index].text;
  
  var menu1 = document.getElementById("clothingtype");
  var index1 = menu1.selectedIndex;
  var text1 = menu1.options[index1].text;
  
  document.getElementById('name1').textContent = keyword;
  document.getElementById('Classification').textContent = text;
  document.getElementById('style').textContent = text1;
  alert(keyword + message);
  if (text == '男裝') {
    alert(tie);
  } 
  else if(text== '女裝') {
    alert(scarf);
  } else{
    
  }
 }
function about() {
  alert('「我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！」');
}