Skip to content

Commit

Permalink
Added Macro Calculator (#1778)
Browse files Browse the repository at this point in the history
  • Loading branch information
thevijayshankersharma authored Aug 10, 2024
1 parent a0417d6 commit 293856c
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 0 deletions.
36 changes: 36 additions & 0 deletions Calculators/Macros-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# <p align="center">Advanced Macros Calculator</p>

## Description :-

The Advanced Macros Calculator helps users determine their daily macronutrient needs based on their age, weight, height, gender, and activity level. By inputting these details, users can calculate their Total Daily Energy Expenditure (TDEE) and get recommendations for protein, carbohydrates, and fats. This tool is useful for individuals looking to manage their diet and optimize their nutrition.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## How It Works :-

The Advanced Macros Calculator uses a series of steps to compute and display the macronutrient needs. Here's a high-level overview:

1. **Input Values:**
Users enter their age, weight, height, gender, and activity level into the input fields.

2. **BMR Calculation:**
The Basal Metabolic Rate (BMR) is calculated using the Harris-Benedict equation, which differs for males and females.

3. **TDEE Calculation:**
The Total Daily Energy Expenditure (TDEE) is computed by multiplying the BMR by the activity level factor.

4. **Macros Distribution:**
- **Protein:** Calculated as 2 grams per kilogram of body weight.
- **Fats:** Set to 25% of the total calorie intake, converted to grams.
- **Carbohydrates:** The remaining calories are allocated to carbohydrates.

5. **Result Display:**
The calculated values for calories, protein, carbohydrates, and fats are displayed to the user.

## Screenshots :-

![image](assets/image.png)
Binary file added Calculators/Macros-Calculator/assets/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions Calculators/Macros-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Macros Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Advanced Macros Calculator</h1>
<form id="macrosForm">
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" required>
</div>

<div class="form-group">
<label for="weight">Weight (kg):</label>
<input type="number" id="weight" required>
</div>

<div class="form-group">
<label for="height">Height (cm):</label>
<input type="number" id="height" required>
</div>

<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>

<div class="form-group">
<label for="activity">Activity Level:</label>
<select id="activity">
<option value="1.2">Sedentary (little or no exercise)</option>
<option value="1.375">Lightly active (light exercise/sports 1-3 days/week)</option>
<option value="1.55">Moderately active (moderate exercise/sports 3-5 days/week)</option>
<option value="1.725">Very active (hard exercise/sports 6-7 days a week)</option>
<option value="1.9">Extra active (very hard exercise/sports & a physical job)</option>
</select>
</div>

<button type="button" onclick="calculateMacros()">Calculate</button>
</form>

<div id="results" class="hidden">
<h2>Results:</h2>
<p id="calories">Calories: -</p>
<p id="protein">Protein: -</p>
<p id="carbs">Carbohydrates: -</p>
<p id="fats">Fats: -</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
39 changes: 39 additions & 0 deletions Calculators/Macros-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
function calculateMacros() {
// Get user inputs
const age = parseFloat(document.getElementById('age').value);
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value);
const gender = document.getElementById('gender').value;
const activityLevel = parseFloat(document.getElementById('activity').value);

// Validate inputs
if (isNaN(age) || isNaN(weight) || isNaN(height) || !gender || isNaN(activityLevel)) {
alert('Please fill out all fields correctly.');
return;
}

// Calculate BMR (Basal Metabolic Rate)
let bmr;
if (gender === 'male') {
bmr = 10 * weight + 6.25 * height - 5 * age + 5;
} else {
bmr = 10 * weight + 6.25 * height - 5 * age - 161;
}

// Calculate Total Daily Energy Expenditure (TDEE)
const tdee = bmr * activityLevel;

// Macros distribution
const protein = weight * 2; // Example: 2g per kg body weight
const fats = tdee * 0.25 / 9; // 25% of calories from fats
const carbs = (tdee - (protein * 4 + fats * 9)) / 4; // Remaining calories from carbs

// Update results
document.getElementById('calories').textContent = `Calories: ${Math.round(tdee)}`;
document.getElementById('protein').textContent = `Protein: ${Math.round(protein)} g`;
document.getElementById('carbs').textContent = `Carbohydrates: ${Math.round(carbs)} g`;
document.getElementById('fats').textContent = `Fats: ${Math.round(fats)} g`;

// Show results
document.getElementById('results').classList.remove('hidden');
}
74 changes: 74 additions & 0 deletions Calculators/Macros-Calculator/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #6a11cb, #2575fc);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}

h1 {
margin-bottom: 20px;
color: #333;
}

.form-group {
margin-bottom: 15px;
text-align: left;
}

label {
display: block;
margin-bottom: 5px;
color: #666;
}

input, select, button {
width: calc(100% - 20px);
margin-top: 5px;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
}

button {
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s;
}

button:hover {
background-color: #45a049;
}

#results {
margin-top: 20px;
padding: 15px;
border-radius: 5px;
background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.hidden {
display: none;
}

p {
margin: 10px 0;
color: #333;
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4385,6 +4385,20 @@ <h3>Calculator that performs the basic set operations between two sets.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Macros Calculator</h2>
<h3>Helps users determine their daily macronutrient needs based on their age, weight, height, gender, and activity level.</h3>
<div class="card-footer">
<a href="./Calculators/Macros-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Macros-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Shoe Size Calculator</h2>
Expand Down

0 comments on commit 293856c

Please sign in to comment.