JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<body>
  <div id="input">
    <label>請輸入您的姓名：</label>
    <input type=text id="name">
  </div>

  <div>
    <button onclick="order()">
      我要訂購
    </button>
    <button onclick="aboutus()">
      認識工廠
    </button>
  </div>
  <div class="confirm">
    <div class="name1">
      <label > -----[我要訂購]-----</label>
    </div>
    <div class="name1">
      <label >您的訂單</label>
    </div>
    <div class="name1">
      <label >您的姓名：</label>
      <label id="ordername"></label>
    </div>

  </div>
</body>

CSS

body{
height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 background-color: CornflowerBlue;
}
button {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 0.5rem;
  border: none;
  background-color: #FFFFA1;
}
.name{
  width: 30vh;
  height: 20px;
  border-radius: 0.5rem;
  border: none;
  outline: none;
}
#input{
  margin: 5px;
}
#input label{
  color: darkblue;
}
.confirm{
  padding: 8px;
  background-color: #E8E8E8;
  border-radius: 0.5rem;
  width: 25%;
}

.name1{
  padding-top: 3px;
  margin-top: 2px;
}

JavaScript

let us = '我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！'
let purchase = '謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！'



function order(){
let str=document.getElementById('name').value;
alert('您好 '+str+','+ us);

document.getElementById('ordername').textContent = str;
}

function aboutus(){
let str=document.getElementById('name').value;
alert('您好 '+ str +','+ purchase)
}