Як я створив точний калькулятор калорій і поживних речовин для Subway

Як розробник, який захоплюється медичними технологіями, я помітив прогалину на ринку. Хоча Subway надає інформацію про харчову цінність, клієнтам не вистачає інтерактивного інструменту для налаштування точних комбінацій їжі. Я хотів створити щось, що давало б людям інформацію про їхній вибір їжі в режимі реального часу, аж до останньої калорії.

Завдання було чітким: створити комплексний калькулятор, який міг би впоратися з величезною варіативністю меню Subway — від вибору хліба та білків до кожного овоча та приправи, зберігаючи при цьому точність з офіційними даними про харчування.

Я знайшов інструмент від nutritionix, який робить те саме, що добре, але я хотів створити щось більш зручне для користувачів.

Технічний стек та структура

1. Виклик даних

Моїм першим завданням було збирання та структурування даних про харчову цінність. Я провів тижні, збираючи офіційні таблиці харчування Subway, стандартизуючи вимірювання та створюючи комплексну базу даних JSON.

Структура повинна була бути як комплексною, так і ефективною:

const subwayMenu = { breads: [ { id: 'artisan-italian', name: '6" Artisan Italian Bread', calories: 210, totalFat: 2, saturatedFat: 1, // ... 14 additional nutritional fields }, // ... 10 more bread options ], // ... 9 additional categories };

\ Кожен пункт меню містить 19 показників харчової цінності, що гарантує відображення повної етикетки харчування в стилі FDA, а не лише калорій.

2. Архітектура управління станом

Основна складність полягала в управлінні станом вибору користувача. Замовлення Subway — це не простий вибір, а багатовимірна комбінація:

let currentSelection = { sandwichSize: '6inch', bread: null, proteins: {}, cheeses: {}, vegetables: {}, condiments: {}, // ... with quantities for each };

\ Я впровадив систему на основі кількості, де користувачі могли додавати кілька порцій білків, сирів або овочів. Множник "footlong" мав автоматично подвоювати відповідні компоненти, зберігаючи інші (наприклад, салати) без змін.

3. Адаптивний, ізольований дизайн компонентів

Щоб калькулятор працював на будь-якому веб-сайті без конфліктів CSS, я використав обмежений підхід:

#subway-calculator-isolated { all: initial; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', ...; } #subway-calculator-isolated * { box-sizing: border-box; margin: 0; padding: 0; }

\ Скидання all: initial та високий z-index (99999) забезпечували послідовне відображення калькулятора незалежно від стилю сайту-хоста.

Механізм точності: інтеграція офіційних даних про харчування

1. Комплексна інтеграція даних

Інструмент використовує офіційну інформацію про харчування Subway 2025 року, включаючи нещодавні доповнення, такі як хліб Ghost Pepper та оновлені формули салатів. Кожна точка даних була перевірена за допомогою PDF-посібників з харчування Subway та даних веб-сайту.

База даних включає не лише калорії, але й:

• Макроелементи (жири, вуглеводи, білки)
• Мікроелементи (вітаміни А, С, кальцій, залізо)
• Особливі дієтичні міркування (натрій, додані цукри, клітковина)
• Інформація, що стосується алергенів (холестерин, транс-жири)

2. Алгоритм динамічного розрахунку

Механізм розрахунку мав обробляти складні сценарії:

function calculateTotalNutrition() { let total = { calories: 0, totalFat: 0, /* ... */ }; const sizeMultiplier = currentSelection.sandwichSize === 'footlong' ? 2 : 1; // Bread calculation (size-dependent) if (currentSelection.bread) { addItemNutrition(total, bread, currentSelection.bread.quantity * sizeMultiplier); } // Proteins, cheeses, vegetables (size-dependent) ['proteins', 'cheeses', 'vegetables'].forEach(category => { // Apply size multiplier }); // Soups, desserts (size-independent) ['soups', 'desserts'].forEach(category => { // No size multiplier }); return { nutrition: total, ingredients }; }

3. Етикетка харчування, що відповідає FDA

Я відтворив точний формат етикетки харчування FDA, розраховуючи відсоток щоденних значень на основі дієти в 2000 калорій (налаштовується користувачем):

const fdaDailyValues = { totalFat: 78, saturatedFat: 20, cholesterol: 300, sodium: 2300, totalCarbs: 275, dietaryFiber: 28, addedSugars: 50, protein: 50, vitaminA: 900, vitaminC: 90, calcium: 1300, iron: 18 };

Розрахунки % Daily Value використовують ці офіційні референтні значення FDA, забезпечуючи відповідність нормативним вимогам.

Виклики та рішення користувацького досвіду

1. Інтуїтивне управління категоріями

Випадаючі списки в стилі акордеону з лічильниками в режимі реального часу вирішили проблему складності:

• Одиночний вибір для хліба (радіокнопки)
• Множинний вибір з кількістю для білків, овочів тощо
• Чіткий візуальний зворотний зв'язок з підрахунком вибору та значками калорій
• Масові дії (Очистити все) для кожної категорії

2. Система зворотного зв'язку в режимі реального часу

Кожна дія користувача запускає кілька оновлень:

1. Попередній перегляд вибору оновлюється негайно
2. Етикетка харчування перераховується
3. Анімація індикатора прогресу калорій
4. Список інгредієнтів регенерується

Індикатор прогресу використовує кольорове кодування (зелений → жовтий → червоний), щоб візуально вказати, як їжа відповідає щоденним цілям.

3. Адаптивність для мобільних пристроїв

Калькулятор використовує CSS Grid та Flexbox зі стратегічними точками зупинки:

@media (max-width: 768px) { .calculator-container { flex-direction: column; } .item-with-quantity { flex-direction: column; } .goal-setting-content { grid-template-columns: 1fr; } }

На мобільних пристроях елементи складаються вертикально, а етикетка харчування залишається читабельною без горизонтальної прокрутки.

Розширені функції та вдосконалення

1. Функціональність збереження

Функція експорту генерує детальний текстовий звіт, що включає:

• Повні факти про харчування
• Список інгредієнтів з кількістю
• Аналіз щоденного прогресу
• Персоналізовані поради щодо здоров'я на основі харчового профілю їжі

window.subwaySaveNutritionInfo = function() { const summary = ` ============================================================ SUBWAY NUTRITION CALCULATOR - MEAL SUMMARY ============================================================ MEAL DETAILS: ------------- Size: ${sizeText} Total Calories: ${Math.round(nutrition.calories)} Daily Calorie Goal: ${userSettings.dailyCalorieGoal} calories Percentage of Daily Goal: ${Math.round((nutrition.calories / userSettings.dailyCalorieGoal) * 100)}% `; // ... generates downloadable file };

2. Візуальний зворотний зв'язок та мікровзаємодії

• Анімовані переходи для випадаючих списків та індикаторів прогресу
• Пульсуючі анімації для зворотного зв'язку вибору
• Спливаючі підказки з корисними поясненнями
• Ефекти спалаху при підтвердженні скидання
• Плавне завантаження вмісту вкладок

3. Оптимізація продуктивності

• Ліниве завантаження вмісту вкладок
• Ефективні оновлення DOM (де можливо, пакетні)
• Мінімальні повторні рендеринги через цільові оновлення
• Оптимізована делегація подій

Точність даних та обслуговування

1. Процес перевірки

Кожне значення харчування було перехресно перевірено з:

1. Офіційними PDF-посібниками з харчування Subway
2. Калькуляторами харчування на веб-сайті
3. Правилами округлення FDA для етикеток харчування
4. Перевірками узгодженості між подібними елементами

2. Стратегія оновлення

Модульна структура JSON дозволяє легко оновлювати, коли Subway:

• Вводить нові пункти меню
• Переформулює існуючі пункти
• Змінює розміри порцій
• Оновлює інформацію про харчування

3. Обробка регіональних варіацій

Інструмент включає примітки (**) для елементів з потенційними регіональними варіаціями, радячи користувачам перевіряти місцеву інформацію про харчування, коли вона доступна.

Засвоєні уроки та майбутні вдосконалення

Що працювало добре:

1. Ізольована архітектура компонентів - Нульові конфлікти з сайтами-хостами
2. Комплексна структура даних - Легко підтримувати та розширювати
3. Зворотний зв'язок у режимі реального часу - Користувачі негайно бачать наслідки вибору
4. Оптимізація для мобільних пристроїв - Працює безперебійно на всіх пристроях

Подолані виклики:

1. Складне управління станом - Вирішено за допомогою чітких структур даних
2. Продуктивність з багатьма елементами - Оптимізовані оновлення DOM
3. Точні розрахунки розміру - Чіткі правила для того, що подвоюється у footlongs
4. Візуальна узгодженість - Користувацьке скидання CSS для надійного рендерингу

Заплановані майбутні вдосконалення:

1. Облікові записи користувачів для збереження улюблених комбінацій
2. Відстеження дієтичних цілей (низьковуглеводні, високобілкові тощо)
3. Планування харчування протягом кількох днів
4. Інтеграція з фітнес-додатками через API
5. Виявлення регіонального меню на основі місцезнаходження користувача

Висновок

Створення калькулятора харчування Subway було більше, ніж просто проект кодування — це було про створення прозорості у виборі їжі. Поєднуючи точні, офіційні дані про харчування з інтуїтивним інтерфейсом, ми надали користувачам можливість приймати обґрунтовані рішення щодо своїх страв.

Інструмент демонструє, як веб-технології (HTML, CSS, JavaScript) можуть створювати потужні, інтерактивні додатки, які подолають розрив між корпоративними даними та розумінням споживачів. Кожен рядок коду служить кінцевій меті: допомогти людям зрозуміти точно, що вони їдять, щоб вони могли узгодити свій вибір Subway зі своїми цілями здоров'я.

Калькулятор залишається живим проектом, з планами розширити його можливості, зберігаючи при цьому основне зобов'язання щодо точності та зручності використання, які вже зробили його цінним для тисяч користувачів.

Посилання на калькулятор: Subway Calorie Calculator: Count the Calories Enjoy the Sub - Subway Calorie Calculator

\ \