JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<div class = "back">
<div class = "page">
<input id = "name" type = "text" placeholder = "請輸入貴賓姓名"/>
<button class = "btn" onclick = "myfunction()">
我要訂購
</button>

<button class = "btn" onclick = "myfunction2()">
認識工廠
</button>
</div>
<hr>
<div class = "paper">
<h4>
您的訂單
</h4>
<h4 id = "vipname">
顧客姓名 : 
</h4>
</div>
<br>
</div>

CSS

.btn{
  width: 100px;
  height: 50px;
  font-size: 17px;
  border-radius: 10px;
  margin: 1em;
  color: white;
  background-color: rgb(183 60 88);
  font-weight: bold;
}

.btn:hover{
  background-color: #913147;
}

.page{
  display: flex;
  justify-content: center;
}

.btn:active{
  transform: scale(0.9);
}

#name{
  border-radius: 10px;
  height: 30px;
  margin: auto 0px;
}

.back{
  background-color: #f6e4e8;
}

.paper{
  background-color: #de9dab;
  width: 250px;
  padding: 20px 50px;
  margin: 20px 20px 20px 0px;
}

hr{
  width: 500px;
}

body{
  margin: 0px;
}

#vipname{
  color: white;
  background-color: #216254;
  padding: 2px;
  width: 296px;
}

JavaScript

function myfunction(){
var str = document.getElementById("name").value;
alert(str+"您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");
document.getElementById("vipname").textContent ="顧客姓名:"+str;
}

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