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>
  <input id="getquantity" type="text" placeholder="請輸入數量...">
  <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>訂購數量:<spen id="quantity"></spen></div>
  <div>初步估價:<spen id="price"></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 = '「最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！」'
  //input區的宣告
  var keyword = document.getElementById('name').value;
  var forquantity = document.getElementById('getquantity').value;
  //select分類區宣告
  var menu = document.getElementById("gender");
  var index = menu.selectedIndex;
  var text =  menu.options[index].text;
  //select款式區宣告
  var menu1 = document.getElementById("clothingtype");
  var index1 = menu1.selectedIndex;
  var text1 = menu1.options[index1].text;
	

  
  //input區的呈現紙本區
  document.getElementById('name1').textContent = keyword;
  document.getElementById('quantity').textContent = forquantity + "件";
	
  
  //select區的呈現紙本區
  document.getElementById('Classification').textContent = text;
  document.getElementById('style').textContent = text1;

  alert(keyword + message);
  if (text == '男裝') {
    alert(tie)
    var price = parseInt(forquantity) * 600 
    document.getElementById('price').textContent = price + "元" //價格紙本
  } 
  else if(text== '女裝') {
    alert(scarf);
    var price = parseInt(forquantity) * 500
    document.getElementById('price').textContent = price + "元"//價格紙本
  } else{
    
  }
  
 }
  

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