# jQuery製作 BMI計算機

###### tags: `jQuery` `JavaScript` `jQuery Mobile`

---

### 使用jQuery的range製作
:::info
<input type="range" name="height" id="height" min="100" max="200" step="1" value="160">
:::

<!-- CONTENT -->
<div role="main" class="ui-content">
    <div data-role="fieldcontain">
        <label for="height">身高(CM)</label>
        <input type="range" name="height" id="height" min="100" max="200" step="1" value="160">
    </div>	
    <div data-role="fieldcontain">
        <label for="weight">體重(KG)</label>
        <input type="range" name="weight" id="weight" min="30" max="200" step="1" value="50">
    </div>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <a href="#" data-role="button" data-theme="b" data-icon="info" id="again-btn">初始化</a>
        </div>
        <div class="ui-block-b">
            <a href="#" data-role="button" data-theme="b" data-icon="info" class="ui-btn-active"id="ok-btn">確認計算</a>
        </div>
    </div>
    <div id="info"></div>
</div><!-- /CONTENT -->    

### JS code
:::info
使用toFixed()涵式
bmi = bmi.toFixed(2);
:::

//1.起手式先監聽點擊
$(function(){
    $("#ok-btn").bind("click",function(){ 
    
        //2.定義變數方便code閱讀
        var w = $("#weight").val();
        var h = $("#height").val()/100;
        var bmi = w/(h*h);
        
        //3.使用toFixed()涵式 取bmi到小數點第二位
        bmi = bmi.toFixed(2);
        
        //4.判斷式，寫入資訊到#info
        if(bmi<18.5){
            $("#info").html("您的BMI為"+bmi+"，體重過輕!");  
            $("#info").css("color","blue");
        }else if(bmi>18.5 && bmi<24){
            $("#info").html("您的BMI為"+bmi+"，體重正常!");   
            $("#info").css("color","green");   				
        }else if(bmi>24){
            $("#info").html("您的BMI為"+bmi+"，體重過重!");    
            $("#info").css("color","red");  				
        }     	
    });
});


---
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>