# 2022/10/24 Capstone
### HTML small excercise

<div class="loginbox">
        <input type="email" id="account" placeholder="Please enter email">
        <input type="password" id="pwd" placeholder="Please enter least 6 bits">
        <button id="submitBtn">Enter</button>
 </div>

:::info
* 命名方式：
* class：將元素歸為某特定類別，通常也會有很多元素屬於同一種類別。
* id：整個頁面中的元素名稱也不應有重複。
* [input type](https://www.runoob.com/tags/att-input-type.html)：
* e-mail：定義E-MAIL地址。
* text： 定義單行的輸入字段，用戶可在其中輸入文本。
* password：定義密碼字段。該字段中的字符被掩碼。
* placeholder：專門放在 input 這個文字輸入欄位裡面的一個輔助的屬性，可以作為提醒、欄位說明等等的功能。
:::

### CSS small excercise

body {
  width: 600px;
  margin: 0 auto;
  /* top-bottom | left-right */
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  /* top | right | bottom | left */
  border: 5px solid black;
  /* width | style | color */
}
.loginbox{
  display: block;
  margin: 0 auto;
}
input{
  width:200px;
  height:20px;
  border-radius:5px;
  border:1px solid white;
}
button{
  padding:5px 15px; 
  background:#ccc;      
  border:0 none;
  cursor:pointer;
  border-radius: 5px;
}

:::info
* 針對<tagname></tagname>
* body：對html file內「全體」做css
* input：對html file內「input」做css
* button：對html file內「button」做css
* 針對命名規則:
* .loginbox：對class屬性名稱為loginbox的element或div做css。
* width：寬度
* height：高度
* margin：屬性用來定義一個區域的外邊界距離。
* 可這樣定義：
* margin:上 右 下 左;
* margin:上下 左右;
* margin:上 左右 下;
* margin:四個邊同樣値;
* padding：可以控制區域的內部距離。
* 可這樣定義：
* padding:上 右 下 左;
* padding:上下 左右;
* padding:上 左右 下;
* padding:四個邊同樣値;
* border：邊框
* 可這樣定義：
* border: 邊框粗細 邊框顏色 邊框樣式;
* border-radius：圓角屬性
* 可這樣定義：
* border-radius:左上 右上 右下 左下;
* border-radius:全部的角皆會設成該值;
* background-color：背景顏色
* display：設定網頁元素的顯示類型，每一種不同的元素都會有自己的預設值
* block：區塊元素
* inline：內行元素
* 這兩者的差別在於顯示所占用的空間與型態
* cursor：鼠標操作
* cursor: pointer;
* cursor: help;
* cursor: wait;
* cursor: crosshair;
* cursor: not-allowed;
* cursor: zoom-in;
* cursor: grab;
:::

### JS

var account = document.getElementById("account");
var submitBtn = document.getElementById("submitBtn");

function FsubmitBtn(value) {
  var str = "";
  var submitValue = account.value;
  str = submitValue;
  alert(str);
    fetch('http://140.118.121.109:5678/login')
    .then(response => {
         return response.json();
    })
    .then(data =>{
         console.log(data);
    })
    .catch((error) => {
        console.log(`Error: ${error}`);
    })
}
submitBtn.addEventListener("click", FsubmitBtn);

:::info
* document.getElementById("account");//針對id="account"操作。
* submitBtn.addEventListener("click", FsubmitBtn);//針對submitBtn做click監聽，觸發名為FsubmitBtn之function
:::