-
Notifications
You must be signed in to change notification settings - Fork 386
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a0417d6
commit 293856c
Showing
6 changed files
with
223 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters