html.html

<!DOCTYPE html>
<html>

<head>
  <title>Temperature Converter</title>
  <link rel="stylesheet" href="css.css">
</head>

<body>
  <div class="container">
    <h1>Temperature Converter</h1>
    <div class="input-group">
      <label for="celsius">Celsius:</label>
      <input type="number" id="celsius" placeholder="Enter temperature in Celsius" />
    </div>
    <div class="input-group">
      <label for="fahrenheit">Fahrenheit:</label>
      <input type="number" id="fahrenheit" placeholder="Enter temperature in Fahrenheit" />
    </div>
    <button class="btn" onclick="convertToCelsius()">Convert to Celsius</button>
    <button class="btn" onclick="convertToFahrenheit()">Convert to Fahrenheit</button>
    <div class="result" id="result"></div>
  </div>

  <script>
    function convertToCelsius() {
      var fahrenheitInput = document.getElementById("fahrenheit");
      var celsiusOutput = document.getElementById("celsius");
      var fahrenheit = parseFloat(fahrenheitInput.value);
      var celsius = (fahrenheit - 32) * 5 / 9;
      celsiusOutput.value = celsius.toFixed(2);
      document.getElementById("result").innerHTML = "";
    }

    function convertToFahrenheit() {
      var celsiusInput = document.getElementById("celsius");
      var fahrenheitOutput = document.getElementById("fahrenheit");
      var celsius = parseFloat(celsiusInput.value);
      var fahrenheit = celsius * 9 / 5 + 32;
      fahrenheitOutput.value = fahrenheit.toFixed(2);
      document.getElementById("result").innerHTML = "";
    }
  </script>
</body>

</html>