HTML5健身应用基础代谢率和卡路里计算器

Calculate Calories and Macros，通过用户输入的身高体重和年龄在线计算人体基础代谢率，通过摄入营养计算卡路里。本应用界面模板适合在线减肥/健康饮食类网站和移动应用。

html5, app, health

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2932
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* Calculate MAN BMR */
(function() {
    function calculatemanBMR(manWeight, manHeight, manAge) {
        manWeight = parseFloat(manWeight);
        manHeight = parseFloat(manHeight);
        manAge = parseFloat(manAge);
        return ((manWeight * 10) + (manHeight * 6.25) - (manAge * 5) + 5);
    }

var manBMR = document.getElementById("manBMR");
    if (manBMR) {
        manBMR.onsubmit = function() {
            this.result.value = calculatemanBMR(this.manWeight.value, this.manHeight.value, this.manAge.value);
            return false;
        };
    }
}());

/* Calculate Woman BMR */
(function() {
    function calculatewomanBMR(womanWeight, womanHeight, womanAge) {
        womanWeight = parseFloat(womanWeight);
        womanHeight = parseFloat(womanHeight);
        womanAge = parseFloat(womanAge);
        return ((womanWeight * 10) + (womanHeight * 6.25) - (womanAge * 5) - 161);
    }

var womanBMR = document.getElementById("womanBMR");
    if (womanBMR) {
        womanBMR.onsubmit = function() {
            this.result.value = calculatewomanBMR(this.womanWeight.value, this.womanHeight.value, this.womanAge.value);
            return false;
        };
    }
}());

/* Macros to calories calculator */
(function() {
    function MacrosToCalories(proteins, carbs, fats) {
        proteins = parseFloat(proteins);
        carbs = parseFloat(carbs);
        fats = parseFloat(fats);
        return ((proteins * 4) + (carbs * 4) + (fats * 9));
    }

var calculateMacros = document.getElementById("calculateMacros");
    if (calculateMacros) {
        calculateMacros.onsubmit = function() {
            this.result.value = MacrosToCalories(this.proteins.value, this.carbs.value, this.fats.value);
            return false;
        };
    }
}());

编译

CSS

/* ======= Variables: Background Colors ======== */
/* Dusty */
/* Lavendor */
/* Overcast */
/* Paper */
/* ======== Variables: Colors ========= */
/* white */
/* black */
/* ========= BC & C for the page ========== */

#header,
#footer {
    background-color: #D5D5D5;
    color: #000;
}
.part1 {
    background-color: #96858F;
    color: #FFF;
}
.part2 {
    background-color: #6D7993;
    color: #FFF;
}
.part3 {
    background-color: #9099A2;
    color: #FFF;
}
/* ======== General ========= */

body p {
    margin-left: 20%;
    margin-right: 20%;
}
.paddingTopBottom60px {
    padding-top: 60px;
    padding-bottom: 60px;
}
/* ======== Sticky header ========= */

#header {
    position: fixed;
    width: 100%;
    z-index: 2;
}
/* ======== Place the title and the main-menu ======== */

#title {
    text-align: left;
    padding-left: 20px;
    z-index: 2;
}
#main-menu {
    text-align: right;
    padding-right: 20px;
    padding-top: 0px;
    z-index: 2;
}
#main-menu ul {
    list-style-type: none;
    /* to make the bullets disappear */
}
#main-menu li {
    float: right;
}
#main-menu li a {
    display: block;
    color: #000;
    text-decoration: none;
    padding: 15px;
}
@media (min-width: 870px) {
    #main-menu {
        /* this rule apply for screens 870px and bigger */
        
        margin-top: -40px;
    }
}
/* hover animation for main-menu*/

#targetMainMenu1:hover {
    background-color: #96858F;
    display: inline;
    padding-top: 15px;
    padding-bottom: 15px;
}
#targetMainMenu2:hover {
    background-color: #6D7993;
    display: inline;
    padding-top: 15px;
    padding-bottom: 15px;
}
#targetMainMenu3:hover {
    background-color: #9099A2;
    display: inline;
    padding-top: 15px;
    padding-bottom: 15px;
}
/* ============== Part 1 - BMR =========== */
/* making the first part - BMR responsive  * 
 * so as not to crush in the sticky header */

#BMR {
    padding-top: 60px;
    margin-top: 245px;
}
@media (min-width: 333px) {
    #BMR {
        margin-top: 205px;
    }
}
@media (min-width: 380px) {
    #BMR {
        margin-top: 150px;
    }
}
@media (min-width: 530px) {
    #BMR {
        margin-top: 110px;
    }
}
@media (min-width: 870px) {
    #BMR {
        margin-top: 78px;
    }
}
/* =========== Calculate BMR style ============ */

input {
    background-color: #D5D5D5;
    color: #000;
}
legend {
    background-color: initial;
}
/* =========== Activity Factor Multuplier ============= */

.foodImg {
    display: block;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
}
@media (min-width: 690px) {
    .foodImg {
        padding-top: 10px;
    }
}
@media (min-width: 760px) {
    .foodImg {
        padding-top: 0px;
        display: block;
        margin: 0 auto;
    }
}
@media (min-width: 1000px) {
    .foodImg {
        display: inline-block;
    }
}
.paddingTop3columnsForCol-xs-4 {
    padding-top: 30px;
}
@media (min-width: 760px) {
    .paddingTop3columnsForCol-xs-4 {
        padding-top: 50px;
    }
}
@media (min-width: 930px) {
    .paddingTop3columnsForCol-xs-4 {
        padding-top: 80px;
    }
}
@media (min-width: 1100px) {
    .paddingTop3columnsForCol-xs-4 {
        padding-top: 90px;
    }
}
.paddingBottom40px {
    padding-bottom: 40px;
}
/* =========== Flip  the images ============ */
/* entire container, keeps perspective */

.flip-container {
    perspective: 1000px;
}
/* flip the pane when hovered */

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
    width: auto;
    /* was 320px */
    
    height: auto;
    /*was 480px */
}
/* flip speed goes here */

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */

.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
/* front pane, placed above back */

.front {
    z-index: 2;
    /* for firefox 31 */
    
    transform: rotateY(0deg);
}
@media (min-width: 1000px) {
    .front {
        padding-left: 20%;
    }
}
/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
}
.backSide30pxDown {
    padding-top: 30px;
}
/* =========== FOOTER =========== */
/*   hover animation for footer   */

#footer a:link {
    color: #000;
}
#footer a:visited {
    color: #96858F;
}
#footer a:hover {
    color: #6D7993;
}

HTML

<div class="row" id="header">
        <h1 id="title">Calculate Calories and Macros</h1>
        <h4 id="main-menu"> 
    <ul>
      <li><a href="#Macros"><div id="targetMainMenu3">Macros</div></a></li>   
      <li><a href="#Activity"><div id="targetMainMenu2">Activity Factor</div></a></li>
      <li><a href="#BMR"><div id="targetMainMenu1">BMR</div></a> </li>
    </ul>
  </h4>
    </div>

<div class="row part1" id="BMR">
        <h3>Basal Metabolic Rate</h3>
        <p>Basal Metabolic Rate (BMR) – Your basal metabolic rate is the total amount of energy (calories) your body requires daily just to maintain normal bodily functions, including digestion, circulation, respiration, temperature regulation, cell construction
            and every other process in your body. BMR is the total of all the energy you use for basic bodily functions at REST. This does not include physical activity.</p>
    </div>

<div class="row part1 paddingTopBottom60px">
        <h3>Calculate your BMR</h3>

<div class="col-xs-6">
            <p><img src="https://image.flaticon.com/icons/svg/123/123164.svg">
            </p>
            <form id="womanBMR" action="">
                <fieldset>
                    <legend>Woman</legend>
                    <p>
                        <label for="womanWeight">Weight (kg)</label>
                        <input id="womanWeight" name="womanWeight" type="number" placeholder="ex: 68" />
                    </p>
                    <p>
                        <label for="womanHeight">Height (cm)</label>
                        <input id="womanHeight" name="womanHeight" type="number" placeholder="ex: 172" />
                    </p>
                    <p>
                        <label for="womanAge">Ages (years)</label>
                        <input id="womanAge" name="womanAge" type="number" placeholder="ex: 23" />
                    </p>
                    <p>
                        <input type="submit" value="Calculate BMR" /> or
                        <input type="reset" value="Reset" />
                    </p>
                    <p>
                        <label for="result">Result</label>
                        <input id="result" name="result" />
                    </p>
                </fieldset>
            </form>
        </div>

<div class="col-xs-6">
            <p><img src="https://image.flaticon.com/icons/svg/123/123161.svg">
            </p>
            
            <form id="manBMR" action="">
                <fieldset>
                    <legend>Man</legend>
                    <p>
                        <label for="manWeight">Weight (kg)</label>
                        <input id="manWeight" name="manWeight" type="number" placeholder="ex: 78" />
                    </p>
                    <p>
                        <label for="manHeight">Height (cm)</label>
                        <input id="manHeight" name="manHeight" type="number" placeholder="ex: 182" />
                    </p>
                    <p>
                        <label for="manAge">Ages (years)</label>
                        <input id="manAge" name="manAge" type="number" placeholder="ex: 23" />
                    </p>
                    <p>
                        <input type="submit" value="Calculate BMR" /> or
                        <input type="reset" value="Reset" />
                    </p>
                    <p>
                        <label for="result">Result</label>
                        <input id="result" name="result" />
                    </p>
                </fieldset>
            </form>
            
        </div>
    </div>

<div class="row part2 paddingTopBottom60px" id="Activity">
        <h3>Activity Factor</h3>
        <p>The activity factor takes into account everything you do in a day not just training. After you find your BMR use one of these multipliers to find the amount of calories you need to stay at the same weight (maintenance calories).
            <br>
            <br> Be honest with yourself here…this is where most people mess this process up.</p>
    </div>

<div class="row part2">
        <h3>Activity Factor Multiplier</h3>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="flipper">
                        <div class="front">
                            
                            <img src="/uploads/170101/donut.png" class="img-responsive foodImg" alt="Donut Picture - Calculate macros">
                        </div>
                        
                        <div class="back">
                            
                            <p class="backSide30pxDown">Eat healthy snacks!</p>
                            <img src="/uploads/170101/honey.png" class="img-responsive foodImg" alt="Honey Picture - Calculate macros">
                        </div>
                        
                    </div>
                    
                </div>

</div>
            <div class="col-xs-4 paddingTop3columnsForCol-xs-4">
                <h4>BMR x 1.2</h4>
                <h5>Sedentary</h5>
                <p>You don’t move much. No exercise, desk job, lots of TV. I bet you don't like gym, but you like donuts and cakes!</p>
            </div>
            <div class="col-xs-4">
                
                <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="flipper">
                        <div class="front">
                            
                            <img src="/uploads/170101/pizza.png" class="img-responsive foodImg" alt="Pizza Picture - Calculate macros">
                        </div>
                        
                        <div class="back">
                            
                            <p class="backSide30pxDown">Eat fish instead of pizza!</p>
                            <img src="/uploads/170101/fish.png" class="img-responsive foodImg" alt="Fish Picture - Calculate macros">
                        </div>
                        
                    </div>
                    
                </div>
                
            </div>
        </div>

<div class="row">
            
            <div class="col-xs-4 paddingTop3columnsForCol-xs-4">
                <h4>BMR x 1.3-1.4</h4>
                <h5>Lightly Active</h5>
                <p>Active a few days a week, exercise 1-3 days</p>
            </div>
            <div class="col-xs-4 paddingTop3columnsForCol-xs-4">
                <h4>BMR x 1.5-1.6</h4>
                <h5>Moderately Active </h5>
                <p> Where I would assume most people are at. Train 4-5 days a week and active lifestyle</p>
            </div>
            <div class="col-xs-4 paddingTop3columnsForCol-xs-4">
                <h4>BMR x 1.7-1.8</h4>
                <h5>Very Active </h5>
                <p>Training hard for a specific sport or purpose 5-6 hours a week. Typically one with a hard labor job as well</p>
            </div>
        </div>

<div class="row paddingBottom40px">
            
            <div class="col-xs-4">
                
                <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="flipper">
                        <div class="front">
                            
                            <img src="/uploads/170101/chicken.png" class="img-responsive foodImg" alt="Chicken Picture - Calculate macros">
                        </div>
                        
                        <div class="back">
                            
                            <p class="backSide30pxDown">Keep eating healthy!</p>
                            <img src="/uploads/170101/apple.png" class="img-responsive foodImg" alt="Apple Picture - Calculate macros">
                        </div>
                        
                    </div>
                    
                </div>
                
            </div>
            <div class="col-xs-4 paddingTop3columnsForCol-xs-4">
                <h4>BMR x 1.9-2.2</h4>
                <h5>Extremely Active </h5>
                <p>Endurance training or hard charging athlete who spends 10 or more hours training a week and/or lots of activity outside of training. Can require more calories than this as well depending on ones metabolic capacity</p>
            </div>
            <div class="col-xs-4">
                
                <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="flipper">
                        <div class="front">
                            
                            <img src="/uploads/170101/salad.png" class="img-responsive foodImg" alt="Salad Picture - Calculate macros">
                        </div>
                        
                        <div class="back">
                            
                            <p class="backSide30pxDown">Yeah, more healty foods!</p>
                            <img src="/uploads/170101/avocado.png" class="img-responsive foodImg" alt="Avocado Picture - Calculate macros">
                        </div>
                        
                    </div>
                    
                </div>
                
            </div>
        </div>
        
    </div>

<div class="row part3 paddingTopBottom60px" id="Macros">
        <h3>Next Step</h3>
        <p>This is where you need to decide if your goal is to gain or lose weight. As we all know to gain weight you need to be in a caloric surplus and to lose weight you need to be in a deficit. I’m not going to tell you exactly how many calories to add/subtract
            to gain or lose because it will be different for everyone. What I will say is that in both cases start small and go from there. Take your estimated maintenance calorie intake and adjust that number a little bit and see how you look, feel,
            and perform, and go from there.</p>
    </div>

<div class="row part3 paddingBottom40px">
        <h3>Macros to Calories calculator</h3>
        <div class="col-xs-6">
            <h3>Macronutrients</h3>
            <h5>Macronutrients are what make up your calorie intake.</h5>
            <p>
                Protein – 4kcal/g
                <br> Carbohydrate – 4kcal/g
                <br> Fat – 9kcal/g
                <br>
            </p>
            <p>
                Total Calorie Goal – (Protein intake + Minimum Fat Requirement) = Calories left over for carb and fat intake.
            </p>
        </div>
        <div class="col-xs-6">
            <h3>calculator</h3>
            
            <form id="calculateMacros" action="">
                <fieldset>
                    <p>
                        <label for="proteins">Proteins (gr)</label>
                        <input id="proteins" name="proteins" type="number" placeholder="ex: 15" />
                    </p>
                    <p>
                        <label for="carbs">Carbs (gr)</label>
                        <input id="carbs" name="carbs" type="number" placeholder="ex: 20" />
                    </p>
                    <p>
                        <label for="fats">Fats (gr)</label>
                        <input id="fats" name="fats" type="number" placeholder="ex: 25" />
                    </p>
                    <p>
                        <input type="submit" value="Calculate Macros" /> or
                        <input type="reset" value="Reset" />
                    </p>
                    <p>
                        <label for="result">Result (kCal)</label>
                        <input id="result" name="result" />
                    </p>
                </fieldset>
            </form>
            
        </div>
    </div>

</div>

Calculate Calories and Macros，通过用户输入的身高体重和年龄在线计算人体基础代谢率，通过摄入营养计算卡路里。本应用界面模板适合在线减肥/健康饮食类网站和移动应用。

html5, app, health

编辑器支持Emmet

快捷键

Calculate Calories and Macros，通过用户输入的身高体重和年龄在线计算人体基础代谢率，通过摄入营养计算卡路里。本应用界面模板适合在线减肥/健康饮食类网站和移动应用。

html5, app, health

一款移动健身应用的UI设计 - 卡路里计算器 - 计步器

HTML5一款暗蓝色的计算器界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：