Jump to content

EMBED CODE IS MESSING UP MY ORIGINAL PAGE LAYOUT

Recommended Posts

THIS IS THE "STELLA-TEMPLATE" 

SO, THIS IS WHAT MY SITE "SHOULD LOOK LIKE

Screenshot2023-09-10at8_25_04AM.thumb.png.739bfa909b1f7009f3638c8a87c6f98f.png

THIS IS WHAT MY SITE LOOKS LIKE WHEN THE CODE IS ENABLED ON THE PAGE THAT I MADE FOR THE CALORIE AND THE MACRO CALCULATORS.

The entire site is shrunk and small. 

Screenshot2023-09-10at8_41_56AM.thumb.png.ca0465cba9d4e970677d7044ca8f2320.png

I WANTED TO MAKE A CALORIE AND MACRO CALCULATOR AND IMPLEMENT MORE INFORMATION ON MY SITE, BUT I'M NOT 100% SURE WHERE IN THE CODE, I MESSED UP: 

BELOW IS THE SOURCE CODE FOR THE CALCULATORS: 

"CALORIE CALCULATOR"

<html>
<form class="CalculateForm" method="post">
                <div class="card bg-dark text-white">
                    <h4 class="text-center text-danger card-header mb-4">Calorie Calculator</h4>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-sm-4">
                                <div>
                                    <h5>Age*</h5>
                                    <input class="form-control text-end" name="age" required="" type="number" value="25" />
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div>
                                    <h5>Gender*</h5>
                                    <div class="form-control">
                                        <div class="row">
                                            <div class="col-6 d-flex align-items-center">
                                                <input checked="" id="gender_male" name="gender" required="" type="radio" value="0" />
                                                <label class="ms-2">Male</label>
                                            </div>
                                            <div class="col-6 d-flex align-items-center">
                                                <input id="gender_female" name="gender" required="" type="radio" value="1" />
                                                <label class="ms-2">Female</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div>
                                    <h5>Body Fat*</h5>
                                    <div class="d-flex align-items-center">
                                        <input class="form-control text-end" name="bodyFat" required="" type="number" value="20" />
                                        <span class="btn ms-1 bg-warning">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div>
                                    <h5>Height*</h5>
                                    <div class="d-flex align-items-center">
                                        <input class="form-control text-end" name="height" required="" type="number" value="180" />
                                        <span class="btn ms-1 bg-warning text-nowrap">cm</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div>
                                    <h5>Weight*</h5>
                                    <div class="d-flex align-items-center">
                                        <input class="form-control text-end" name="weight" required="" type="number" value="65" />
                                        <span class="btn ms-1 bg-warning text-nowrap">kg</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h5>Activity*</h5>
                                <select class="form-select" name="activity" required="">
                                    <option value="1">Basal Metabolic Rate (BMR)</option>
                                    <option value="1.2">Sedentary: little or no exercise</option>
                                    <option value="1.375">Light: exercise 1-3 times/week</option>
                                    <option selected="" value="1.465">Moderate: exercise 4-5 times/week</option>
                                    <option value="1.55">Active: daily exercise or intense exercise 3-4 times/week</option>
                                    <option value="1.725">Very Active: intense exercise 6-7 times/week</option>
                                    <option value="1.9">Extra Active: very intense exercise daily, or physical job</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <div>
                                    <h5>Result Unit*</h5>
                                    <div class="form-control">
                                        <div class="row">
                                            <div class="col-6 d-flex align-items-center">
                                                <input checked="" id="unit_calories" name="unit" required="" type="radio" value="Calories" />
                                                <label class="ms-2">Calories</label>
                                            </div>
                                            <div class="col-6 d-flex align-items-center">
                                                <input id="unit_kilo" name="unit" required="" type="radio" value="kilojoules" />
                                                <label class="ms-2">kilojoules</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div>
                                    <h5>BMR estimation formula*</h5>
                                    <div class="row g-3">
                                        <div class="col-sm-12 d-flex align-items-center">
                                            <input checked="" id="Mifflin_St_Jeor" name="formula" required="" type="radio" value="0" />
                                            <label class="ms-2">Mifflin St Jeor</label>
                                        </div>
                                        <div class="col-sm-12 d-flex align-items-center">
                                            <input id="Revised_Harris_Benedict" name="formula" required="" type="radio" value="1" />
                                            <label class="ms-2">Revised Harris-Benedict</label>
                                        </div>
                                        <div class="col-sm-12 d-flex align-items-center">
                                            <input id="Katch_McArdle" name="formula" required="" type="radio" value="2" />
                                            <label class="ms-2">Katch-McArdle</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ans_calculate"></div>
                    <div class="text-center mt-4 card-footer">
                        <button class="btn btn-success" onclick="calculateCalorie(this)" type="button">
                            <i class="fas fa-calculator me-3"></i>
                            Calculate
                        </button>
                    </div>
                </div>
            </form>
             <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"></link>
            <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"></link>
            <style>
                .form-control, .form-select, .card, .btn
                {
                    border-radius: 15px;
                }

                .form-control, .form-select
                {
                    background: none;
                    color: #fff;
                }

                .form-select
                {
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
                    background-repeat: no-repeat !important;
                    background-position: right 0.75rem center !important;
                    background-size: 16px 12px !important;
                }

                input[type=checkbox], input[type=radio]
                {
                    width: 23px;
                    height: 23px;
                    display: inline-block;
                    top: 0;
                    position: relative;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    border: 1px solid #ffffff;
                    overflow: hidden;
                }

                input[type=checkbox]
                {
                    border-radius: 3px;
                }

                input[type=radio]
                {
                    border-radius: 100%;
                }

                input[type=checkbox]:checked, input[type=radio]:checked
                {
                    border: none;
                }

                input[type=checkbox]:checked:after, input[type=radio]:checked:after
                {
                    content: "\f00c";
                    font-family: "Font Awesome 5 Pro";
                    font-weight: 900;
                    left: 0;
                    position:absolute;
                    top:0;
                    font-size: 15px;
                    color: #000;
                    background: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                }
            </style>
              <script>
                function calculateCalorie(obj)
                {
                    const age = obj.form.age.value;
                    const gender = obj.form.gender.value;
                    const bodyFat = obj.form.bodyFat.value;
                    const height = obj.form.height.value;
                    const weight = obj.form.weight.value;
                    const activity = obj.form.activity.value;
                    const unit = obj.form.unit.value;
                    const formula = obj.form.formula.value;

                    let BMR = '';
                    if(formula == 0) // Mifflin
                    {
                        BMR = Mifflin(gender, age, bodyFat, height, weight);
                    }
                    else if(formula == 1) // Harris
                    {
                        BMR = Harris(gender, age, bodyFat, height, weight);
                    }
                    else if(formula == 2) // Katch
                    {
                        BMR = Katch(bodyFat, weight);
                    }

                    let ret = parseFloat(BMR)*parseFloat(activity);
                    if(unit == 'kilojoules')
                    {
                        ret = (ret*4.1868);
                    }

                    document.querySelector(".ans_calculate").innerHTML = '<div class="container"><h4 class="text-center form-control my-3 text-danger fs-4">You should consume <span class="text-white">'+Math.ceil(ret)+' '+unit+'/day </span> of calorie to maintain your weight.</h4></div>';
                }

                function Mifflin(gender, age, bodyFat, height, weight)
                {
                    let BMR = (10*weight) + (6.25*height) - (5*age) + 5;
                    if(gender == 1) // Female
                    {
                        BMR = (10*weight) + (6.25*height) - (5*age) - 161;
                    }

                    return BMR;
                }

                function Harris(gender, age, bodyFat, height, weight)
                {
                    let BMR = (13.397*weight) + (4.799*height) - (5.677*age) + 88.362;
                    if(gender == 1) // Female
                    {
                        BMR = (9.247*weight) + (3.098*height) - (4.330*age) + 447.593;
                    }

                    return BMR;
                }

                function Katch(bodyFat, weight)
                {
                    let BMR = 370 + 21.6*(1 - (bodyFat/100))*weight;

                    return BMR;
                }
            </script>
</html>

"MACRO CALCULATOR

 

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Macro Calculator with Sample Meal Plan</title>

    <style>

        /* Your custom CSS styles here */

        .container {

            max-width: 400px;

            margin: 0 auto;

            padding: 20px;

            background-color: #f3f3f3;

            border-radius: 10px;

        }

        h1 {

            text-align: center;

            color: black;

        }

        label {

            font-weight: bold;

            color: black;

        }

        input, select {

            width: 100%;

            padding: 10px;

            margin: 5px 0;

            border: 1px solid #ccc;

            border-radius: 5px;

        }

        button {

            width: 100%;

            padding: 10px;

            background-color: #007bff;

            color: #fff;

            border: none;

            border-radius: 5px;

            cursor: pointer;

        }

        button:hover {

            background-color: #0056b3;

        }

        #results {

            margin-top: 20px;

            text-align: center;

        }

        #sampleMealPlan {

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Macro Calculator</h1>

        <form id="macroCalculator">

            <!-- Your input fields for age, gender, weight, height, activity, and goal here -->

            <div>

                <label for="age">Age (years):</label>

                <input type="number" id="age" name="age" required>

            </div>

            <div>

                <label for="gender">Gender:</label>

                <select id="gender" name="gender" required>

                    <option value="male">Male</option>

                    <option value="female">Female</option>

                </select>

            </div>

            <div>

                <label for="weight">Weight (kg):</label>

                <input type="number" id="weight" name="weight" required>

            </div>

            <div>

                <label for="height">Height (cm):</label>

                <input type="number" id="height" name="height" required>

            </div>

            <div>

                <label for="activity">Activity Level:</label>

                <select id="activity" name="activity" required>

                    <option value="sedentary">Sedentary (little or no exercise)</option>

                    <option value="light">Light (light exercise or sports 1-3 days/week)</option>

                    <option value="moderate">Moderate (moderate exercise or sports 3-5 days/week)</option>

                    <option value="active">Active (hard exercise or sports 6-7 days/week)</option>

                    <option value="superActive">Super Active (very hard exercise or sports, physical job, etc.)</option>

                </select>

            </div>

            <div>

                <label for="goal">Goal:</label>

                <select id="goal" name="goal" required>

                    <option value="maintenance">Maintenance</option>

                    <option value="weightLoss">Weight Loss</option>

                    <option value="muscleGain">Muscle Gain</option>

                </select>

            </div>

            <button type="button" id="calculateButton">Calculate</button>

        </form>

        <div id="results">

            <!-- Display calculated macros here -->

            <h2>Your Macros:</h2>

            <p>Calories: <span id="calories"></span></p>

            <p>Protein: <span id="protein"></span> grams</p>

            <p>Carbohydrates: <span id="carbohydrates"></span> grams</p>

            <p>Fat: <span id="fat"></span> grams</p>

        </div>

        <!-- Display sample meal plan -->

        <h2>Sample Meal Plan:</h2>

        <div id="sampleMealPlan">

            <!-- Sample meal plan will be dynamically added here -->

        </div>

    </div>

    <script>

        // Your JavaScript code for calculating macros here

 

        // Function to display a sample meal plan

        function displaySampleMealPlan(calories, protein, carbohydrates, fat) {

            const sampleMealPlanContainer = document.getElementById('sampleMealPlan');

            sampleMealPlanContainer.innerHTML = ''; // Clear any previous sample meal plan.

 

            // Sample meal plan data (replace with your own meal plan data)

            const mealPlan = [

                {

                    name: 'Breakfast',

                    items: [

                        'Scrambled Eggs',

                        'Whole Wheat Toast',

                        'Mixed Berries',

                    ],

                },

                {

                    name: 'Lunch',

                    items: [

                        'Grilled Chicken Breast',

                        'Quinoa Salad',

                        'Steamed Broccoli',

                    ],

                },

                {

                    name: 'Dinner',

                    items: [

                        'Salmon Fillet',

                        'Brown Rice',

                        'Asparagus',

                    ],

                },

                {

                    name: 'Snacks',

                    items: [

                        'Greek Yogurt',

                        'Almonds',

                        'Carrot Sticks',

                    ],

                },

            ];

 

            // Create a function to add items to the sample meal plan

            function addToSampleMealPlan(meal) {

                const mealElement = document.createElement('div');

                mealElement.innerHTML = `<h3>${meal.name}</h3><ul>${meal.items

                    .map((item) => `<li>${item}</li>`)

                    .join('')}</ul>`;

                sampleMealPlanContainer.appendChild(mealElement);

            }

 

            // Display the sample meal plan

            mealPlan.forEach((meal) => {

                addToSampleMealPlan(meal);

            });

        }

 

        // Add an event listener to the "Calculate" button

        document.getElementById('calculateButton').addEventListener('click', function() {

            // Get user inputs and perform macro calculations

            const age = parseInt(document.getElementById('age').value);

            const gender = document.getElementById('gender').value;

            const weight = parseFloat(document.getElementById('weight').value);

            const height = parseFloat(document.getElementById('height').value);

            const activity = document.getElementById('activity').value;

            const goal = document.getElementById('goal').value;

 

            // Replace this part with your existing code for calculating macros

            let calories = 0;

            let protein = 0;

            let carbohydrates = 0;

            let fat = 0;

 

            // Calculate BMR, TDEE, and macros based on user inputs and goal

            // ...

 

            // Display calculated macros

            document.getElementById('calories').textContent = Math.round(calories);

            document.getElementById('protein').textContent = Math.round(protein);

            document.getElementById('carbohydrates').textContent = Math.round(carbohydrates);

            document.getElementById('fat').textContent = Math.round(fat);

 

            // Call the function to display the sample meal plan

            displaySampleMealPlan(calories, protein, carbohydrates, fat);

        });

    </script>

</body>

</html>

SOMEWHERE IN THE CODE, ASSUMING IT HAS TO DO WITH THE CSS, I'M NOT 100% SURE WHERE THE SYNTAX ERROR IS OCCURRING. PLEASE HELP!

Screenshot 2023-09-10 at 8.25.34 AM.png

Screenshot 2023-09-10 at 8.25.28 AM.png

Screenshot 2023-09-10 at 8.25.21 AM.png

Screenshot 2023-09-10 at 8.25.13 AM.png

Screenshot 2023-09-10 at 8.42.47 AM.png

Screenshot 2023-09-10 at 8.42.43 AM.png

Screenshot 2023-09-10 at 8.42.39 AM.png

Screenshot 2023-09-10 at 8.42.35 AM.png

Screenshot 2023-09-10 at 8.42.32 AM.png

Screenshot 2023-09-10 at 8.42.23 AM.png

Screenshot 2023-09-10 at 8.42.18 AM.png

 

 

Edited by Marinejonfit
Link to comment
  • Replies 0
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.