我如何建立了一個準確的 Subway 卡路里和營養計算器

作為一名對健康科技充滿熱情的開發者，我注意到市場上存在一個空缺。雖然賽百味提供營養資訊，但顧客缺乏一個互動工具來自定義他們的確切餐點組合。我想創建一個能夠讓人們即時了解他們的餐點選擇的工具，精確到最後一卡路里。

挑戰很明確：建立一個全面的計算器，能夠處理賽百味菜單的巨大變化性—從麵包選擇和蛋白質選擇到每一種蔬菜和調味料，同時保持與官方營養數據的準確性。

我發現了一個由 Nutritionix 開發的工具，它做同樣的事情，這很好，但我想建立一個感覺更加用戶友好的工具。

技術堆疊和結構

1. 數據挑戰

我的第一個任務是收集和結構化營養數據。我花了數週收集賽百味的官方營養圖表，標準化測量，並創建一個全面的 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. 狀態管理架構

核心複雜性在於管理用戶的選擇狀態。賽百味訂單不是一個簡單的選擇—它是一個多維組合：

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

\ 我實施了一個基於數量的系統，用戶可以添加多份蛋白質、奶酪或蔬菜。"長尺寸"乘數必須自動將適當的組件加倍，同時保持其他組件（如沙拉）不受影響。

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. 全面數據整合

該工具使用賽百味的官方 2025 年營養信息，包括最近添加的如幽靈辣椒麵包和更新的沙拉配方。每個數據點都與賽百味的 PDF 營養指南和網站數據進行了驗證。

數據庫不僅包括卡路里，還包括：

• 宏量營養素（脂肪、碳水化合物、蛋白質）
• 微量營養素（維生素 A、C、鈣、鐵）
• 特殊飲食考慮（鈉、添加糖、纖維）
• 過敏原相關信息（膽固醇、反式脂肪）

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 營養標籤格式，根據 2,000 卡路里飲食（用戶可調整）計算每日值百分比：

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 營養指南
2. 網站營養計算器
3. FDA 營養標籤四捨五入規則
4. 類似項目間的一致性檢查

2. 更新策略

模塊化 JSON 結構允許在賽百味進行以下操作時輕鬆更新：

• 引入新菜單項目
• 重新配方現有項目
• 更改份量大小
• 更新營養信息

3. 處理區域變化

該工具包括具有潛在區域變化項目的註釋（**），建議用戶在可用時查看當地營養信息。

經驗教訓與未來改進

效果良好的部分：

1. 隔離組件架構 - 與主機站點零衝突
2. 全面的數據結構 - 易於維護和擴展
3. 實時反饋 - 用戶立即看到選擇的後果
4. 移動優化 - 在所有設備上無縫運行

克服的挑戰：

1. 複雜狀態管理 - 通過清晰的數據結構解決
2. 多項目性能 - 優化 DOM 更新
3. 準確尺寸計算 - 明確長尺寸中加倍的規則
4. 視覺一致性 - 自定義 CSS 重置以實現可靠渲染

計劃的未來增強：

1. 用戶帳戶 保存喜愛的組合
2. 飲食目標追蹤（低碳水、高蛋白等）
3. 跨多天的餐點計劃
4. 整合 通過 API 與健身應用程序
5. 區域菜單檢測 基於用戶位置

結論

建立賽百味營養計算器不僅僅是一個編碼項目—它是關於在食物選擇中創造透明度。通過結合準確的官方營養數據與直觀的界面，我們已經賦予用戶做出明智餐點決定的能力。

該工具展示了網絡技術（HTML、CSS、JavaScript）如何創建強大的互動應用程序，彌合企業數據與消費者理解之間的差距。每一行代碼都服務於最終目標：幫助人們確切了解他們正在吃什麼，以便他們能夠將賽百味選擇與健康目標保持一致。

計算器仍然是一個活躍的項目，計劃擴展其功能，同時保持對準確性和可用性的核心承諾，這已經使其對數千名用戶有價值。

計算器連結：賽百味卡路里計算器：計算卡路里 享受三明治 - 賽百味卡路里計算器

\ \