HTML、CSS、JavaScript を使用して BMI 計算ツールを構築する-CSSチュートリアル-php.cn

HTML、CSS、JavaScript を使用して BMI 計算ツールを構築する

王林

リリース： 2024-08-09 05:28:52

オリジナル

381 人が閲覧しました

Building a BMI Calculator with HTML, CSS, and JavaScript

開発者の皆さん、こんにちは。今日は、私が最近取り組んだプロジェクトである BMI (Body Mass Index) 計算機を共有できることを嬉しく思います。このシンプルな Web アプリケーションは、ユーザーが身長と体重に基づいて BMI を計算するのに役立ち、健康状態を評価する簡単な方法を提供します。プロジェクトの詳細とその構築方法を詳しく見ていきましょう!

プロジェクト概要

BMI 計算ツールは、ユーザーが身長 (センチメートル単位) と体重 (キログラム単位) を入力できる使いやすいツールです。ボタンをクリックするだけで、アプリケーションは BMI を計算し、低体重、標準体重、過体重、肥満など、対応する健康カテゴリを表示します。

特徴

ユーザー入力: ユーザーは、身長と体重を入力フィールドに直接入力できます。
BMI 計算: アプリケーションは標準の計算式を使用して BMI を計算します。
健康カテゴリ: 計算された BMI に基づいて、アプリは関連する健康カテゴリを提供します。
レスポンシブデザイン: 電卓はレスポンシブになるように設計されており、さまざまなデバイス間でスムーズなエクスペリエンスを保証します。

使用されている技術

HTML: Web ページのコンテンツを構造化します。
CSS: アプリケーションのスタイルを設定し、クリーンでモダンな外観を提供します。
JavaScript: BMI 計算を処理し、DOM を更新して結果を表示します。

プロジェクトの構造

プロジェクト構造の概要を次に示します:

BMI-Calculator/
├── index.html
├── style.css
└── script.js

ログイン後にコピー

コードの説明

BMI 計算ツールを動作させるコードを詳しく見てみましょう。

HTML

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>BMI Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="header">
        <h1>BMI Calculator</h1>
    </div>
    <div class="container">
        <h1 class="heading">Body Mass Index (BMI)</h1>
        Your Height (cm):
        <input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
        Your Weight (kg):
        <input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
        <button class="btn" id="btn">Compute BMI</button>
        <input disabled type="text" class="input" id="bmi-result">
        <h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
    </div>
    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>
</html>

ログイン後にコピー

CSS

CSS は、ページを視覚的に魅力的で使いやすいものにするためにスタイルを設定します。レスポンシブな要素を備えたモダンでクリーンなデザインが特徴です。

body {
    margin: 0;
    background: linear-gradient(to left bottom, lightgreen, lightblue);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.container {
    background: rgba(255, 255, 255, 0.3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    margin: 5px;
}

.heading {
    font-size: 30px;
}

.input {
    padding: 10px 20px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    margin: 10px;
}

.btn {
    background-color: lightgreen;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.btn:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    transition: all 300ms ease;
}

.info-text {
    font-size: 20px;
    font-weight: 500;
}

.header {
    margin: 30px;
    text-align: center;
}

.footer {
    margin: 20px;
    text-align: center;
}

ログイン後にコピー

JavaScript

JavaScript は、ユーザーの入力に基づいて BMI を計算し、その結果で Web ページを更新するなど、アプリケーションのコア機能を処理します。

const btnE1 = document.getElementById("btn");
const resultE1 = document.getElementById("bmi-result");
const weightConditionE1 = document.getElementById("weight-condition");
const heightE1 = document.getElementById("height");
const weightE1 = document.getElementById("weight");

function calculateBMI() {
    const height = heightE1.value / 100;
    const weight = weightE1.value;
    const bmiValue = weight / (height * height);

    resultE1.value = bmiValue.toFixed(2);

    if (bmiValue < 18.5) {
        weightConditionE1.innerText = "Under Weight";
    } else if (bmiValue >= 18.5 && bmiValue <= 24.9) {
        weightConditionE1.innerText = "Normal Weight";
    } else if (bmiValue >= 25 && bmiValue <= 29.9) {
        weightConditionE1.innerText = "Over Weight";
    } else if (bmiValue > 30) {
        weightConditionE1.innerText = "Obesity";
    }
}

btnE1.addEventListener("click", calculateBMI);

ログイン後にコピー

ライブデモ

ここで BMI 計算ツールをライブで試すことができます。

結論

この BMI 計算ツールの構築は、HTML、CSS、JavaScript のスキルを向上させる価値のある経験でした。このプロジェクトでは、シンプルなアイデアをユーザーが活用できる実用的なツールにどのように変えることができるかを紹介します。同様のプロジェクトを構築しようとしている場合でも、単に Web 開発を検討している場合でも、このチュートリアルがあなたの旅のお役に立てば幸いです。コーディングを楽しんでください!