https://weightcalculator.my.canva.site/pregnancy-calculator

async function onConfigChange(config) { const customFont = config.font_family || defaultConfig.font_family; const baseFontStack = 'sans-serif'; const baseSize = config.font_size || defaultConfig.font_size;

// Apply font to primary text elements document.getElementById('mainTitle').style.fontFamily = `${customFont}, 'Cormorant Garamond', serif`; document.getElementById('subtitle').style.fontFamily = `${customFont}, ${baseFontStack}`; document.getElementById('dateLabel').style.fontFamily = `${customFont}, ${baseFontStack}`; document.getElementById('calculateBtn').style.fontFamily = `${customFont}, ${baseFontStack}`; document.getElementById('resultsHeading').style.fontFamily = `${customFont}, 'Cormorant Garamond', serif`;

// Apply font sizes proportionally document.getElementById('mainTitle').style.fontSize = `${baseSize * 2.5}px`; document.getElementById('subtitle').style.fontSize = `${baseSize}px`; document.getElementById('dateLabel').style.fontSize = `${baseSize * 0.9}px`; document.getElementById('calculateBtn').style.fontSize = `${baseSize * 1.1}px`; document.getElementById('resultsHeading').style.fontSize = `${baseSize * 1.75}px`;

// Apply text content document.getElementById('mainTitle').textContent = config.main_title || defaultConfig.main_title; document.getElementById('subtitle').textContent = config.subtitle || defaultConfig.subtitle; document.getElementById('dateLabel').textContent = config.date_label || defaultConfig.date_label; document.getElementById('calculateBtn').textContent = config.button_text || defaultConfig.button_text; document.getElementById('resultsHeading').textContent = config.results_heading || defaultConfig.results_heading;

// Apply colors const backgroundColor = config.background_color || defaultConfig.background_color; const surfaceColor = config.surface_color || defaultConfig.surface_color; const textColor = config.text_color || defaultConfig.text_color; const primaryActionColor = config.primary_action_color || defaultConfig.primary_action_color; const secondaryActionColor = config.secondary_action_color || defaultConfig.secondary_action_color;

document.querySelector('.app-wrapper').style.background = `linear-gradient(135deg, ${backgroundColor} 0%, #f5e6e8 50%, #e8f3f5 100%)`; document.querySelector('.calculator-container').style.background = `rgba(${hexToRgb(surfaceColor)}, 0.95)`; document.querySelectorAll('.title, .result-value').forEach(el => el.style.color = textColor); document.querySelectorAll('.subtitle, .input-label, .result-label').forEach(el => el.style.color = textColor);

const button = document.getElementById('calculateBtn'); button.style.background = `linear-gradient(135deg, ${primaryActionColor} 0%, ${secondaryActionColor} 100%)`; button.style.boxShadow = `0 6px 20px ${primaryActionColor}4D`; }

function hexToRgb(hex) { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : '255, 255, 255'; }

function mapToCapabilities(config) { return { recolorables: [ { get: () => config.background_color || defaultConfig.background_color, set: (value) => { config.background_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ background_color: value }); } } }, { get: () => config.surface_color || defaultConfig.surface_color, set: (value) => { config.surface_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ surface_color: value }); } } }, { get: () => config.text_color || defaultConfig.text_color, set: (value) => { config.text_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ text_color: value }); } } }, { get: () => config.primary_action_color || defaultConfig.primary_action_color, set: (value) => { config.primary_action_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ primary_action_color: value }); } } }, { get: () => config.secondary_action_color || defaultConfig.secondary_action_color, set: (value) => { config.secondary_action_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ secondary_action_color: value }); } } } ], borderables: [], fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (value) => { config.font_family = value; if (window.elementSdk) { window.elementSdk.setConfig({ font_family: value }); } } }, fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (value) => { config.font_size = value; if (window.elementSdk) { window.elementSdk.setConfig({ font_size: value }); } } } }; }

function mapToEditPanelValues(config) { return new Map([ ["main_title", config.main_title || defaultConfig.main_title], ["subtitle", config.subtitle || defaultConfig.subtitle], ["date_label", config.date_label || defaultConfig.date_label], ["button_text", config.button_text || defaultConfig.button_text], ["results_heading", config.results_heading || defaultConfig.results_heading] ]); }

if (window.elementSdk) { window.elementSdk.init({ defaultConfig, onConfigChange, mapToCapabilities, mapToEditPanelValues }); }

// Set max date to today const today = new Date().toISOString().split('T')[0]; document.getElementById('lmpDate').setAttribute('max', today);

// Calculate pregnancy details document.getElementById('calculateBtn').addEventListener('click', function(e) { e.preventDefault();

const lmpDateInput = document.getElementById('lmpDate').value;

if (!lmpDateInput) { return; }

const lmpDate = new Date(lmpDateInput); const today = new Date();

// Calculate due date (280 days from LMP) const dueDate = new Date(lmpDate); dueDate.setDate(dueDate.getDate() + 280);

// Calculate days pregnant const diffTime = today - lmpDate; const daysPregnant = Math.floor(diffTime / (1000 * 60 * 60 * 24));

// Calculate weeks and days const weeks = Math.floor(daysPregnant / 7); const days = daysPregnant % 7;

// Calculate days remaining const daysRemaining = Math.floor((dueDate - today) / (1000 * 60 * 60 * 24));

// Format due date const options = { year: 'numeric', month: 'long', day: 'numeric' }; const formattedDueDate = dueDate.toLocaleDateString('en-US', options);

// Update results document.getElementById('dueDate').textContent = formattedDueDate; document.getElementById('currentWeek').textContent = `${weeks} weeks`; document.getElementById('currentDay').textContent = `${days} days`; document.getElementById('daysRemaining').textContent = daysRemaining > 0 ? `${daysRemaining} days` : 'Due soon!';

// Show results document.getElementById('results').classList.add('show'); });