Untitled

mail@pastecode.io avatar
unknown
html
7 months ago
8.5 kB
1
Indexable
Never
<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">
                  &nbsp;<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">
                  &nbsp;<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">
                  &nbsp;<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">&nbsp;</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>
Leave a Comment