Untitled
unknown
html
2 years ago
8.5 kB
5
Indexable
<section class="include">
<div class="container">
<div class="row" id="macros" style="display: none">
<div class="col-md-8 col-md-offset-2 text-center">
<table style="margin: 0 auto" border="0" width="100%" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0.1em" colspan="2">
<h1
style="
width: 100%;
background-color: #000;
color: #fff;
text-align: center;
"
>
YOUR DAILY MACROS
</h1>
</td>
</tr>
<tr>
<td style="padding: 0.1em" colspan="2">
<h1
style="
font-size: 32px;
text-transform: uppercase;
text-align: center;
"
>
<span id="tdee"></span> Calories Per Day
</h1>
</td>
</tr>
<tr>
<td style="padding: 0.1em" align="right" width="50%">
<h3
style="
padding: 0;
margin: 0;
font-size: 24px;
color: #666;
font-weight: normal;
"
>
Carbohydrates:
</h3>
</td>
<td style="padding: 0.1em" align="left" width="50%">
<h4 style="padding: 0; margin: 0; font-size: 24px">
<span id="carbs_g"></span>g
<span
style="
font-size: 20px;
color: #999;
background-color: rgba(8, 8, 8, 0.002);
"
><span id="carbs_p"></span>%</span
>
</h4>
</td>
</tr>
<tr>
<td style="padding: 0.1em" align="right">
<h3
style="
padding: 0;
margin: 0;
font-size: 24px;
color: #666;
font-weight: normal;
"
>
Protein:
</h3>
</td>
<td style="padding: 0.1em" align="left">
<h4 style="padding: 0; margin: 0; font-size: 24px">
<span id="protein_g"></span>g
<span
style="
font-size: 20px;
color: #999;
background-color: rgba(8, 8, 8, 0.002);
"
><span id="protein_p"></span>%</span
>
</h4>
</td>
</tr>
<tr>
<td style="padding: 0.1em" align="right">
<h3
style="
padding: 0;
margin: 0;
font-size: 24px;
color: #666;
font-weight: normal;
"
>
Fat:
</h3>
</td>
<td style="padding: 0.1em" align="left">
<h4 style="padding: 0; margin: 0; font-size: 24px">
<span id="fat_g"></span>g
<span
style="
font-size: 20px;
color: #999;
background-color: rgba(8, 8, 8, 0.002);
"
><span id="fat_p"></span>%</span
>
</h4>
</td>
</tr>
<tr>
<td style="padding: 0.1em" align="right">
<h3
style="
padding: 0;
margin: 0;
font-size: 24px;
color: #666;
font-weight: normal;
"
>
Activity:
</h3>
</td>
<td style="padding: 0.1em" align="left">
<h4
style="padding: 0; margin: 0; font-size: 24px"
id="activity"
></h4>
</td>
</tr>
<tr>
<td style="padding: 0.1em"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const updateHtmlElement = (id, value) => {
let htmlElem = document.getElementById(id);
if (htmlElem) {
htmlElem.innerHTML = value;
}
};
document.body.classList.add("crucial");
let queryString = new URLSearchParams(window.location.search);
let condition = queryString.get("condition");
let segment = queryString.get("segment");
let gender = queryString.get("gender");
let age = queryString.get("age");
let activity = queryString.get("activity");
let macro_goal = queryString.get("macro_goal");
let units = queryString.get("units");
let inches = queryString.get("inches");
let centimeters = queryString.get("centimeters");
let weight = queryString.get("weight");
let kilograms = queryString.get("kilograms");
if (condition) {
let height_inches,
height_cm,
weight_kg,
weight_lb,
ree,
tdee,
protein_g,
protein_calories,
fat_calories,
fat_g,
carbs_calories,
carbs_g,
carbs_p,
protein_p,
fat_p;
if (units === "imperial") {
height_inches = parseFloat(inches);
height_cm = height_inches / 0.393701;
weight_kg = parseFloat(weight) * 0.453592;
weight_lb = parseFloat(weight);
} else {
height_inches = parseFloat(centimeters) * 0.393701;
height_cm = parseFloat(centimeters);
weight_kg = parseFloat(kilograms);
weight_lb = parseFloat(kilograms) / 0.453592;
}
if (gender.toLowerCase() === "male") {
ree = 10 * weight_kg + 6.25 * height_cm - 5 * parseFloat(age) + 5;
} else {
ree = 10 * weight_kg + 6.25 * height_cm - 5 * parseFloat(age) - 161;
}
if (activity === "light") {
tdee = ree * 1.375;
} else if (activity === "moderate") {
tdee = ree * 1.55;
} else if (activity === "very") {
tdee = ree * 1.725;
} else if (activity === "extra") {
tdee = ree * 1.9;
} else {
tdee = 1;
}
if (macro_goal === "fat-loss") {
tdee = tdee - tdee * 0.2;
protein_g = weight_lb;
} else if (macro_goal === "maintenance") {
protein_g = weight_lb;
} else if (macro_goal === "build-muscle") {
tdee = tdee * 1.1;
protein_g = weight_lb * 1.2;
} else {
protein_g = 1;
}
protein_calories = protein_g * 4;
fat_calories = tdee * 0.25;
fat_g = fat_calories / 9;
carbs_calories = tdee - fat_calories - protein_calories;
carbs_g = carbs_calories / 4;
carbs_p = ((carbs_calories / tdee) * 100).toFixed(1);
protein_p = ((protein_calories / tdee) * 100).toFixed(1);
fat_p = Math.round((fat_calories / tdee) * 100);
tdee = Math.round(tdee);
carbs_g = Math.round(carbs_g);
protein_g = Math.round(protein_g);
fat_g = Math.round(fat_g);
updateHtmlElement("tdee", tdee);
updateHtmlElement("carbs_g", carbs_g);
updateHtmlElement("carbs_p", carbs_p);
updateHtmlElement("protein_g", protein_g);
updateHtmlElement("protein_p", protein_p);
updateHtmlElement("fat_g", fat_g);
updateHtmlElement("fat_p", fat_p);
updateHtmlElement("activity", activity);
// display the macros container
let macrosElement = document.getElementById("macros");
if (macrosElement) {
macrosElement.style.display = "block";
}
} else {
let macrosElement = document.getElementById("macros");
if (macrosElement) {
macrosElement.parentNode.removeChild(macrosElement);
}
}
</script>
</div>
</section>
Editor is loading...
Leave a Comment