CodeLove-JS-L4

by kulimusoda

HTML

<div class="wrap">
  <div class="header d-flex mb-3 justify-content-between">
    <h1>JS成衣批發工廠</h1>
    <button onclick="ourInfo()" class="mb-3">認識工廠</button>
  </div>
  <div class="col">
    <div class="mb-3">
      <label for="myName">請輸入名字：</label>
      <input type="text" id="myName" class="input inputName" placeholder="例：陳大明">
    </div>
    <div class="mb-3">
      <label for="myType">請選擇分類：</label>
      <select name="myType" id="myType" class="input">
        <option value="men">男裝</option>
        <option value="women">女裝</option>
        <option value="kid">童裝</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="myProduct">請選擇類型：</label>
      <select name="myProduct" id="myProduct" class="input">
        <option value="top">上身</option>
        <option value="bottom">下身</option>
        <option value="shoes">鞋款</option>
      </select>
    </div>
    <ul class="btnList d-flex justify-content-end mb-3">
      <li class="btnList-item"><button onclick="addPurchase()">我要訂購</button></li>
    </ul>
    <div class="card">
      <div class="card-title text-center bold">您的訂單</div>
      <div class="card-text light">
        <p>顧客姓名：<span id="orderName"></span></p>
        <p>服裝分類：<span id="orderType"></span></p>
        <p>服裝類型：<span id="orderProduct"></span></p>
      </div>
    </div>
  </div>

</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');

/* base */
*,*::before,::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body,button {
  font-family: 'Noto Sans TC', sans-serif;
}

h1 {
  font-size: 2rem;
}

button {
  padding: 0.5rem 1.25rem;
  background-color: #fff;
  color: navy;
  border: 1px solid navy;
  border-radius: 4px;
  cursor: pointer;
  transition: all 500ms ease;
  &:hover {
    background-color: navy;
    color: #fff;
  }
}

.wrap {
  padding: 1rem;
}

.col{
  width: 40vw;
}

.header{
    border-bottom: 2px solid #eee;
}

/* Utils */
.d-flex{
  display: flex;
}

.justify-content-between{
  justify-content: space-between;
}

.justify-content-end{
  justify-content: flex-end;
}

.mb-3{
  margin-bottom: 1rem;
}

.text-center{
  text-align: center;
}

.bold{
  font-weight: 700;
}

.light{
  font-weight: 300;
}

/* pages */

.btnList{
  &-item{
    &:not(:first-child){
      margin-left: 1rem;
    }
  }
}

.input{
    padding: 0.25rem;
  border-radius: 3px;
  border: 1px solid #777;
  &Name{
      width: 100%;
  }
}

.card{
  width: 70%;
  border: 2px dashed #777;
  padding: 0.5rem 1rem;
  &-title{
    margin-bottom: 0.5rem;
  }
}

JavaScript

function addPurchase() {
  let cName = document.getElementById("myName").value;
  let cType = document.getElementById("myType");
  let cProduct = document.getElementById("myProduct");
  document.getElementById("orderName").textContent = cName;
  document.getElementById("orderType").textContent = cType.options[cType.selectedIndex].text;
  document.getElementById("orderProduct").textContent = cProduct.options[cProduct.selectedIndex].text;
  alert(`${cName} 您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`);
}

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