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>
        <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>
</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{
  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;
}

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

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