JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<div class="container">
<input placeholder="請輸入名字 "id="keyword"/>
<select id="my-clothes">
<option text="請選擇服裝分類">請選擇服裝分類</option>
  <option text="男裝">男裝</option>
  <option text="女裝">女裝</option>
</select>
<select id="my-clothestype">
 <option text="請選擇服裝類型">請選擇服裝類型</option>
  <option text="外套">外套</option>
  <option text="上衣">上衣</option>
  <option text="下身">下身</option>
</select>
<button class="btn" onclick="order()">我要訂購</button>
<button class="btn" onclick="factory()">認識工廠</button>
</div>
<div class="customername">
<span>你的訂單</span>
<hr />
<span>顧客名稱:<span id="name"></span></span>
<br />
<span>服裝分類:<span id="clothes"></span></span>
<br />
<span>服裝類型:<span id="clothestype"></span></span>
</div>

CSS

* {
 
}
.btn {
  border:1px soild black;
  border-radius:10px;
   width: 100%;
  height: 10vh; 
}
.btn:hover{
  color:red;
  background-color: blue;
  border: 1px solid red;
  
}
.container {
   display: flex;
  align-items: center;
  justify-content: center;
  padding-right :10vh;
  padding-top :40vh;
  
}
.btn:first-child{
  margin-right: 1rem;
}
#keyword {
   width:250px;
   height:25px;
    border-radius:10px;
}
.customername {
  height:100px;
  width:200px;
 margin:10px auto;
  border: 1px solid black;
  
}
span {
    align-items:center;
}
select {
  width:120px;
  height:30px;
  border-radius: 10px / 5px;
}

JavaScript

function order()
{
  const getName= document.getElementById('keyword').value;
  const clothes = document.getElementById("my-clothes");
  const clothesindex = clothes.selectedIndex;
  const clothestext = clothes.options[clothesindex].text;
  const clothestype = document.getElementById("my-clothestype");
  const clothestypeindex = clothestype.selectedIndex;
  const clothestypetext = clothestype.options[clothestypeindex].text;
  if (getName === ''){
    alert("請輸入名字");
  } else {
  alert(getName + '您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
  if (clothestext === '男裝') {
    
  alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
  } else {
   alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！');
  }
  
  document.getElementById('name').textContent = getName;
  document.getElementById('clothes').textContent = clothestext;
  document.getElementById('clothestype').textContent = clothestypetext;
  }
  
}
function factory()
{
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}