Prosty kalkulator BMI

Przydatny po świątecznym obżarstwie. Taka wersja uproszczona.

Kalkulator BMI (Body Mass Index) daje każdemu możliwość szybkiego i wygodego obliczenia własnego wskaźnika masy ciała. BMI obliczamy dzieląc masę ciała (w kilogramach) przez wzrost do kwadratu (w metrach).

Przytyło się?

Użyj suwaków do ustawienia parametrów ciała.

20 kg

100 cm

20.0

Prawidłowa waga

Przelicznik wartości BMI:

mniej niż 16 – wygłodzenie
16 – 16.99 – wychudzenie
17 – 18.49 – niedowaga
18.5 – 24.99 – wartość prawidłowa
25 – 29.99 – nadwaga
30 – 34.99 – I stopień otyłości
35 – 39.99 – II stopień otyłości
powyżej 40 – skrajna otyłość

Jak wstawić gadżet na własną stronę?

Można ręcznie, lub pobrać gotowca.

Tworzymy odpowiednie pliki w nowym folderze:

index.html
style.css
script.js

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Kalkulator BMI</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <input type="range" min="20" max="200" value="20" id="weight" oninput="calculate()">
            <span id="weight-val">20 kg</span>
        </div>
        <div class="row">
            <input type="range" min="100" max="250" value="100" id="height" oninput="calculate()">
            <span id="height-val">100 cm</span>
        </div>

        <p id="result">20.0</p>
        <p id="category">Prawidłowa waga</p>
    </div>

    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

style.css

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #ffffff;
}
.container{
    background-color: #fafafa;
    padding: 40px 30px;
    width: 50%;
    min-width: 400px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    border: solid 1px #eaeaea; 
}
.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.row span{
    font-weight: 500;
}
input[type="range"]{
    width: 70%;
    height: 3.5px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #dcdcdc;
    border-radius: 3px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-color: #2196f3;
    border-radius: 50%;
    cursor: pointer;
}
#result{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    color: #0be881;
}
#category{
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
}

script.js

// JavaScript Document
// www.skrip.pl
function calculate(){
    var bmi;
    var result = document.getElementById("result");

    var weight = parseInt(document.getElementById("weight").value);
    document.getElementById("weight-val").textContent = weight + " kg";

    var height = parseInt(document.getElementById("height").value);
    document.getElementById("height-val").textContent = height + " cm";

    bmi = (weight / Math.pow( (height/100), 2 )).toFixed(1);
    result.textContent = bmi;
    
    if(bmi < 18.5){
        category = "Niedowaga";
        result.style.color = "#ffc44d";
    }
    else if( bmi >= 18.5 && bmi <= 24.9 ){
        category = "Prawidłowa waga";
        result.style.color = "#0be881";
    }
    else if( bmi >= 25 && bmi <= 29.9 ){
        category = "Nadwaga";
        result.style.color = "#ff884d";
    }
    else{
        category = "Otyłość";
        result.style.color = "#ff5e57";
    }
    document.getElementById("category").textContent = category;
}

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Prosty Kalkulator BMI

Kalkulator BMI (Body Mass Index) daje każdemu możliwość szybkiego i wygodnego obliczenia własnego wskaźnika masy ciała.

Prosty kalkulator BMI

Przytyło się?

Użyj suwaków do ustawienia parametrów ciała.

Przelicznik wartości BMI:

Jak wstawić gadżet na własną stronę?

index.html

style.css

script.js

Lub można pobrać gotowca.

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy