EMBED CODE IS MESSING UP MY ORIGINAL PAGE LAYOUT

Marinejonfit · September 10

THIS IS THE "STELLA-TEMPLATE"

SO, THIS IS WHAT MY SITE "SHOULD LOOK LIKE"

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.

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 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"

<head>

<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>

<h1>Macro Calculator</h1>

<div>

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

</div>

<div>

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

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

</select>

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

<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>

<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>

<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>

<h2>Sample Meal Plan:</h2>

</div>

// 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 = [

{

items: [

'Scrambled Eggs',

'Whole Wheat Toast',

'Mixed Berries',

],

},

{

items: [

'Grilled Chicken Breast',

'Quinoa Salad',

'Steamed Broccoli',

],

},

{

items: [

'Salmon Fillet',

'Brown Rice',

'Asparagus',

],

},

{

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!

Edited September 16 by Marinejonfit

EMBED CODE IS MESSING UP MY ORIGINAL PAGE LAYOUT

Recommended Posts

Marinejonfit

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources