JSFiddle - React, Tailwind, and code Playground

by tzuuu

HTML

<! DOCTYPE html>
  <html lang="zh-TW">

    <head>
      <title>線上下單</title>
      <meta charset="utf-8" />
    </head>

    <body>
      <h1> 線上下單 </h1>
      <lable for="name">姓名：</lable><input type="text" id="name" />
      <br />
      <button onClick="order()">我要訂購</button>
      <button onClick="info()">認識工廠</button>
    </body>

  </html>

CSS

h1{
  border: 5px;
  margin: 5px;
  padding: 5px;
}
button {
  border: 10px;
  border-radius: 10px;
  margin: 10px;
  padding: 5px 10px;
  background-color: #ADC2B5;
}

button:hover {
  font-weight: bold;
  cursor: pointer;
  border: 3px solid black;
}

JavaScript

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