Build a Body Fat Calculator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

index.html

 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Body Fat Calculator">
    <meta name="keywords" content="body, fat, calculator,fit, fat loss, gym, diet">
    <meta name="author" content="Szymon Trzepla">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>BF Calculator</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700&subset=latin-ext" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>

    <header>
        <div class="head">
            <h1>Body Fat Calculator</h1>
        </div>
    </header>

    <main>
        <div id="wrap" class="container">

            <!--            Metric/Imperial-->
            <div class="radios">
                <div id="select-system">

                    <div class="radio-wrap">
                        <input type="radio" name="system" id="metric" value="metric" aria-label="metric measure system" hidden checked>
                        <label for="metric" class="radio-inline"><span></span>Metryczny</label>
                    </div>

                    <div class="radio-wrap">
                        <input type="radio" name="system" id="imperial" value="us" aria-label="imperial measure system" hidden>
                        <label for="imperial" class="radio-inline"><span></span>Imperialny</label>
                    </div>

                </div>
                <!--sex-->
                <div id="select-sex">

                    <div class="radio-wrap">
                        <input type="radio" name="sex" id="male" value="male" aria-label="male" hidden checked>
                        <label for="male" class="radio-inline"><span></span>Mężczyzna</label>
                    </div>

                    <div class="radio-wrap">
                        <input type="radio" name="sex" id="female" value="female" aria-label="female" hidden>
                        <label for="female" class="radio-inline">
                        <span></span>Kobieta</label>
                    </div>
                </div>
            </div>
            <!--            InputForms US Navy Method-->
            <form id="input-form">
                <div class="form-group">
                    <label for="height" id="labelH">Wzrost [cm] : </label>
                    <input type="number" class="form-control" step="0.5" min='1' name="height" id="height">
                </div>

                <div class="form-group">
                    <label for="weight" id="labelW">Waga [kg] : </label>
                    <input type="number" class="form-control" step="0.5" min='1' name="weight" id="weight">
                </div>

                <div class="form-group">
                    <label for="neck" id="labelN">Kark [cm] : </label>
                    <input type="number" class="form-control" step="0.5" min='1' name="neck" id="neck">
                </div>

                <div class="form-group">
                    <label for="waist" id="labelWa">Talia [cm] : </label>
                    <input type="number" class="form-control" step="0.5" min='1' name="waist" id="waist">
                </div>

                <div class="form-group">
                    <label for="hip" id="labelHi">Biodra [cm] : </label>
                    <input type="number" class="form-control" step="0.5" min='1' name="hip" id="hip">
                </div>

                <button id="btn" class="btn btn-default btn-lg btn-block" type="button">Przelicz</button>

            </form>
            
            <div id="alert"></div>

            <!--           MODAL   -->

            <div id="modal" class="modal">
                <!--                content    -->
                <div class="modal-content">
                    <span class="close">×</span>
                    <canvas id="myChart"></canvas>
                    <div id="bf"></div>
                </div>

            </div>




    </main>

    <footer></footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
    <script src="modal.js"></script>
    <script src="script.js"></script>
</body>

</html>

 

 

 

style.css

 

 

body {
    background: -moz-linear-gradient(63deg, #3A6186 0, #89253E 100%);
    background: -webkit-gradient(linear, 63deg, color-stop(0, 3A6186), color-stop(100%, 89253E));
    background: -webkit-linear-gradient(63deg, #3A6186 0, #89253E 100%);
    background: -o-linear-gradient(63deg, #3A6186 0, #89253E 100%);
    background: -ms-linear-gradient(63deg, #3A6186 0, #89253E 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1');
    background: linear-gradient(63deg, #3A6186 0, #89253E 100%);
    background-repeat: no-repeat;
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    height: 100vh;
}

.head {
    display: block;
    text-align: center;
    padding: 30px;
}

.container {
    max-width:  520px;
    min-width: 260px;
    margin: 0 auto;
    padding: 25px;
    border-radius: 5px;
    background: -moz-linear-gradient(63deg, #232526 36%, #414345 100%);
    background: -webkit-gradient(linear, 63deg, color-stop(36%, 232526), color-stop(100%, 414345));
    background: -webkit-linear-gradient(63deg, #232526 36%, #414345 100%);
    background: -o-linear-gradient(63deg, #232526 36%, #414345 100%);
    background: -ms-linear-gradient(63deg, #232526 36%, #414345 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1');
    background: linear-gradient(63deg, #232526 36%, #414345 100%);
    -webkit-box-shadow: 10px 10px 98px 12px rgba(66, 66, 66, 0.75);
    -moz-box-shadow: 10px 10px 98px 12px rgba(66, 66, 66, 0.75);
    box-shadow: 10px 10px 98px 12px rgba(66, 66, 66, 0.75);
}


/*Radio inputs*/

.radio-wrap {
    display: inline-block;
    width: 48%;
}

.radios label {
    display: inline-block;
    cursor: pointer;
    position: relative;
}


.radio-inline span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-bottom: -3px;
    margin-right: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    position: relative;
}

input[type="radio"]:checked ~ .radio-inline > span:before {
	content: " ";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #ff7b7b;
	border-radius: 50%;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
}

.form-control {
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .15);
    color: #ffffff;
    font-size: 25px;
}


input {
    display: block;
}

form {
    margin-top: 20px;
}

input[type=number]:focus {
    box-shadow: 0 1px 10px rgb(165, 134, 144);
    border: 2px solid rgb(248, 248, 248);
    
}
input[type=number]::-webkit-inner-spin-button {
  	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.btn {
    border: 2px solid #89253E;
    border-radius: 25px;
    background-color: transparent;
    color: #c9babd;
    transition: all 0.5s ease;
}

.btn:hover {
    background-color: #89253E;
    border: 2px solid #ad848e;
    color: #fff;
}
.btn:active:hover {
    background-color: #840223;
    border: 2px solid #650019;
    color: #fff;
}

.bf_container {
    text-align: center;
    font-size: 3em;
    white-space: nowrap;
}
.bf_desc {
    text-align: center;
    font-size: 2em;
}
/* --==MODAL==-- */

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(66, 66, 66, 0.75);
    margin: 0 auto;
}
.modal-content {
    background-color: #ffffff;
    color: #000;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 75%;
}
.close {
    color: #ff0000;
    float: right;
    font-size: 55px;
    opacity: 0.4;
    line-height: 0;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

 

 

 

script.js

 

 

/* jshint browser: true */
/*jslint latedef:false*/
/*global labelH, labelW, labelN, labelWa, labelHi, ratio, bf, waist, height, hip, modal, weight, neck,Chart*/
//SET LABELS

function setUSLabels() {
    labelH.innerHTML = "Height [inch] :";
    labelW.innerHTML = "Weight [lbs] :";
    labelN.innerHTML = "Neck [inch] :";
    labelWa.innerHTML = "Waist [inch] :";
    labelHi.innerHTML = "Hip [inch] :";
}

function setPLLabels() {
    labelH.innerHTML = "Wzrost [cm] :";
    labelW.innerHTML = "Waga [kg] :";
    labelN.innerHTML = "Kark [cm] :";
    labelWa.innerHTML = "Talia [cm] :";
    labelHi.innerHTML = "Biodra [cm] :";
}
//CHECKING MEASURE SYS
function cheackingSys(system) {
    var ratio = 1,
        ratioW = 1;

    if (system[0].checked) {
        ratio = 0.39;
        setPLLabels();
//        console.log(ratioW + " M " + ratio);
    } else if (system[1].checked) {
        ratio = 1;
        ratioW = 2.2;
        setUSLabels();
//        console.log(ratioW + " us " + ratio);
    }
    var ratioArr = [ratio, ratioW];

    return ratioArr;
}



function fatInBody(weight, bf, ratio) {
//    console.log(ratio[1] + " wyw");
    return Math.round((weight.value / ratio[1] * bf) / 100);
    
}
//BODY FAT CALCULATOR
function bodyFat(system, sex) {

    ratio = cheackingSys(system);

    //CHECKING SEX

    if (sex[0].checked) {
        bf = Math.round((86.010 * Math.log10((waist.value * ratio[0]) - (neck.value * ratio[0])) - 70.041 * Math.log10(height.value * ratio[0]) + 36.76) * 10) / 10; // for man
//        console.log(Math.round(bf * 10) / 10 + " % Male");
    } else if (sex[1].checked) {
        bf = Math.round((163.205 * Math.log10((waist.value * ratio[0]) + (hip.value * ratio[0]) - (neck.value * ratio[0])) - 97.684 * Math.log10(height.value * ratio[0]) - 78.387) * 10) / 10; // for woman
//        console.log(Math.round(bf * 10) / 10 + " % Female");
    }

    //    MODAL
    if (bf > 0) {
        modal.style.display = "block";
        document.getElementById("bf").innerHTML = "<p class=\"bf_container\"> Twój BF to " + bf + " %</p><p class=\"bf_desc\">Masa tłuszczu w twoim ciele to ok. " + fatInBody(weight, bf, ratio) + "[kg] </p>";
    } else {
        document.getElementById("alert").innerHTML = "<p> Czy na pewno poprawnie wypełniłeś wszystkie pola ?</p>";
    }
    //CHART 
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ["Tłuszcz", "Reszta"],
            datasets: [{
                backgroundColor: [
            "#89253E",
            "#d1d1d1"
          ],
                data: [fatInBody(weight, bf, ratio), (weight.value - fatInBody(weight, bf, ratio))]
        }]
        }
    });
    return bf;

}


document.addEventListener("DOMContentLoaded", function () {
    var labelH = document.getElementById("labelH"),
        labelW = document.getElementById("labelW"),
        labelN = document.getElementById("labelN"),
        labelWa = document.getElementById("labelWa"),
        labelHi = document.getElementById("labelHi");

    var sex = document.getElementsByName("sex"),
        height = document.getElementById("height"),
        weight = document.getElementById("weight"),
        neck = document.getElementById("neck"),
        waist = document.getElementById("waist"),
        hip = document.getElementById("hip");

    var selectSystem = document.getElementById("select-system"),
        system = document.getElementsByName("system"),
        btn = document.getElementById("btn");




    selectSystem.addEventListener("click", function () {
        cheackingSys(system);
    }, false);

    btn.addEventListener("click", function () {
        bodyFat(system, sex);
    });


});

 

 

 

modal.js

 

 

var modal = document.getElementById("modal"),
    close = document.getElementsByClassName("close")[0];


close.addEventListener("click", function () {
    modal.style.display = "none";
})
window.addEventListener("click",function(event) {
    if (event.target == modal) { modal.style.display = "none";}
    }
);
window.addEventListener("keydown", function (e) {
    if (e.keyCode == 27  && modal.style.display == "block") {
        modal.style.display = "none";
    }
});

Leave a Reply