JSFiddle - React, Tailwind, and code Playground

by ossianwork

HTML

<fieldset>
  <legend>線上下單</legend>
  <input type="text" id="user-name" placeholder="你的姓名">
  <div class="btn-group">
    <button onclick="check('謝謝您對我們的衣服有興趣！請致電 0800-950-950，會有專人提供您報價！')">我要訂購</button>
    <button class="btn-2" onclick="check2('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')">認識工廠</button>
  </div>
  <dl id="customer-list">
    <dt>您的訂單</dt>
    <dd>顧客姓名：<span id="customer"></span></dd>
  </dl>
</fieldset>

CSS

*{
    box-sizing: border-box;
}
:root{
  --yellow: #ffd954;
}
html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111;
  height: 100%;
}
fieldset{
  padding: 1em;
  width: 300px;
  color: white;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.5em;
}
legend{
  color: white;
}
input, button{
  padding: 0.75em;
  outline: none;
  border: none;
  width: 100%;
}
button{
  background-color: var(--yellow);
  border-radius: 5px;
  cursor: pointer;
}
.btn-2{
  color: white;
  background-color: #444;
}
.btn-group{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5em;
  padding-top: 0.5em;
}
dl, dt, dd{
  margin: 0;
  padding: 0;
}
dl{
  display: none;
  margin: 2em 0;
  border-top: 3px solid rgba(255,255,255,0.15);
}
dt{
  padding: 0.5em 0;
  text-align: center;
}
dd{
  padding: 0.5em 0;
  font-size: 0.85em;
  color: #999;
  border-top: 1px dashed rgba(255,255,255,0.15);
}
#customer{
  color: var(--yellow);
}

JavaScript

function check(msg){

  const username = document.getElementById('user-name').value;
  document.getElementById('customer').textContent = username;
  alert(username + "您好！" + msg);
  const status = document.getElementById('customer-list');
  status.style.display = "block";

}

function check2(msg){

  const username = document.getElementById('user-name').value;
  alert(msg);

}