JSFiddle - React, Tailwind, and code Playground

by kushmuffin

HTML

<fieldset>
  <legend>
    輸入訂單
  </legend>
  <section>
    <div>
      <label>您的姓名: </label>
      <input id="username" type="text" value="Lee" />
    </div>

    <div class="selectGroup">
      <select id="genderType">
        <option value="" selected disabled>分類</option>
        <option value="male">男裝</option>
        <option value="female">女裝</option>
      </select>

      <select id="clothesType">
        <option value="" selected disabled>類型</option>
        <option value="coat">外套</option>
        <option value="jacket">上衣</option>
        <option value="Pants">下身</option>
      </select>
    </div>

    <div>
      <button class="btn" onclick="order()">我想訂購</button>
      <button class="btn" onclick="aboutUs()">認識工廠</button>
    </div>

    <div class="list">
      <span>您的訂單</span>
      <br>
      <span>顧客姓名：</span><span id="user"></span>
      <br>
      <span>服裝分類：</span><span id="gender"></span>
      <br>
      <span>服裝類型：</span><span id="clothes"></span>
    </div>
  </section>
</fieldset>

CSS

* {
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}

fieldset {
  padding: 1em;
  width: 400px;
  border: 1px solid rgba(0, 0, 255, 0.2);
  border-radius: 0.5em;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

select {
  width: 100%;
  margin: 0px;
  border-radius: 0.5em;
}

.order {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#username {
  margin: 2px;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 5px;
  width: 65px;
}

.btn {
  margin: 5px;
  padding: 5px;
  border: 0.5px;
  border-radius: 10px;
}

.btn:hover {
  color: white;
  background-color: gray;
  transform: translateX(5px);
  transition: transform 0.4s linear 0s;
}

.list {
  width: 50%;
  padding: .5rem;
  background-color: lightgray;
  border-radius: 5px;
}

JavaScript

function order() {
  let name = document.getElementById('username').value;

  let gender = document.getElementById('genderType');
  let genderIndex = gender.selectedIndex;
  let genderValue = gender.options[genderIndex].value;
  let genderText = gender.options[genderIndex].text;

  let typesIndex = document.querySelector("#clothesType").selectedIndex;
  let typesText =
    document.querySelector("#clothesType").options[typesIndex].text;
  let typesValue =
    document.querySelector("#clothesType").options[typesIndex].value;
  if (name == "") {
    alert("請輸入姓名")
  } else if (gender == "" || typesIndex == "") {
    alert("請選擇分類及類型")
  } else {
    alert(name + '您好！ 謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
    document.getElementById('user').textContent = name;
    document.getElementById('gender').textContent = genderText;
    /* document.getElementById('clothesType').textContent = typesText; */
    document.querySelector("#clothes").textContent = typesText;
  }
}

function aboutUs() {
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}