JSFiddle - React, Tailwind, and code Playground

by 81ue_lan

HTML

<input id="input-customName" placeholder="訂購者姓名">
  <select name="category-list" id="category-list">
    <option value="man" selected>男裝</option>
    <option value="woman" >女裝</option>
  </select>
  <select name="type-list" id="type-list">
    <option value="outer" selected>外套</option>
    <option value="top">上衣</option>
    <option value="bottom">下身</option>
  </select>
  <div class="btn-group">
    <button class="btn" onclick="showOrderMsg()">我要訂購</button>
    <button class="btn" onclick="showInfoMsg()">認識工廠</button>
  </div>


<div class="orderInfo">
  <h2>您的訂單</h2>
  <ul class="orderInfo-list">
    <li id="customName">顧客姓名:<span id="name"></span></li>
    <li id="clothesCategory">服裝分類:<span id="category"></span></li>
    <li id="clothestype">服裝類型:<span id="type"></span></li>
  </ul>
</div>

CSS

*{
    box-sizing: border-box;
}
select{
  display: block;
  width: 200px;
  padding: 5px;
  margin: 5px auto;
  border: 2px solid #CAC531;
  border-radius: 100px;
}
.btn-group{
  display: flex;
  justify-content: space-between;
  width: 200px;
  margin: 10px auto;
}
.btn{
  padding: 6px 8px;
  border: 1px solid #CAC531;
  border-radius: 200px;
  box-shadow: 1px 1px 10px #bbb;
  font-size: 14px;
  font-weight: 600;
  color: #CAC531;
  background-color: #F3F9A7;
  cursor: pointer;
  transition: 0.3s;
}
.btn:hover{
  opacity: 0.8;
}
#input-customName{
  display: block;
  width: 200px;
  padding: 5px 10px;
  margin: auto;
  border: 2px solid #CAC531;
  border-radius: 100px;
}
#input-customName:focus,
select:focus{
  outline: none;
}
.orderInfo{
  width: 200px;
  margin: auto;
  padding: 10px 0;
  border-radius: 20px;
  box-shadow: 1px 1px 10px #bbb;
  background: #EDE574; 
  background: -webkit-linear-gradient(to right, #E1F5C4, #EDE574);  
  background: linear-gradient(to right, #E1F5C4, #EDE574); 
  color: #CAC531;
}
.orderInfo h2{
  text-align: center;
  border-bottom: 2px solid #EDE574;
  color: #FDC830;
}
.orderInfo-list{
  list-style: none;
  font-weight: 600;
}
.orderInfo-list span{
  margin-left: 0.5em;
}

JavaScript

function showOrderMsg(){
	var customName = document.getElementById('input-customName').value;
 	
  var categoryList = document.getElementById('category-list');
  var indexCate = categoryList.selectedIndex;
  var selectedCategory = categoryList.options[indexCate].text;
  
  var typeList = document.getElementById('type-list');
  var indexType = typeList.selectedIndex;
  var selectedType = typeList.options[indexType].text;
  
  document.getElementById('name').textContent = customName;
  document.getElementById('category').textContent = selectedCategory;
  document.getElementById('type').textContent = selectedType;
     
	alert(customName + '您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
  
   if(selectedCategory == categoryList.options[0].text){
  	alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶');
  }else{
  	alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！');
  }

}

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