If you want to convert the temperature back to Celsius, you can add a conversion function that can be called to switch back and forth between Celsius and Fahrenheit. Here's an example:

javascript
 
 
Copy code
// Select all the elements with the class "temp".
const temps = document.querySelectorAll('.temp');

// Convert Celsius temperature to Fahrenheit.
function celsiusToFahrenheit(celsius) {
  return (celsius * 9/5) + 32;
}

// Convert Fahrenheit temperature to Celsius.
function fahrenheitToCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5/9;
}

// Loop through each temperature element and convert the temperature.
temps.forEach(temp => {
  // Get the temperature value and check if it's in Celsius or Fahrenheit.
  const isCelsius = temp.classList.contains('celsius');
  const isFahrenheit = temp.classList.contains('fahrenheit');
  let value = parseFloat(temp.innerText);

  // Convert the temperature based on its current unit of measurement.
  if (isCelsius) {
    value = celsiusToFahrenheit(value);
    temp.innerText = value.toFixed(2) + ' °F';
  } else if (isFahrenheit) {
    value = fahrenheitToCelsius(value);
    temp.innerText = value.toFixed(2) + ' °C';
  }
});

In this example, we've added two functions: celsiusToFahrenheit() and fahrenheitToCelsius(). These functions take in a value and convert it from Celsius to Fahrenheit or Fahrenheit to Celsius, respectively. The main loop then checks the class of each temperature element to determine whether it's in Celsius or Fahrenheit, and calls the appropriate conversion function.

To toggle between Celsius and Fahrenheit, you can add event listeners to buttons or other UI elements and use JavaScript to update the temp elements accordingly. Here's an example of how you can add buttons to the HTML and add event listeners in JavaScript:

html
 
 
Copy code
<p class="temp celsius">20 °C</p>
<p class="temp celsius">15 °C</p>
<p class="temp fahrenheit">68 °F</p>
<p class="temp fahrenheit">77 °F</p>

<button id="celsiusButton">Convert to Celsius</button>
<button id="fahrenheitButton">Convert to Fahrenheit</button>

javascript
 
 
Copy code
// Add event listener to Celsius button.
const celsiusButton = document.querySelector('#celsiusButton');
celsiusButton.addEventListener('click', () => {
  // Update the class of all temperature elements to "celsius".
  temps.forEach(temp => {
    temp.classList.remove('fahrenheit');
    temp.classList.add('celsius');
  });

  // Loop through each temperature element and convert the temperature to Celsius.
  temps.forEach(temp => {
    const isCelsius = temp.classList.contains('celsius');
    const isFahrenheit = temp.classList.contains('fahrenheit');
    let value = parseFloat(temp.innerText);

    if (isFahrenheit) {
      value = fahrenheitToCelsius(value);
      temp.innerText = value.toFixed(2) + ' °C';
    }
  });
});

// Add event listener to Fahrenheit button.
const fahrenheitButton = document.querySelector('#fahrenheitButton');
fahrenheitButton.addEventListener('click', () => {
  // Update the class of all temperature elements to "fahrenheit".
  temps.forEach(temp => {
    temp.classList.remove('celsius');
    temp.classList.add('fahrenheit');
  });

  // Loop through each temperature element and convert the temperature to Fahrenheit.
  temps.forEach(temp => {
    const isCelsius = temp.classList.contains('celsius');
    const isFahrenheit = temp.classList.contains('fahrenheit');
    let value = parseFloat(temp.innerText);

    if (isCelsius) {
      value = celsiusToFahrenheit(value);
      temp.innerText = value.toFixed(2) + ' °F';
    }
  });
});

In this example, we've added two buttons to the HTML with ids of "celsiusButton" and "fahrenheitButton". We've then added event listeners to these buttons that update the class of all temperature elements to "celsius" or "fahrenheit", respectively, and convert the temperature based on its new unit of measurement.

Here's an example on CodePen.