تصنيف كتلة الجسم حسب مقياس BMI

تصنيف كتلة الجسم حسب مقياس BMI

html

<div class="container">
    <h1>تصنيف كتلة الجسم حسب مقياس BMI</h1>
    <form id="form" class="form" action="#" method="GET">
        <input id="weight" name="weight" type="text" placeholder="ادخل الوزن بالكيلوجرام" autofocus autocomplete="off">
        <input id="length" type="text" placeholder="ادخل الطول بالمتر" autocomplete="off">
        <button id="btn" type="submit">حساب</button>
    </form>

    <div class="container2">
        <span class="close">x</span>
        <div class="result">

            <div class="top">
                <div class="top">
                    <div class="value-div">
                        <p>وزنك </p>
                        <span class="weight-value">  كجم</span>
                    </div>
                    <div class="value-div">
                        <p>طولك </p>
                        <span class="length-value">  م</span>
                    </div>
                    <div class="value-div">
                        <p>مؤشر الكتلة </p>
                        <span class="bmi-value"></span>
                    </div>
                </div>
            </div>

            <div class="bottom">
                <p></p>
            </div>

        </div>
    </div>
</div>

css

body{
    font-family: 'Cairo', sans-serif;
    background-color: #fff; 
    width:100%;
    min-height: 100vh; 
    margin: 0;
    padding: 0;
    direction: rtl;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #161623;
    width: 100%;
    min-height: 100vh;
}
h1 {
    color: #fff;
    margin-bottom: 30px;
}
.form {
    padding: 40px 20px 30px;
    background-color: goldenrod;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    min-width: 400px;
}
.form input,
.form button {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: none;
}
.form input {
    color: #161623;
}
.form button {
    background-color: #161623;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}
.form input:focus {
    outline: none;
}
.form button:active {
    border: none;
    outline: none;
}
.container2 {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    display: grid;
    place-items: center;
    display: none;
}
.close {
    position: absolute;
    font-size: 1.5rem;
    height: 40px;
    width: 40px;
    top: 20px;
    right: 20px;
    color: #fff;
    border-radius: 50%;
    border: 0.5px solid #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.result {
    padding: 20px;
    color: #161623;
    background-color: #fff;
    border-radius: 10px;
    min-width: 400px;
}
.result .top {
    margin-bottom: 15px;
}
.result .top .value-div{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.result .top .value-div p {
    font-size: 1.5rem;
    padding: 7px;
    flex: 1 1 50%;
    margin: 0;
}

.result .top .value-div span {
    background-color: goldenrod;
    color: #161623;
    padding: 7px;
    font-weight: bold;
    font-size: 1.3rem;
    border-radius: 5px 0 0 5px;
    flex: 1 1 50%;
}

.result .bottom p {
    padding: 10px;
    background-color: goldenrod;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 1.3rem;
    text-align: center;
}

javascript

var weight = document.getElementById("weight");
var length = document.getElementById("length");
var form    = document.getElementById("form");
var container = document.querySelector(".container2");
var result = document.querySelector(".top");
var weightValueSpan = document.querySelector(".weight-value");
var lengthValueSpan = document.querySelector(".length-value");
var bmiValueSpan = document.querySelector(".bmi-value");
var resultP = document.querySelector(".bottom p");
var close = document.querySelector(".close");


form.addEventListener("submit", (e) => {
    var weightValue = weight.value;
    var lengthValue = length.value;

    if (weightValue == '' || lengthValue == '') {
        alert("هذا الحقل مطلوب")
    }else if (isNaN(weightValue) || isNaN(lengthValue)) {
        alert("القيمة المدخله يجب ان تكون رقم")
    }else {
        e.preventDefault()
        var bmi = weightValue / (lengthValue * lengthValue);

        container.style.display = "grid";

        weightValueSpan.innerHTML = `${weightValue} كجم`;
        lengthValueSpan.innerHTML = `${lengthValue} م`;
        bmiValueSpan.innerHTML = bmi.toFixed(2);

        if (bmi < 18) {resultP.innerHTML = `نحيف`
        }else if (bmi < 24.9) {resultP.innerHTML = `وزن مثالي`
        }else if (bmi < 29.9) {resultP.innerHTML = `وزن زائد`
        }else if (bmi < 34.9) {resultP.innerHTML = `سمنه درجة اولى`
        }else if (bmi < 39.9) {resultP.innerHTML = `سمنه درجة ثانية`
        }else {resultP.innerHTML = `سمنة مفرطة`}

        close.addEventListener("click", () => {container.style.display = "none"})
        weight.value = " ";
    length.value = " ";
    }

    
})