JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

<input id="name" text="text" placeholder="請輸入你的名字..." />
<br>
  <!-- 服裝分類 -->
<select id="clothing-cat">
  <option value="none" selected disabled hidden>選擇服裝分類</option>
  <option value="men">男裝</option>
  <option value="women">女裝</option>
</select>
<br>
<!-- 服裝類型 -->
<select id="clothing-type">
  <option value="none" selected disabled hidden>選擇服裝類型</option>
  <option value="coat">外套</option>
  <option value="top">上衣</option>
  <option value="bottom">下身</option>
</select>
<br>
<input id="count" type="number" placeholder="請輸入訂購數量...">
<br>

<button onclick="clickBtn1()" class="btn">我要訂購</button>
<button onclick="clickBtn2()" class="btn">認識工廠</button>
<!-- 訂單資訊 -->
<div class="list-info">
  <h3>您的訂單</h3>
  <hr>
  <span>顧客姓名：</span><span id="subscriber"></span>
  <br>
  <span>服裝分類：</span><span id="cat"></span>
  <br>
  <span>服裝類型：</span><span id="type"></span>
  <br>
  <span>初步估價：</span><span id="total"></span>
</div>

CSS

#name {
  width: 302px;
  border: 0;
  border-radius: 3px;
  letter-spacing: 1px;
  color: #595959;
  background-color: #eee;
  padding: 8px;
  margin-bottom: 5px;
  outline: 0;
  
}



select {
  width: 318px;
  padding: 5px;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

#count {
  width: 300px;
  border: 1px solid ;
  border-radius: 3px;
  letter-spacing: 1px;
  color: #595959;
  padding: 8px;
  margin-bottom: 5px;
  
}

.btn {
  background-color: #fff;
  color: #178771;
  padding: 3px 10px;
  border: 1px solid #178771;
  border-radius: 3px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
  
}

.btn:hover {
  background-color: #178771;
  color: #fff;
}


/* list-info */

.list-info {
  background-color: #eee;
  width: 300px;
  padding: 10px;
  margin-top: 10px;
  
}

h3 {
  margin: 0;
  color: #595959;
  font-size: 16px;
  letter-spacing: 1px;
}

span {
  font-size: 14px;
  color: #595959;
  letter-spacing: 1px;
}

JavaScript

function clickBtn1(){
	var name = document.getElementById('name').value;
  var noName = '';
  var count = document.getElementById('count').value;
  
  if(name!=noName) {
  	if(count <= 0) {
    	alert('煩請輸入訂購數量');
    }
    
    else if (count > 5000) {
    	alert('抱歉，我們工廠的最高出貨量是 5,000 件');
    }
    
    else if (count < 100) {
     	alert('抱歉，我們工廠的最低出貨量是 100 件')
  }
    
    else {
      alert(name +'您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
      document.getElementById('subscriber').textContent = name;

      //服裝分類+初步估價
      var catMenu = document.getElementById('clothing-cat');
      var catIndex = catMenu.selectedIndex;
      var catText = catMenu.options[catIndex].text;
      var catValue = catMenu.options[catIndex].value;
      var men = 'men';
      var women = 'women';
      if (catValue == men) {
        alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！');
        var menPrice = 600;
        var total = menPrice * parseInt(count);
        document.getElementById('total').textContent = total;
      }
      else if (catValue == women) {
        alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！');
        var womenPrice = 500;
        var total = womenPrice * parseInt(count);
        document.getElementById('total').textContent = total;
      } 
      document.getElementById('cat').textContent = catText;

      //服裝類型
      var typeMenu = document.getElementById('clothing-type');
      var typeIndex = typeMenu.selectedIndex;
      var typeText = typeMenu.options[typeIndex].text;
      document.getElementById('type').textContent = typeText;
    }
  }
  else {
  	alert('煩請填寫您的大名');
  }
}

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