// JavaScript
function updateGauge(value) {
    const gaugeValue = document.getElementById('gaugeValue');
    const gaugeText = document.getElementById('gaugeText');
    const maxGaugeValue = 100; // Maximum value the gauge can display
    const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)

    gaugeValue.style.transform = `rotate(${rotationDegree}deg)`;
    gaugeText.textContent = value; // Update the text

    // Change color based on value
    if (value <= 40) {
        gaugeValue.style.backgroundColor = 'green';
    } else if (value <= 80) {
        gaugeValue.style.backgroundColor = 'orange';
    } else {
        gaugeValue.style.backgroundColor = 'red';
    }
}

// Example usage:
updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100), changes color to orange, and updates the text to "50"