JSFiddle - React, Tailwind, and code Playground

by 81ue_lan

HTML

<input id="input-customName" type="text" placeholder="訂購者姓名">
<button class="btn" onclick="showOrderMsg()">我要訂購</button>
<button class="btn" onclick="showInfoMsg()">認識工廠</button>

<div class="orderInfo">
  <h2>您的訂單</h2>
  <ul class="orderInfo-list">
    <li id="customName">顧客姓名:<span id="name"></span></li>
  </ul>
</div>

CSS

.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{
  padding: 5px 10px;
  border: 2px solid #CAC531;
  border-radius: 100px;
}
#input-customName: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;
}
.orderInfo-list{
  list-style: none;
}

JavaScript

function showOrderMsg(){
	var customName = document.getElementById('input-customName').value;
	
	alert(customName + '您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
  document.getElementById('name').textContent = customName;

}

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