Calculate Calories and Macros

Developer
Eleftheria Batsou
Size
7,925 Kb
Views
10,120
  1. Calculate Calories and Macros Previews
  2. Calculate Calories and Macros HTML Codes
  3. Calculate Calories and Macros CSS Codes
  4. Calculate Calories and Macros JS Codes

How do I make an calculate calories and macros?

This is a calculator for BMR and a converter from macros to calories . This was also my first time I used scss on codepen.. What is a calculate calories and macros? How do you make a calculate calories and macros? This script and codes were developed by Eleftheria Batsou on 27 October 2022, Thursday.

Calculate Calories and Macros Previews
IQ Test

Calculate Calories and Macros - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calculate Calories and Macros</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<body> <div class="container-fluid text-center"> <!-- for header/title --> <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> <!-- end Header --> <!------------ - - - first part - - - -------------> <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> <!-- end: row 1--> <div class="row part1 paddingTopBottom60px"> <h3>Calculate your BMR</h3> <div class="col-xs-6"> <p><img src="http://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="http://image.flaticon.com/icons/svg/123/123161.svg"> </p> <!-- Calculate BMR for Man --> <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> <!-- End of calculations for Man's BMR--> </div> </div> <!-- end: row 2--> <!-- end of part 1 --> <!------------- - - - second part - - - --------------> <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> <!-- end: row 3--> <div class="row part2"> <h3>Activity Factor Multiplier</h3> <div class="row"> <!-- row inside row 1/3 --> <div class="col-xs-4"> <!-- code for flip-container --> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/donut-Macro-256_zpsuetslilk.png" class="img-responsive foodImg" alt="Donut Picture - Calculate macros"> </div> <!-- end: class front--> <div class="back"> <!-- back content --> <p class="backSide30pxDown">Eat healthy snacks!</p> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/honey-MacroProject256_zpszx0h5dom.png" class="img-responsive foodImg" alt="Honey Picture - Calculate macros"> </div> <!-- end: class back --> </div> <!-- end: class flipper--> </div> <!-- end: class flip-container--> </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"> <!-- code for flip-container --> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/pizza-Macro-256_zpsxlbtcjmn.png" class="img-responsive foodImg" alt="Pizza Picture - Calculate macros"> </div> <!-- end: class front--> <div class="back"> <!-- back content --> <p class="backSide30pxDown">Eat fish instead of pizza!</p> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/fish-MacroProject256_zpsvgpopitr.png" class="img-responsive foodImg" alt="Fish Picture - Calculate macros"> </div> <!-- end: class back --> </div> <!-- end: class flipper--> </div> <!-- end: class flip-container--> </div> </div><!-- end row inside row 1/3--> <div class="row"> <!-- row inside row 2/3 --> <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> <!-- end row inside row 2/3--> <div class="row paddingBottom40px"> <!-- row inside row 3/3 --> <div class="col-xs-4"> <!-- code for flip-container --> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/chicken-Macro-256_zpshqw5ling.png" class="img-responsive foodImg" alt="Chicken Picture - Calculate macros"> </div> <!-- end: class front--> <div class="back"> <!-- back content --> <p class="backSide30pxDown">Keep eating healthy!</p> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/apple-MacroProject_zpstex6i7lh.png" class="img-responsive foodImg" alt="Apple Picture - Calculate macros"> </div> <!-- end: class back --> </div> <!-- end: class flipper--> </div> <!-- end: class flip-container--> </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"> <!-- code for flip-container --> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/salad-Macro-256_zps7g9tdfyw.png" class="img-responsive foodImg" alt="Salad Picture - Calculate macros"> </div> <!-- end: class front--> <div class="back"> <!-- back content --> <p class="backSide30pxDown">Yeah, more healty foods!</p> <img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/Project%20Calculate%20Macros/avocado-MacroProject_zpsi59lnaax.png" class="img-responsive foodImg" alt="Avocado Picture - Calculate macros"> </div> <!-- end: class back --> </div> <!-- end: class flipper--> </div> <!-- end: class flip-container--> </div> </div> <!-- end row inside row 3/3--> </div> <!-- end: rows --> <!-- end of activity factor multiplier --> <!-- end of part 2 --> <!------------ - - - third part - - - -------------> <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> <!-- end: row 5 --> <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> <!-- calculator --> <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> <!-- end of calculator --> </div> </div> <!-- end: row 6 --> <!-- for footer --> <div class="row" id="footer"> <h5><a href="https://codepen.io/EleftheriaBatsou" target="_blank">Eleftheria Batsou</a> | <a href="https://codepen.io/EleftheriaBatsou/collections/popular/" target="_blank">Projects</a></h5> </div> <!-- end footer --> </div> <!-- end class container-fluid -->
</body> <script src="js/index.js"></script>
</body>
</html>

Calculate Calories and Macros - Script Codes CSS Codes

/* ======= 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;
}

Calculate Calories and Macros - Script Codes JS Codes

/* 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;	};	}
}());
Calculate Calories and Macros - Script Codes
Calculate Calories and Macros - Script Codes
Home Page Home
Developer Eleftheria Batsou
Username EleftheriaBatsou
Uploaded October 27, 2022
Rating 3
Size 7,925 Kb
Views 10,120
Do you need developer help for Calculate Calories and Macros?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eleftheria Batsou (EleftheriaBatsou) Script Codes
Name
Animate Your Name
Sun, earth and code
Landing Page for an App
Vertical Timeline - My life
Video Player Custom Controls
Code Player
Postcode Finder and Map
Draw Like Never Before
Personal Portfolio Webpage
Clock with JS
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!