JSFiddle - React, Tailwind, and code Playground

by ossianwork

HTML

<fieldset>
  <legend>線上下單</legend>
  <div class="line">
    <input type="text" id="user-name" placeholder="你的姓名">
  </div>
  <div class="line two">
    <select id="dressSort">
      <optgroup label="服裝分類">
        <option value="男裝">男裝</option>
        <option value="女裝">女裝</option>
      </optgroup>
    </select>
    <select id="dressType">
      <optgroup label="服裝類型">
        <option value="外套">外套</option>
        <option value="上衣">上衣</option>
        <option value="下身">下身</option>
      </optgroup>
    </select>
  </div>
  <div class="btn-group">
    <button onclick="check('謝謝您對我們的衣服有興趣！請致電 0800-950-950，會有專人提供您報價！')">我要訂購</button>
    <button class="btn-2" onclick="companyInfo('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')">認識工廠</button>
  </div>
  <dl id="order-list">
    <dt>您的訂單</dt>
    <dd>顧客姓名：<span id="customer"></span></dd>
    <dd>服裝分類：<span id="dressSortContent"></span></dd>
    <dd>服裝類型：<span id="dressTypeContent"></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, select{
  padding: 0.75em;
  outline: none;
  border: none;
  width: 100%;
  color: #aaa;
  border-radius: 5px;
  background-color: transparent;
  transition: 0.3s color;
}
option, option:hover, optgroup, optgroup:hover{
  color: black;
}
input::placeholder {
  color: #aaa;
}
input:hover, button:hover, select:hover{
  color: white;
}
button{
  color: black;
  background-color: var(--yellow);
  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;
}
dt{
  padding: 0.5em 0;
  text-align: center;
  border-top: 3px solid rgba(255,255,255,0.15);
}
dd{
  padding: 0.5em 0;
  font-size: 0.85em;
  color: #999;
  border-top: 1px dashed rgba(255,255,255,0.15);
}
#customer, #dressSortContent, #dressTypeContent{
  color: var(--yellow);
}
.line{
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: 1fr;
  margin-top: 0.5em;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.line.two{
  grid-template-columns: 1fr 1fr;
}

JavaScript

function check(msg){

  const username = document.getElementById('user-name').value;
  document.getElementById('customer').textContent = username;
  
  function printSelect(a, b){
  	const userSelect = document.getElementById(a);
    const userSelectIndex = userSelect.selectedIndex;
    document.getElementById(b).textContent = userSelect.options[userSelectIndex].value;
  }
  
	printSelect("dressSort", "dressSortContent");
  printSelect("dressType", "dressTypeContent");
  
  alert(username + "您好！" + msg);
  const status = document.getElementById('order-list');
  status.style = "display: block";
  
}

function companyInfo(msg){

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

}