[
  {
    "search": "</div>",
    "replace": `</div>
    <div id="scale-container">
        <div class="marker" style="top: calc(${calculateMarkerPosition(bmi)}% - 10px);"></div>
        <div class="scale-section"></div>
        <div class="scale-section"></div>
        <div class="scale-section"></div>
        <div class="scale-section"></div>
    </div>`
  },
  {
    "search": "<style>",
    "replace": `<style>
        #scale-container {
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
            height: 200px;
            margin-top: 20px;
            position: relative;
        }

        .marker {
            position: absolute;
            width: 2px;
            background-color: #000000;
            transform: translateY(-50%);
            transition: transform 0.3s ease;
        }

        .scale-section {
            flex-grow: 1;
        }

        .scale-section:nth-child(1) {
            background-color: blue;
        }

        .scale-section:nth-child(2) {
            background-color: green;
        }

        .scale-section:nth-child(3) {
            background-color: yellow;
        }

        .scale-section:nth-child(4) {
            background-color: red;
        }

        .scale-label {
            font-size: 12px;
            text-align: center;
            margin-top: 5px;
        }

        .bold-range {
            font-weight: bold;
        }
    </style>`
  },
  {
    "search": "displayResults(bmi);",
    "replace": `displayResults(bmi);
    highlightRange(bmi);`
  },
  {
    "search": "function displayResults(bmi) {",
    "replace": `function highlightRange(bmi) {
    const interpretation = getInterpretation(bmi);
    const rangeElements = document.querySelectorAll(".scale-section");

    rangeElements.forEach((element) => {
        element.classList.remove("bold-range");
    });

    let rangeIndex;
    switch (interpretation) {
        case "Underweight":
            rangeIndex = 0;
            break;
        case "Normal weight":
            rangeIndex = 1;
            break;
        case "Overweight":
            rangeIndex = 2;
            break;
        case "Obese":
            rangeIndex = 3;
            break;
        default:
            rangeIndex = -1;
    }

    if (rangeIndex !== -1) {
        rangeElements[rangeIndex].classList.add("bold-range");
    }
}

function getInterpretation(bmi) {
    if (bmi < 18.5) {
        return "Underweight";
    } else if (bmi >= 18.5 && bmi < 25) {
        return "Normal weight";
    } else if (bmi >= 25 && bmi < 30) {
        return "Overweight";
    } else {
        return "Obese";
    }
}

${"function displayResults(bmi) {"}`
  }
]