Rakesh9100 · Rakesh9100 · Jun 28, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024
diff --git a/Calculators/Macro-Nutrient-Calculator/README.md b/Calculators/Macro-Nutrient-Calculator/README.md
@@ -0,0 +1,42 @@
+# Macronutrient Calculator
+
+The Macronutrient Calculator is a simple and effective tool designed to help users determine their daily macronutrient needs based on personal fitness goals and activity levels. By entering a few key details about themselves, users can receive a tailored recommendation for their daily caloric intake and the amount of protein, carbohydrates, and fats they should consume to achieve their fitness objectives.
+
+## Key Features
+
+### User Inputs
+- **Weight (kg)**: The user's body weight in kilograms.
+- **Height (cm)**: The user's height in centimeters.
+- **Age**: The user's age.
+- **Gender**: The user's gender, which impacts the Basal Metabolic Rate (BMR) calculation.
+- **Activity Level**: The user's daily activity level, ranging from sedentary to very active.
+- **Fitness Goal**: The user's fitness goal, which can be maintenance, weight loss, or muscle gain.
+
+### Calculations
+- **Basal Metabolic Rate (BMR)**: Calculated using the Mifflin-St Jeor Equation, adjusted for gender.
+- **Total Daily Energy Expenditure (TDEE)**: Adjusted BMR based on the user's activity level.
+- **Macronutrient Breakdown**:
+    - **Protein**: Calculated based on the user's weight.
+    - **Fat**: A percentage of the total caloric intake.
+    - **Carbohydrates**: The remaining calories after accounting for protein and fat.
+
+### Output
+- Daily caloric intake (kcal/day).
+- Daily protein intake (g/day).
+- Daily carbohydrate intake (g/day).
+- Daily fat intake (g/day).
+
+### User-Friendly Interface
+- Simple and intuitive layout.
+- Responsive design for use on various devices.
+- Clear input fields and results display.
+
+### Screenshots
+![Image](https://github.com/Antiquely3059/CalcDiverse/assets/112797055/f2e6311c-4f3b-467c-a347-066faa713211)
+
+
+### Additional Functions
+- **Calculate Button**: Computes and displays the macronutrient needs based on the inputs.
+- **Reset Button**: Clears all inputs and results, allowing for a new calculation.
+
+This tool is ideal for anyone looking to optimize their diet according to their personal fitness goals, whether they're aiming to maintain their current weight, lose weight, or gain muscle. The calculator provides a quick and easy way to understand how much of each macronutrient you should be consuming daily, helping you make informed dietary decisions.
diff --git a/Calculators/Macro-Nutrient-Calculator/index.html b/Calculators/Macro-Nutrient-Calculator/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Macronutrient Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Macronutrient Calculator</h1>
+        <div class="card">
+            <div class="input">
+                <label for="weight">Weight (kg):</label>
+                <input type="number" id="weight" placeholder="Enter your weight">
+            </div>
+            <div class="input">
+                <label for="height">Height (cm):</label>
+                <input type="number" id="height" placeholder="Enter your height">
+            </div>
+            <div class="input">
+                <label for="age">Age:</label>
+                <input type="number" id="age" placeholder="Enter your age">
+            </div>
+            <div class="input">
+                <label for="gender">Gender:</label>
+                <select id="gender">
+                    <option value="male">Male</option>
+                    <option value="female">Female</option>
+                </select>
+            </div>
+            <div class="input">
+                <label for="activity">Activity Level:</label>
+                <select id="activity">
+                    <option value="sedentary">Sedentary</option>
+                    <option value="light">Lightly active</option>
+                    <option value="moderate">Moderately active</option>
+                    <option value="active">Active</option>
+                    <option value="very_active">Very active</option>
+                </select>
+            </div>
+            <div class="input">
+                <label for="goal">Fitness Goal:</label>
+                <select id="goal">
+                    <option value="maintenance">Maintenance</option>
+                    <option value="weight_loss">Weight Loss</option>
+                    <option value="muscle_gain">Muscle Gain</option>
+                </select>
+            </div>
+            <button id="calculate">Calculate</button>
+            <button id="reset">Reset</button>
+            <div class="result">
+                <label for="calories">Calories (kcal/day):</label>
+                <input type="text" id="calories" readonly>
+            </div>
+            <div class="result">
+                <label for="protein">Protein (g/day):</label>
+                <input type="text" id="protein" readonly>
+            </div>
+            <div class="result">
+                <label for="carbs">Carbs (g/day):</label>
+                <input type="text" id="carbs" readonly>
+            </div>
+            <div class="result">
+                <label for="fat">Fat (g/day):</label>
+                <input type="text" id="fat" readonly>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Macro-Nutrient-Calculator/script.js b/Calculators/Macro-Nutrient-Calculator/script.js
@@ -0,0 +1,77 @@
+document.getElementById("calculate").addEventListener("click", function() {
+    const weight = parseFloat(document.getElementById("weight").value);
+    const height = parseFloat(document.getElementById("height").value);
+    const age = parseInt(document.getElementById("age").value);
+    const gender = document.getElementById("gender").value;
+    const activity = document.getElementById("activity").value;
+    const goal = document.getElementById("goal").value;
+
+    if (isNaN(weight) || isNaN(height) || isNaN(age)) {
+        alert("Please enter valid numbers for weight, height, and age.");
+        return;
+    }
+
+    // Basal Metabolic Rate (BMR) calculation using the Mifflin-St Jeor Equation
+    let bmr;
+    if (gender === "male") {
+        bmr = 10 * weight + 6.25 * height - 5 * age + 5;
+    } else {
+        bmr = 10 * weight + 6.25 * height - 5 * age - 161;
+    }
+
+    // Adjust BMR based on activity level
+    let calories;
+    switch (activity) {
+        case "sedentary":
+            calories = bmr * 1.2;
+            break;
+        case "light":
+            calories = bmr * 1.375;
+            break;
+        case "moderate":
+            calories = bmr * 1.55;
+            break;
+        case "active":
+            calories = bmr * 1.725;
+            break;
+        case "very_active":
+            calories = bmr * 1.9;
+            break;
+    }
+
+    // Adjust calories based on fitness goal
+    switch (goal) {
+        case "maintenance":
+            break;
+        case "weight_loss":
+            calories -= 500;
+            break;
+        case "muscle_gain":
+            calories += 500;
+            break;
+    }
+
+    // Calculate macronutrients
+    const protein = weight * 2.2; // grams of protein per kg of body weight
+    const fat = (calories * 0.25) / 9; // 25% of calories from fat
+    const carbs = (calories - (protein * 4) - (fat * 9)) / 4; // remaining calories from carbs
+
+    // Display results
+    document.getElementById("calories").value = Math.round(calories);
+    document.getElementById("protein").value = Math.round(protein);
+    document.getElementById("carbs").value = Math.round(carbs);
+    document.getElementById("fat").value = Math.round(fat);
+});
+
+document.getElementById("reset").addEventListener("click", function() {
+    document.getElementById("weight").value = "";
+    document.getElementById("height").value = "";
+    document.getElementById("age").value = "";
+    document.getElementById("gender").value = "male";
+    document.getElementById("activity").value = "sedentary";
+    document.getElementById("goal").value = "maintenance";
+    document.getElementById("calories").value = "";
+    document.getElementById("protein").value = "";
+    document.getElementById("carbs").value = "";
+    document.getElementById("fat").value = "";
+});
diff --git a/Calculators/Macro-Nutrient-Calculator/styles.css b/Calculators/Macro-Nutrient-Calculator/styles.css
@@ -0,0 +1,122 @@
+@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inconsolata', monospace;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background: linear-gradient(to right bottom, #7ed0e7, #77c1ee, #87afee, #a399e1, #bf80c6);
+    min-height: 100vh;
+    margin: 0;
+}
+
+.container {
+    padding: 20px;
+    width: 100%;
+    max-width: 600px;
+    margin: auto;
+}
+
+h1 {
+    color: #fff;
+    font-family: 'Alfa Slab One', cursive;
+    font-weight: 100;
+    margin-bottom: 20px;
+    font-size: 2.5rem;
+    text-align: center;
+}
+
+.card {
+    background: rgba(46, 123, 225, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 20px;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.input {
+    margin-bottom: 10px;
+    text-align: left;
+}
+
+.input label {
+    display: block;
+    margin-bottom: 5px;
+    color: #fff;
+}
+
+.input input,
+.input select {
+    width: calc(100% - 16px);
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
+button {
+    align-items: center;
+    appearance: none;
+    background-image: radial-gradient(100% 100% at 100% 0, #d7bb7e 0, #7e88d1 100%);
+    border: 0;
+    border-radius: 6px;
+    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: "JetBrains Mono", monospace;
+    height: 40px;
+    justify-content: center;
+    line-height: 1;
+    list-style: none;
+    overflow: hidden;
+    padding-left: 16px;
+    padding-right: 16px;
+    position: relative;
+    text-align: left;
+    text-decoration: none;
+    transition: box-shadow .15s, transform .15s;
+    user-select: none;
+    white-space: nowrap;
+    will-change: box-shadow, transform;
+    font-size: 18px;
+    margin: 5px;
+}
+
+button:hover {
+    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #2a0f5a 0 -3px 0 inset;
+    transform: translateY(-2px);
+}
+
+button:active {
+    box-shadow: #ccabeb 0 3px 7px inset;
+    transform: translateY(2px);
+}
+
+.result {
+    margin-top: 10px;
+}
+
+.result label {
+    display: block;
+    margin-bottom: 5px;
+    color: #fff;
+}
+
+.result input {
+    width: calc(100% - 16px);
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background-color: #f9f9f9;
+}
diff --git a/index.html b/index.html
@@ -2220,6 +2220,20 @@ <h3>Calculates a percentage score of love compatibility based on names or birthd
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Macro Nutrient Calculator</h2>
+                <h3>Calculates an individuals daily macronutrient needs based on personal fitness goals and activity levels.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Macro-Nutrient-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Macro-Nutrient-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>Magic Number Calculator</h2>