JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<div class="container">
<input placeholder="請輸入名字 "id="keyword"/>
<button class="btn" onclick="order()">我要訂購</button>
<button class="btn" onclick="factory()">認識工廠</button>
</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 :45vh;
  
}
.btn:first-child{
  margin-right: 1rem;
}
#keyword {
   width:250px;
   height:25px;
    border-radius:10px;
}

JavaScript

function order()
{
  const getName= document.getElementById('keyword').value;
  if (getName === ''){
    alert("請輸入名字");
  } else {
  alert(getName + '您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');  
  }
  
}
function factory()
{
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}