JSFiddle - React, Tailwind, and code Playground

by kushmuffin

HTML

<fieldset>
<legend>
輸入訂單
</legend>
<label>您的姓名: </label>
<input id="username" type="text" value="Lee"/>
<br>

<button class="btn" onclick="order()">我想訂購</button>
<button class="btn" onclick="aboutUs()">認識工廠</button>
<hr class="hr1">
<div class="list">
  <span>您的訂單</span>
  <br>
  <span>顧客姓名：</span><span id="subscriber"></span>
</div>


</fieldset>

CSS

*{
 padding: 0; 
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:1rem;
  height: 100%;
}
fieldset{
  padding: 1em;
  width: 400px;
  border: 1px solid rgba(0,0,255,0.2);
  border-radius: 0.5em;
}
#username{
  margin:2px;
  padding:3px;
  border:1px solid gray;
  border-radius:5px;
  width:65px;
}
.btn {
  margin: 5px;
  padding: 5px;
  border: 0.5px;
  border-radius: 10px;
}
.btn:hover{
  color: white;
  background-color: gray;
  transform: translateX(5px);
  transition: transform 0.4s linear 0s;
}
.hr1{
  border: 1px solid black;
}
.list{
  width: 50%;
  padding: .5rem;
  background-color:lightgray;
  border-radius:5px;
}

JavaScript

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

  var str = document.getElementById('username').value;
  document.getElementById('subscriber').textContent = str;
}

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