[
  {
    "search": "body {\n            background-color: #f8f9fa;\n            font-family: 'Open Sans', sans-serif;\n        }",
    "replace": "body {\n            background-color: #f8f9fa;\n            font-family: 'Open Sans', sans-serif;\n            margin: 0;\n            padding: 0;\n        }"
  },
  {
    "search": ".container {\n            max-width: 600px;\n            margin: 0 auto;\n            padding: 20px;\n            background-color: #fff;\n            border-radius: 5px;\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n        }",
    "replace": ".container {\n            max-width: 600px;\n            margin: 0 auto;\n            padding: 20px;\n            background-color: #fff;\n            border-radius: 5px;\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n            margin-top: 50px;\n        }"
  },
  {
    "search": "#height {\n            display: none;\n        }",
    "replace": "#height {\n            display: none;\n            margin-top: 10px;\n        }"
  },
  {
    "search": "#height-feet {\n            display: none;\n        }",
    "replace": "#height-feet {\n            display: none;\n            margin-top: 10px;\n        }"
  },
  {
    "search": "#height-inches {\n            display: none;\n        }",
    "replace": "#height-inches {\n            display: none;\n            margin-top: 10px;\n        }"
  },
  {
    "search": "#weight {\n            margin-top: 10px;\n        }",
    "replace": "#weight {\n            margin-top: 10px;\n            margin-bottom: 10px;\n        }"
  },
  {
    "search": ".button {\n            display: block;\n            width: 100%;\n            padding: 10px;\n            background-color: #007bff;\n            border: none;\n            border-radius: 5px;\n            color: #fff;\n            font-size: 16px;\n            text-align: center;\n            cursor: pointer;\n        }",
    "replace": ".button {\n            display: block;\n            width: 100%;\n            padding: 10px;\n            background-color: #007bff;\n            border: none;\n            border-radius: 5px;\n            color: #fff;\n            font-size: 16px;\n            text-align: center;\n            cursor: pointer;\n            margin-bottom: 20px;\n        }"
  },
  {
    "search": "<button id=\"calculate-button\" class=\"button\">Calculate BMI</button>",
    "replace": "<button id=\"calculate-button\" class=\"button\">Calculate BMI</button>\n\n        <button id=\"reset-button\" class=\"button\">Reset</button>"
  },
  {
    "search": "const calculateButton = document.getElementById('calculate-button');\ncalculateButton.addEventListener('click', calculateBMI);",
    "replace": "const calculateButton = document.getElementById('calculate-button');\ncalculateButton.addEventListener('click', calculateBMI);\n\n        const resetButton = document.getElementById('reset-button');\n        resetButton.addEventListener('click', resetBMI);"
  },
  {
    "search": "function calculateBMI() {\n                    const system = document.querySelector('input[name=\"system\"]:checked').value;\n                    let height;\n                    if (system === \"imperial\") {\n                        const feetToInches = parseFloat(heightFeetEl.value) * 12;\n                        const inches = parseFloat(heightInchesEl.value);\n                        height = feetToInches + inches;\n                    } else {\n                        height = parseFloat(heightEl.value);\n                    }\n                    const weight = parseFloat(document.getElementById('weight').value);\n\n                    let bmi;\n                    if (system === \"metric\") {\n                        bmi = weight / ((height / 100) * (height / 100));\n                    } else {\n                        bmi = (weight / (height * height)) * 703;\n                    }\n\n                    // Display the BMI result\n                    const bmiResultEl = document.getElementById('bmi-result');\n                    bmiResultEl.innerText = `Your BMI: ${bmi.toFixed(2)}`;\n\n                    // Determine the BMI category\n                    const bmiCategoryEl = document.getElementById('bmi-category');\n                    let category;\n                    if (bmi < 18.5) {\n                        category = \"Underweight\";\n                    } else if (bmi >= 18.5 && bmi < 25) {\n                        category = \"Normal Weight\";\n                    } else if (bmi >= 25 && bmi < 30) {\n                        category = \"Overweight\";\n                    } else {\n                        category = \"Obese\";\n                    }\n                    bmiCategoryEl.innerText = `Category: ${category}`;\n                }",
    "replace": "function calculateBMI() {\n                    const system = document.querySelector('input[name=\"system\"]:checked').value;\n                    let height;\n                    if (system === \"imperial\") {\n                        const feetToInches = parseFloat(heightFeetEl.value) * 12;\n                        const inches = parseFloat(heightInchesEl.value);\n                        height = feetToInches + inches;\n                    } else {\n                        height = parseFloat(heightEl.value);\n                    }\n                    const weight = parseFloat(document.getElementById('weight').value);\n\n                    let bmi;\n                    if (system === \"metric\") {\n                        bmi = weight / ((height / 100) * (height / 100));\n                    } else {\n                        bmi = (weight / (height * height)) * 703;\n                    }\n\n                    // Display the BMI result\n                    const bmiResultEl = document.getElementById('bmi-result');\n                    bmiResultEl.innerText = `Your BMI: ${bmi.toFixed(2)}`;\n\n                    // Determine the BMI category\n                    const bmiCategoryEl = document.getElementById('bmi-category');\n                    let category;\n                    if (bmi < 18.5) {\n                        category = \"Underweight\";\n                    } else if (bmi >= 18.5 && bmi < 25) {\n                        category = \"Normal Weight\";\n                    } else if (bmi >= 25 && bmi < 30) {\n                        category = \"Overweight\";\n                    } else {\n                        category = \"Obese\";\n                    }\n                    bmiCategoryEl.innerText = `Category: ${category}`;\n\n                    resetButton.style.display = 'block';\n                }"
  },
  {
    "search": "// Attach the calculateBMI function to the button click event\n                const calculateButton = document.getElementById('calculate-button');\n                calculateButton.addEventListener('click', calculateBMI);",
    "replace": "// Attach the calculateBMI function to the button click event\n                const calculateButton = document.getElementById('calculate-button');\n                calculateButton.addEventListener('click', calculateBMI);\n\n                function resetBMI() {\n                    document.querySelector('input[name=\"system\"][value=\"metric\"]').checked = true;\n                    heightEl.value = '';\n                    heightFeetEl.value = '';\n                    heightInchesEl.value = '';\n                    weightEl.value = '';\n                    bmiResultEl.innerText = '';\n                    bmiCategoryEl.innerText = '';\n                    resetButton.style.display = 'none';\n                }"
  },
  {
    "search": "// This will throw the error to the parent window.\n            throw error;",
    "replace": "// This will throw the error to the parent window.\n            console.error(error);"
  }
]