JSFiddle - React, Tailwind, and code Playground

by skrbomb

HTML

<script src="https://kit.fontawesome.com/f39681e931.js" crossorigin="anonymous"></script>

<div class='wrap'>
  <h1>
    美秀團購
  </h1>
  <div class='username'>
    <label for='username'>訂購用戶名:</label>
    <input type='text' id='username' placeholder='請輸入訂購用戶名'>
  </div>
  <div class='btn'>
    <button onclick='orderList()'>
      <i class="fa-solid fa-pen-to-square" style="color: #74C0FC;"></i>
      <br>
      我要訂購
    </button>
    <button onclick='facInf()'>
      <i class="fa-solid fa-industry" style="color: #74C0FC;"></i>
      <br>
      認識工廠
    </button>
  </div>
  <div class=list-info>
    <h3>訂單確認區</h3>
    <p></p>
  </div>
</div>

CSS

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

.wrap{
  padding:15px;
  border:1px solid pink;
  width:400px;
  height:300px;
  display:flex;
  margin:50px auto;
  flex-direction:column;
  justify-content:start;
  align-items:center;
  background-color:skyblue;
}

.wrap>h1{
  margin-bottom:10px;
}

.username{
  margin-bottom:10px;
}

.username input{
  outline:none;
}

.btn{
  margin-bottom:10px;
}

.list-info h3::after{
  content:'';
  display:block;
  width:100px;
  height:1px;
  background-color:black;
  margin-top:10px;
}

JavaScript

const userName=document.querySelector('#username')
const listName=document.querySelector('.list-info p')
const orderList=function(){
	if(!userName.value){
  	alert('請輸入完整名稱')
    
  }else{
  		alert(`${userName.value}謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價`)
      listName.innerHTML=`${userName.value}訂購一箱香蕉`
  }
}

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