JavaScript 系列一：第2課

by tp655998

HTML

<fieldset class="contact-group">
   <input type="text" id="user-name" placeholder="您的姓名" value="">
   
  <section class="btn-group">
    <button class="btn order" onclick="order()">我要訂購</button>
    <button class="btn about" onclick="about()">認識工廠</button>  
  </section>
</fieldset>

CSS

button{
  border: none;
}
html{
  height: 100%;
}
body{
  height: 100%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.contact-group{
  display: grid;
  grid-template-columns: 3fr;
  border-radius: .5rem;
  box-shadow: 0 0 .5rem #666;
  padding: 1rem;
}

#user-name{
  padding: .5rem;
  border: 1px solid #aaa;
  border-radius: .5rem;
}

.btn-group{
  margin-top: .5rem; 
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
}


.btn{
  padding: .5rem;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: .5rem;
}

.btn:hover{
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

.order{
  background-color: #EBB471;
}

JavaScript

function order()
{
	const username = document.getElementById('user-name').value;
  alert(username + '您好！' + '謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
}

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