JSFiddle - React, Tailwind, and code Playground

by ElaineYang

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="wrap">
 <label for="name">請輸入您的大名:</label>
<input id="name" type="text/">
</div>


<br>
<button onclick="myFunction()">我要訂購</button>
<button onclick="know()">認識廠商</button>


    
</body>
</html>

CSS

button:hover{
  background: aqua;
 
}

button{
  width:200px;
  font-size:20px;
  margin:10px;
  border-radius: 10px;
  font-weight:600;
  
}
#name:hover{
  background:aqua;;
  opacity:50%;
  
  
}

#name{
  color:black;
  
}
  
.wrap{
  width:900px;
  margin-top:20px;
  /* background:pink; */
  display:flex;
  /* justify-content:center; */
  

}

JavaScript

function myFunction(){
var how=document.getElementById('name').value;
alert(how + "您好!謝謝您對我們的衣服有興趣!請致電0987-654-321,會有專人提供您報價!");
}

function know(){
alert("「我們工廠位於新北市,通過國際ISO9001認證,品質讓您放心!」");
}