JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<body>
  <fieldset class="confirm">
    <legend style="padding-left: 10px;color:darkblue">線上下單</legend>
    <div class="center">
      <div class="name1">
        <label>您的姓名：</label>
        <input type=text id="name">
      </div>

      <div class="name1">
        <label>服裝分類：</label>
        <select id="gender">
          <option value="none">請選擇服裝分類</option>
          <option value="men">男裝</option>
          <option value="women">女裝</option>
        </select>

      </div>
      <div class="name1">
        <label>服裝類型：</label>
        <select id="type">
          <option value="none">請選擇服裝類型</option>
          <option value="coat">外套</option>
          <option value="top">上身</option>
          <option value="bottom">下身</option>
        </select>
      </div>
      <div class="name1">
      <label>訂購數量：</label>
      <input type=text id="num">
      </div>
      <div>
        <button id="btn" onclick="order();showDiv();">
          我要訂購
        </button>
        <button onclick="aboutus()">
          認識工廠
        </button>
      </div>
    </div>
  </fieldset>

  <div id="information">
    <div>
      <h3>
        您的訂單
      </h3>
    </div>
    <div>
      <label>姓名：</label>
      <label id="customName"></label>

    </div>
    <div>
      <label>服裝分類：</label>
      <label id="category"></label>
    </div>
    <div>
      <label>服裝類型：</label>
      <label id="selectType"></label>
    </div>
    <div>
      <label>訂購數量：</label>
      <label id="number"></label>
      </div>
      <div >
      <label>初步估價：</label>
      <label id="price"></label>
      </div>
  </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;
  outline: none;
}
select ,#num{
  width: 35vh;
  height: 25px;
  border-radius: 0.5rem;
  border: none;
  outline: none;
}
#input{
  margin: 5px;
}

.confirm{
  padding: 8px;
  background-color: LightSteelBlue;
  border-radius: 0.5rem;
  width: 50%;
}

.name1{
  padding: 5px;
}
fieldset{
  border: none;
}


.center{
  display: flex;
  align-items: center;
  flex-direction: column;
 justify-content: center;
}
h3{
border-bottom: 1px solid black;
width: 400px;
}
.information div{
 padding: 5px;
}
#information{
  display: none;
  color: blue;
}

JavaScript

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

function order() {
  let str = document.getElementById('name').value;
  let st = document.getElementById('gender');
  let gindex = st.selectedIndex
  let gtext = st.options[gindex].text;

  let tp = document.getElementById('type');
  let tindex = tp.selectedIndex
  let ttext = tp.options[tindex].text;
  alert('您好 ' + str + ',' + us);
  document.getElementById('customName').textContent = str;
  document.getElementById('category').textContent = gtext;
  document.getElementById('selectType').textContent = ttext;
   let totalnum = document.getElementById('num')
  let totalprice = document.getElementById('price')
  let orderNum = parseInt(totalnum.value);
  if (gindex == 1) {
    alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！')
 totalprice= 600 * orderNum;
  } else if (gindex == 2) {
    alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！')
    totalprice= 500 * orderNum;
  }
 document.getElementById('price').textContent = totalprice;
 document.getElementById('number').textContent = orderNum;
}

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

function showDiv() {
  let click = document.getElementById('information')
  click.style.display = "block";
}