<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="path/to/your/styles.css">

  <title>Weather App</title>
  <!-- Add some basic styling -->
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f7f7f7;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .container {
      max-width: 500px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      font-size: 1.2em;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      font-size: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .form-group button {
      padding: 10px 15px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 1.2em;
      cursor: pointer;
    }
    .form-group button:hover {
      background-color: #45a049;
    }
    #result {
      margin-top: 20px;
      text-align: center;
    }
    #temperature {
      font-size: 2em;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Weather Information</h1>

  <div class="container">
    <div class="form-group">
      <label for="city">Enter City:</label>
      <input type="text" id="city" placeholder="Enter city name">
    </div>
    <div class="form-group">
      <button id="getWeatherBtn">Get Weather</button>
    </div>

    <div id="result">
      <div id="temperature"></div>
      <div id="error" style="color: red;"></div>
    </div>
  </div>

  <script>
    document.getElementById('getWeatherBtn').addEventListener('click', async function() {
      const city = document.getElementById('city').value.trim();  // Get the value from the input field
      if (!city) {
        alert('Please enter a city name!');
        return;
      }

      try {
        const apiKey = 'c5ca0c53c3d05a612b8e2eab4931814e';  // Replace with your actual API key

        // Construct the API URL dynamically with the city name and API key
        const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
        
        if (response.ok) {
          const data = await response.json();
          const temperature = data.main.temp;
  
          // Format the temperature to 2 decimal places
          const formattedTemperature = temperature.toFixed(0);
          
          // Display formatted temperature
          document.getElementById('temperature').textContent = `Temperature: ${formattedTemperature}°C`;
          document.getElementById('error').textContent = ''; // Clear previous errors
        } else {
          // Handle case if city is not found or API fails
          const errorData = await response.json();
          document.getElementById('temperature').textContent = '';
          document.getElementById('error').textContent = errorData.message || 'Error fetching data.';
        }
      } catch (error) {
        // Handle any network or other errors
        document.getElementById('temperature').textContent = '';
        document.getElementById('error').textContent = 'Error connecting to server. Please try again.';
      }
    });
  </script>

</body>
</html>