【文組寫程式】用 Google Gemini 做出自己的烘焙食譜比例換算器

阿斐拉

發佈於極簡主義者工作術

2025/12/24 更新2025/12/23 發佈閱讀 12 分鐘

最近在試著學習寫程式，沒想到搭配Google Germini一下子就成功了，這篇就想來紀錄一下我寫的程式。

第一步驟：確認需求

最近在學著做甜點，但是常常因為某項材料份量跟網路食譜不一樣，所以要換算比例很麻煩，所以想來做一個可以自動貼上食譜，並且幫助我依照我有的材料換算全套食譜的程式。

第二步驟：下prompt

我逐一跟Google Germini下指示，以下是我歷次下的prompt，也一一修正了我的需求。

我想要可以自動輸入某個食譜的比例，然後再跟它說我其中一項材料有多少，就可以幫我換算出整份食譜有的比例。
我想要一口氣貼上所有的食譜比例，我不想要一個一個輸入每一個單項食譜比例。
我可以用下拉式選單選其中一項材料，然後我只要輸入數字就好了。
我是mac電腦，請告訴我怎麼做。

第三步驟：長出程式碼

下完prompt後，Germini就幫我寫了一個HTML的程式碼如下：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烘焙比例自動換算器</title>
    <style>
        body { font-family: sans-serif; padding: 20px; max-width: 600px; margin: auto; background-color: #f4f4f9; }
        .card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        textarea { width: 100%; height: 120px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; padding: 8px; box-sizing: border-box; }
        .row { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
        select, input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; flex: 1; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border-bottom: 1px solid #eee; padding: 12px; text-align: left; }
        th { background-color: #f8f8f8; }
        .highlight { font-weight: bold; color: #e67e22; }
    </style>
</head>
<body>

<div class="card">
    <h2>🍞 烘焙比例換算器</h2>
    
    <label>1. 貼上原始食譜內容：</label>
    <textarea id="rawRecipe" placeholder="例如：&#10;高筋麵粉 500g&#10;水 350ml&#10;酵母 5g&#10;鹽 10"></textarea>
    
    <div id="controlPanel" style="display:none;">
        <label>2. 選擇基準材料與輸入重量：</label>
        <div class="row">
            <select id="ingredientSelect"></select>
            <input type="number" id="inputAmount" placeholder="現有重量">
        </div>
    </div>

    <div id="resultTable"></div>
</div>

<script>
    const rawRecipe = document.getElementById('rawRecipe');
    const ingredientSelect = document.getElementById('ingredientSelect');
    const inputAmount = document.getElementById('inputAmount');
    const resultTable = document.getElementById('resultTable');
    let parsedRecipe = {};

    // 解析文字食譜
    rawRecipe.addEventListener('input', () => {
        const text = rawRecipe.value;
        const regex = /([^\d\s\w\n,，。]+)\s*(\d+\.?\d*)/g;
        let match;
        parsedRecipe = {};
        ingredientSelect.innerHTML = '<option value="">-- 請選擇材料 --</option>';

        while ((match = regex.exec(text)) !== null) {
            const name = match[1].trim();
            const amount = parseFloat(match[2]);
            parsedRecipe[name] = amount;
            
            let opt = document.createElement('option');
            opt.value = name;
            opt.textContent = name;
            ingredientSelect.appendChild(opt);
        }

        if (Object.keys(parsedRecipe).length > 0) {
            document.getElementById('controlPanel').style.display = 'block';
        }
    });

    // 進行計算
    function calculate() {
        const target = ingredientSelect.value;
        const currentVal = parseFloat(inputAmount.value);

        if (!target || !currentVal || !parsedRecipe[target]) return;

        const ratio = currentVal / parsedRecipe[target];
        let html = `<table><tr><th>材料</th><th>換算後重量</th></tr>`;
        
        for (let name in parsedRecipe) {
            const newWeight = (parsedRecipe[name] * ratio).toFixed(1);
            const isTarget = name === target ? 'class="highlight"' : '';
            html += `<tr><td>${name}</td><td ${isTarget}>${newWeight}</td></tr>`;
        }
        html += `</table>`;
        resultTable.innerHTML = html;
    }

    ingredientSelect.addEventListener('change', calculate);
    inputAmount.addEventListener('input', calculate);
</script>

</body>
</html>