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 three">
    <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>
    <input type="number" min="1" placeholder="數量" value="1" id="quantity">
    
  </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>
    <dd>訂購數量：<span id="dressQuantity"></span></dd>
    <dd>初步估價：<span id="dressPrice"></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, #dressQuantity, #dressPrice{
  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;
}
.line.three{
  grid-template-columns: 1fr 1fr 1fr;
}

JavaScript

function check(msg){

  const username = document.getElementById('user-name').value;
  document.getElementById('customer').textContent = username;
  
  function printInput(a, b){
    const userInput = document.getElementById(a).value;
    document.getElementById(b).textContent = userInput;
  }
  
  function printSelect(a, b){
    const userSelect = document.getElementById(a);
    const userSelectIndex = userSelect.selectedIndex;
    document.getElementById(b).textContent = userSelect.options[userSelectIndex].value;
  }
  
  function showHideList(a){
  	const status = document.getElementById('order-list');
    status.style = "display: " + a;
  }
  
  if(username == ""){
  
  	alert("請輸入您的姓名");
    showHideList("none");
    
  }else{
    
    printSelect("dressSort", "dressSortContent");
    printSelect("dressType", "dressTypeContent");

    alert(username + "您好！" + msg);
    const status = document.getElementById('order-list');
    showHideList("block");
    
    const n = document.getElementById("dressSort");
    const o = n.selectedIndex;
    const q = document.getElementById("quantity");
    const r = parseInt(q.value);
    
    printInput("quantity", "dressQuantity");
    
    if (n.options[o].value == "男裝") {
    	const dress_r = r*600;
      document.getElementById("dressPrice").textContent = dress_r;
      alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
    } else if (n.options[o].value == "女裝") {
    	const dress_r = r*500;
      document.getElementById("dressPrice").textContent = dress_r;
      alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！");
    }
  }  
}

function companyInfo(msg){

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

}