CodeLove-JS-L3

by kulimusoda

HTML

<div class="wrap">
  <h1 class="mb-3">JS成衣批發工廠</h1>
  <div class="col">
    <div class="mb-3">
      <p>請輸入名字：</p>
      <input type="text" id="urName" class="inputName" placeholder="例：陳大明">
    </div>
    <ul class="btnList d-flex justify-content-between mb-3">
      <li class="btnList-item"><button onclick="ourInfo()">認識工廠</button></li>
      <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="customerName"></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;
  border-bottom: 2px solid #eee;
}

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

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

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

.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;
    }
  }
}

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

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

JavaScript

function addPurchase() {
  let str = document.getElementById("urName").value;
  alert(`${str} 您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`);
  document.getElementById("customerName").textContent = str;
}

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