https://weightcalculator.my.canva.site/bmr-calculator
BMR Calculator
Calculate your Basal Metabolic Rate
async function onConfigChange(config) { const bgColor1 = config.background_color || defaultConfig.background_color; const bgColor2 = config.accent_color || defaultConfig.accent_color; const surfaceColor = config.surface_color || defaultConfig.surface_color; const textColor = config.text_color || defaultConfig.text_color; const primaryColor = config.primary_action_color || defaultConfig.primary_action_color; const customFont = config.font_family || defaultConfig.font_family; const baseSize = config.font_size || defaultConfig.font_size; const baseFontStack = 'system-ui, -apple-system, sans-serif';
const appDiv = document.getElementById('app'); appDiv.style.background = `linear-gradient(135deg, ${bgColor1} 0%, ${bgColor2} 100%)`;
const card = appDiv.querySelector('.bg-white'); card.style.backgroundColor = surfaceColor;
const title = document.getElementById('main-title'); title.textContent = config.main_title || defaultConfig.main_title; title.style.background = `linear-gradient(135deg, ${bgColor1} 0%, ${bgColor2} 100%)`; title.style.webkitBackgroundClip = 'text'; title.style.webkitTextFillColor = 'transparent'; title.style.backgroundClip = 'text'; title.style.fontFamily = `${customFont}, ${baseFontStack}`; title.style.fontSize = `${baseSize * 2}px`;
const subtitle = document.getElementById('subtitle'); subtitle.textContent = config.subtitle || defaultConfig.subtitle; subtitle.style.color = textColor; subtitle.style.fontFamily = `${customFont}, ${baseFontStack}`; subtitle.style.fontSize = `${baseSize * 1.125}px`;
const resultTitle = document.getElementById('result-title'); resultTitle.textContent = config.result_title || defaultConfig.result_title; resultTitle.style.color = textColor; resultTitle.style.fontFamily = `${customFont}, ${baseFontStack}`; resultTitle.style.fontSize = `${baseSize * 1.5}px`;
const calculateBtn = document.getElementById('calculate-btn'); calculateBtn.textContent = config.button_text || defaultConfig.button_text; calculateBtn.style.background = `linear-gradient(135deg, ${primaryColor} 0%, ${bgColor2} 100%)`; calculateBtn.style.fontFamily = `${customFont}, ${baseFontStack}`; calculateBtn.style.fontSize = `${baseSize * 1.125}px`;
const labels = document.querySelectorAll('label'); labels.forEach(label => { label.style.color = textColor; label.style.fontFamily = `${customFont}, ${baseFontStack}`; label.style.fontSize = `${baseSize * 0.875}px`; });
const inputs = document.querySelectorAll('input[type="number"]'); inputs.forEach(input => { input.style.fontFamily = `${customFont}, ${baseFontStack}`; input.style.fontSize = `${baseSize}px`; });
const radioLabels = document.querySelectorAll('input[type="radio"] + span'); radioLabels.forEach(span => { span.style.fontFamily = `${customFont}, ${baseFontStack}`; span.style.fontSize = `${baseSize}px`; });
const bmrValue = document.getElementById('bmr-value'); bmrValue.style.background = `linear-gradient(135deg, ${bgColor1} 0%, ${bgColor2} 100%)`; bmrValue.style.webkitBackgroundClip = 'text'; bmrValue.style.webkitTextFillColor = 'transparent'; bmrValue.style.backgroundClip = 'text'; bmrValue.style.fontFamily = `${customFont}, ${baseFontStack}`; bmrValue.style.fontSize = `${baseSize * 3}px`;
const resultTexts = document.querySelectorAll('#result p'); resultTexts.forEach(p => { p.style.color = textColor; p.style.fontFamily = `${customFont}, ${baseFontStack}`; p.style.fontSize = `${baseSize * 0.875}px`; });
const caloriesLabel = document.querySelector('#result p.text-lg'); if (caloriesLabel) { caloriesLabel.style.fontSize = `${baseSize * 1.125}px`; }
const radioButtons = document.querySelectorAll('.radio-custom'); radioButtons.forEach(radio => { radio.style.borderColor = primaryColor; if (radio.checked) { radio.style.backgroundColor = primaryColor; } }); }
document.getElementById('bmr-form').addEventListener('submit', function(e) { e.preventDefault();
const age = parseFloat(document.getElementById('age').value); const weight = parseFloat(document.getElementById('weight').value); const height = parseFloat(document.getElementById('height').value); const gender = document.querySelector('input[name="gender"]:checked').value;
let bmr; if (gender === 'male') { bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age); } else { bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age); }
document.getElementById('bmr-value').textContent = Math.round(bmr); document.getElementById('result').classList.remove('hidden');
document.getElementById('result').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); });
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange,
mapToCapabilities: (config) => ({
recolorables: [
{
get: () => config.background_color || defaultConfig.background_color,
set: (value) => {
config.background_color = value;
window.elementSdk.setConfig({ background_color: value });
}
},
{
get: () => config.surface_color || defaultConfig.surface_color,
set: (value) => {
config.surface_color = value;
window.elementSdk.setConfig({ surface_color: value });
}
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (value) => {
config.text_color = value;
window.elementSdk.setConfig({ text_color: value });
}
},
{
get: () => config.primary_action_color || defaultConfig.primary_action_color,
set: (value) => {
config.primary_action_color = value;
window.elementSdk.setConfig({ primary_action_color: value });
}
},
{
get: () => config.accent_color || defaultConfig.accent_color,
set: (value) => {
config.accent_color = value;
window.elementSdk.setConfig({ accent_color: value });
}
}
],
borderables: [],
fontEditable: {
get: () => config.font_family || defaultConfig.font_family,
set: (value) => {
config.font_family = value;
window.elementSdk.setConfig({ font_family: value });
}
},
fontSizeable: {
get: () => config.font_size || defaultConfig.font_size,
set: (value) => {
config.font_size = value;
window.elementSdk.setConfig({ font_size: value });
}
}
}),
mapToEditPanelValues: (config) => new Map([
["main_title", config.main_title || defaultConfig.main_title],
["subtitle", config.subtitle || defaultConfig.subtitle],
["result_title", config.result_title || defaultConfig.result_title],
["button_text", config.button_text || defaultConfig.button_text]
])
});
}
