Calories

by Algrain Patrick

HTML

<div data-role="page" 
             id="P_Calories" 
             data-theme="c">
            <div data-role="header" 
                 data-theme="c">
                
                <h3>Calories</h3>
            </div>          
            <div data-role="content"
                 id="ContainerCalories">
                <h4 class="TxtSurFonceFond100">
                    <a  id="BtInfoBasal"
                        href="#PopMetaBasal"
                        data-rel="popup"
                        data-transition="slide"
                        data-direction="reverse"
                        class="fa fa-info-circle fa-2x">
                    </a>
                    &nbsp; &nbsp; &nbsp;Métabolisme basal
                </h4>
                
                                <div id="MessCalBasalGood">
                    <p>Votre métabolisme basal suivant la formule de Black et al: </p>
                    <p id="PFormuleBlackAl"></p>
                    <p>Dépense énergétique de repos et à jeun: </p>
                    <p id="PFormuleResult"></p>
                    <p>Dépense énergétique suivant activité: </p>
                    <table class="Col_100">
                        <tr>
                            <td class="Col_40 TxtLeft">Personne sédentaire</td>
                            <td id="Td_CalPS" class="Col_30"></td>
                            <td id="Td_ResultPS" class="Col_30 TxtLeft"></td>                            
                        </tr>
                        <tr>
                            <td class="Col_40 TxtLeft">Activité légère</td>
                            <td id="Td_CalAL" class="Col_30"></td>
                            <td id="Td_ResultAL" class="Col_30 TxtLeft"></td>                            
                        </tr>
                        <tr>
                            <td class="Col_40 TxtLeft">Activité modérée</td>
                            <td id="Td_CalAM" class="Col_30"></td>
                     ...

CSS

#P_Calories
{
    text-align: center;
}
#ContainerCalories
{

}
#BtInfoBasal
{
    text-decoration: none;
    font-size: 150%;
    color:grey;   
}
#BtInfoBasal:hover
{
    text-decoration: none;
    font-size: 150%;
    color:#aac94e; 
}
#PopMetaBasal
{
    text-align: justify;
    background-color: white;
    padding-left:10px;
    padding-right:10px;
    color: #000066;
    font-family: verdana , sans-serif;
    font-size: 90%;
    text-shadow:none; 
    text-transform: none;
    max-width: 85%;
    margin-top: 35px;
}

#MessCalBasalBad p
{
    margin-bottom: 0px;
}
#MessCalBasalGood
{
    margin-left:auto;
    margin-right:auto;
    width:85%;
    height:400px;
    border-top: #333333 1px solid;
    border-left: #333333 1px solid;
    border-bottom: #999999 1px solid;
    border-right: #999999 1px solid;
    border-radius: 15px;
    background-color: #8dc4b3;
    box-shadow: 5px 5px 10px black inset, -2px -2px 10px black inset ;
    -moz-box-shadow: 5px 5px 10px black inset, -2px -2px 10px black inset ;
    -webkit-box-shadow: 5px 5px 10px black inset, -2px -2px 10px black inset ;
    -ms-box-shadow: 5px 5px 10px black inset, -2px -2px 10px black inset ;
    -khtml-box-shadow: 5px 5px 10px black inset, -2px -2px 10px black inset ;
    text-align: center; 
    color: white;
    text-shadow:1px 1px 3px black;
    text-transform: none;
    padding-left:20px;
    padding-right:20px;
}
#Tab_CheckBasal /* Tableau du check des valeurs encodées dans le profil*/
{
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    border-collapse: collapse;
}
#status_Sexe,
#status_Age,
#status_Taille,
#status_Poids
{
    font-size: 1.2em;
}
#PFormuleResult
{
    font-size: 120%;
    color:#37426d;
    text-shadow:1px 1px 3px darkgrey;
}
.KCalHBasal /* Resultat du calcul de métabolisme basal */
{
    margin:auto;
    font-size: 140%;
    color:#006666;
    text-shadow:1px 1px 2px black;
    border-top: #333333 1px solid;
   ...

JavaScript

/**************** Added to make it work outside my app ***/
                        var Sexe = "Homme";
                        var age = 57;
                        var Poids = 105;
                        var Taille = 196;
/******************************************************/

                    Taille = Taille > 100 ? Taille / 100 : Taille;
                    /********************* Formules ***************************/
                    var FormuleFemme = "Kcal =[0,963 x Poids<sup>0,48</sup> x Taille<sup>0,50</sup> x Age<sup>-0,13</sup>] x (1000/4,1855)";
                    var FormuleHomme = "Kcal =[1,083 x Poids<sup>0,48</sup> x Taille<sup>0,50</sup> x Age<sup>-0,13</sup>] x (1000/4,1855)";
                        $("#MessCalBasalGood").show();                        
                        var K1H = 1.083;
                        var K1F = 0.963;
                        var ActSed = 1.375;
                        var ActAL = 1.56;
                        var ActAM = 1.64;
                        var ActAI = 1.82;
                        var K2HF = Math.pow(Poids, 0.48);
                        var K3HF = Math.pow(Taille, 0.50);
                        var K4HF = Math.pow(age, -0.13);
                        var K4HF2 = K4HF.toFixed(2);                                               
                        var K5HF = (1000 / 4.1855);
                        var KcalH = ((K1H * K2HF * K3HF * K4HF) * K5HF);
                        var KcalF = ((K1F * K2HF * K3HF * K4HF) * K5HF);
                        var NbCalHActSed = KcalH * ActSed;
                        var NBCalHActAL = KcalH * ActAL;
                        var NBCalHActAM = KcalH * ActAM;
                        var NBCalHActAI = KcalH * ActAI;
                        var NbCalFActSed = KcalF * ActSed;
                        var NBCalFActAL = KcalF * ActAL;
                        var NBCalFActAM = KcalF * ActAM;
                        var NBCalFActAI = KcalF * ActAI;
                     ...