toolbox/body-fat-calculator.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Body Fat Calculator Online — Navy Method | QuickTools</title>
  <meta name="description" content="Calculate body fat percentage using the U.S. Navy method. Enter measurements to get your body fat %, lean mass, and fitness category. Free online body fat calculator.">
  <link rel="canonical" href="https://www.quicktools.mom/body-fat-calculator.html">
  <meta property="og:title" content="Body Fat Calculator"><meta property="og:type" content="website"><meta property="og:url" content="https://www.quicktools.mom/body-fat-calculator.html"><meta name="twitter:card" content="summary">
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"How accurate is the Navy body fat method?","acceptedAnswer":{"@type":"Answer","text":"The U.S. Navy method is accurate within 1-3% for most people. It's the standard used by the military for fitness assessments."}},{"@type":"Question","name":"Where do I measure?","acceptedAnswer":{"@type":"Answer","text":"Neck: measure at narrowest point below Adam's apple. Waist: at navel level. Hips (women only): widest point."}}]}</script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space</div>
    <div class="tool-header"><div class="tool-badge">🏃 Fitness</div><h1>Body Fat Calculator</h1><p>Calculate body fat % using the U.S. Navy method. Just 3 measurements.</p></div>
    <div class="tool-card">
      <div class="controls-row">
        <div class="control-group"><label>Gender</label><select id="gender" onchange="toggleHip();calc()"><option value="male">Male</option><option value="female">Female</option></select></div>
        <div class="control-group"><label>Height (cm)</label><input type="number" id="height" value="175" oninput="calc()"></div>
        <div class="control-group"><label>Weight (kg)</label><input type="number" id="weight" value="80" oninput="calc()"></div>
      </div>
      <div class="controls-row mt-1">
        <div class="control-group"><label>Neck (cm)</label><input type="number" id="neck" value="38" step="0.5" oninput="calc()"></div>
        <div class="control-group"><label>Waist (cm) — at navel</label><input type="number" id="waist" value="85" step="0.5" oninput="calc()"></div>
        <div class="control-group" id="hipGroup"><label>Hips (cm) — widest</label><input type="number" id="hip" value="95" step="0.5" oninput="calc()"></div>
      </div>
    </div>
    <div class="tool-card" style="text-align:center;">
      <div style="font-size:0.9rem;color:var(--text-muted);">Body Fat Percentage</div>
      <div id="bf" style="font-size:5rem;font-weight:700;color:var(--accent);">0%</div>
      <div id="cat" style="font-size:1.2rem;font-weight:600;margin:0.5rem 0;">—</div>
      <div style="width:100%;height:20px;border-radius:10px;background:linear-gradient(to right,#10b981,#f59e0b,#ef4444);margin:1rem 0;position:relative;">
        <div id="marker" style="position:absolute;top:-8px;width:4px;height:36px;background:#fff;border-radius:2px;box-shadow:0 0 6px rgba(0,0,0,0.5);transition:left 0.5s;"></div>
      </div>
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin-top:1rem;">
        <div style="padding:1rem;background:var(--bg-secondary);border-radius:8px;"><div style="font-size:0.7rem;color:var(--text-muted);">Fat Mass</div><div id="fatMass" style="font-weight:700;">0 kg</div></div>
        <div style="padding:1rem;background:var(--bg-secondary);border-radius:8px;"><div style="font-size:0.7rem;color:var(--text-muted);">Lean Mass</div><div id="leanMass" style="font-weight:700;">0 kg</div></div>
        <div style="padding:1rem;background:var(--bg-secondary);border-radius:8px;"><div style="font-size:0.7rem;color:var(--text-muted);">BMI</div><div id="bmi" style="font-weight:700;">0</div></div>
      </div>
    </div>
    <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Body Fat Calculator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);">This body fat calculator uses the U.S. Navy circumference method, considered one of the most reliable tape-measure-based methods available. Men need neck and waist measurements; women additionally need hip measurements. The calculator shows your body fat percentage, fat mass in kg, lean mass, BMI, and fitness category (essential fat, athlete, fitness, average, or obese). Perfect for fitness tracking, military fitness tests, personal training clients, and anyone monitoring their body composition without expensive equipment. All calculations run in your browser — no data is uploaded or stored anywhere. The calculator also displays your lean body mass and fitness category, helping you understand where you stand relative to essential, athletic, and average body fat ranges for your gender.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li><strong>Select gender</strong> — This affects the formula and categories.</li>
        <li><strong>Measure</strong> — Use a tape measure for neck, waist, and hips.</li>
        <li><strong>Enter values</strong> — Input your measurements in centimeters.</li>
        <li><strong>Read your results</strong> — Body fat %, fat mass, lean mass, and category.</li>
      </ol>
    </div>
    <div class="ad-zone">Ad Space</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="bmi-calculator.html"><span class="tool-icon">💪</span> BMI</a><a href="macro-calculator.html"><span class="tool-icon">🥩</span> Macros</a><a href="calorie-calculator.html"><span class="tool-icon">🔥</span> Calories</a><a href="running-pace.html"><span class="tool-icon">🏃</span> Pace</a></div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
  </div>
  <script>
    function toggleHip(){document.getElementById('hipGroup').style.display=document.getElementById('gender').value==='male'?'none':'';}
    function calc(){const g=document.getElementById('gender').value;const h=+document.getElementById('height').value;
      const w=+document.getElementById('weight').value;const neck=+document.getElementById('neck').value;
      const waist=+document.getElementById('waist').value;const hip=+document.getElementById('hip').value;
      if(!h||!neck||!waist)return;
      let bf;
      if(g==='male')bf=495/(1.0324-0.19077*Math.log10(waist-neck)+0.15456*Math.log10(h))-450;
      else bf=495/(1.29579-0.35004*Math.log10(waist+hip-neck)+0.22100*Math.log10(h))-450;
      bf=Math.max(2,Math.min(60,bf));
      const fatKg=(bf/100*w).toFixed(1);const leanKg=(w-fatKg).toFixed(1);const bmi=(w/((h/100)**2)).toFixed(1);
      document.getElementById('bf').textContent=bf.toFixed(1)+'%';
      document.getElementById('fatMass').textContent=fatKg+' kg';document.getElementById('leanMass').textContent=leanKg+' kg';document.getElementById('bmi').textContent=bmi;
      const cats=g==='male'?[['Essential Fat',6],['Athlete',14],['Fitness',18],['Average',25],['Obese',100]]:
        [['Essential Fat',14],['Athlete',21],['Fitness',25],['Average',32],['Obese',100]];
      const cat=cats.find(c=>bf<=c[1]);
      document.getElementById('cat').textContent=cat?cat[0]:'—';
      document.getElementById('cat').style.color=cat[0]==='Athlete'||cat[0]==='Fitness'?'var(--success)':cat[0]==='Obese'?'var(--danger)':'var(--accent)';
      document.getElementById('marker').style.left=Math.min(95,Math.max(2,bf*1.6))+'%';
      document.getElementById('bf').style.color=bf<20?'var(--success)':bf<30?'var(--accent)':'var(--danger)';
    }
    toggleHip();calc();
  </script>
<script src="ads.js"></script>
</body>
</html>