HTML と JavaScript を使用して簡単な BMI 計算機を作成する方法

14719 ワード
javascript programming webdev beginners テキストリンク
このチュートリアルでは、シンプルな html と JavaScript を使用して独自の BMI 計算機を作成する方法について説明します.

BMI計算機とは何ですか？



BMIはBody Mass Indexの略です. BMI 計算機は、身長の 2 乗に対する体重の比率を測定するために使用できる単純な計算機です. BMI 計算機の目的は、人が太りすぎか、体重不足か、または適切な体重かを調べることです.

BMI の式は次のように与えられます.

BMI = 体重/身長²

ここで、体重はキログラム単位、身長はメートル単位で測定されます. BMI の SI 単位は kg/m² で表されます.

注: BMI を使用して脂肪と筋肉を区別する方法はありません.したがって、筋肉量が原因でBMIが高い人は、肥満や過体重に関連する健康上の問題を心配する必要はありません.

前提条件:



このチュートリアルは、html、css、javascript の基本的な知識が既にあることを前提としており、javascript でコーディングする方法を学んでいて、練習用の小さなプロジェクトを探している人を対象としています.

このチュートリアルでは css を使用しないので、自由にこのプロジェクトのスタイルを設定してください.

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="calculator-container">
        <h1>BMI CALCULATOR</h1>
        <p>Height in meters:</p>
        <input class="height-input-field" type="text">
        <p>weight in kilograms:</p>
        <input class="weight-input-field" type="text"><br>
        <button class="calculate"> Calculate</button>
    </div>
    <h3 class="result"></h3>
    <p class="result-statement"></p>
    <script src="script.js"></script>
</body>
</html>


上記のコードは、プロジェクトで使用する HTML 全体です.複雑なことは何もありません.電卓に必要なすべての要素だけです.

Javascript コード:




var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

calculateButton.addEventListener("click", ()=>{

    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight/(height**2); 
    result.innerText = BMI;

    if(BMI < 18.5){
        statement.innerText = "Your BMI falls within the underweight range";    
    }else if((BMI > 18.5) && (BMI < 24.9)){
        statement.innerText = "Your BMI falls within the normal or healthy weight range";
    }else if((BMI > 25) && (BMI < 29.9 )){
        statement.innerText = "Your BMI falls within the overweight range";
    }else{
        statement.innerText = "Your BMI falls within the obese range";
    }
});


Javascript の説明:



JavaScript を説明するために、コードを 3 つの部分に分けてみましょう.

パート1：




var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;


コードのこの部分では、JavaScript で必要な html 要素を DOM から取得するだけでした.
上記のコードの最後の行で、BMI、身長、体重の変数を宣言しました.

パート2：




calculateButton.addEventListener("click", ()=>{

    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight/(height**2); 
    result.innerText = BMI;


コードのこの部分で最初にしたことは、計算ボタンにクリック イベント リスナーを追加することでした.

これは、計算ボタンがクリックされると、上記のコード スニペットにより、ユーザーから提供された身長と体重の値を保存し、それらの値を使用して BMI を計算できることを意味します.

最後に、上記のコードの最後の行により、計算された BMI 値をユーザーに表示できます.

パート 3:




if(BMI < 18.5){
        statement.innerText = "Your BMI falls within the underweight range";    
    }else if((BMI > 18.5) && (BMI < 24.9)){
        statement.innerText = "Your BMI falls within the normal or healthy weight range";
    }else if((BMI > 25) && (BMI < 29.9 )){
        statement.innerText = "Your BMI falls within the overweight range";
    }else{
        statement.innerText = "Your BMI falls within the obese range";
    }
});


これはコードの最後の部分です.この部分で関心があるのは、if/else ステートメントを使用して計算された BMI 値を評価することだけです.

18.5 未満の BMI は、BMI が低体重の範囲内にあることを意味します.

18.5 から 24.9 の間の BMI は、BMI が正常または健康な体重の範囲内にあることを意味します.

BMI が 25 ～ 29.9 の場合、BMI が太りすぎの範囲内にあることを意味します.

BMI が 29.9 を超えると、BMI が低体重の範囲内にあることを意味します.

ご不明な点がございましたら、下のコメント欄に残していただければ、できるだけ早くお答えできるよう最善を尽くします.
The following signatures couldn't be verified because the public key is not available: NO_PUBKEY 3B4
Inline event vs AddEventListener