JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<body>
<div id="input">
<label>請輸入您的姓名：</label>
<input type=text id="name">
</div>

<div>
<button onclick="order()">
我要訂購
</button>
<button onclick="aboutus()">
認識工廠
</button>
</div>

</body>

CSS

body{
height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 background-color: CornflowerBlue;
}
button {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 0.5rem;
  border: none;
  background-color: #FFFFA1;
}
#name{
  width: 30vh;
  height: 20px;
  border-radius: 0.5rem;
  border: none;
}
#input{
  margin: 5px;
}
#input label{
  color: darkblue;
}

JavaScript

let us = '我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！'
let purchase = '謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！'



function order(){
let str=document.getElementById('name').value;
alert('您好 '+str+','+ us)
}

function aboutus(){
let str=document.getElementById('name').value;
alert('您好 '+ str +','+ purchase)
}