TASK 4: Fetching server state using JavaScript (fetch)

PHOTO

Tue Apr 22 2025 20:01:17 GMT+0000 (Coordinated Universal Time)

https://chatgpt.com/share/6806edc3-be74-800e-b64e-d107384cf470

API:KEY-->https://api.openweathermap.org/data/2.5/weather?q=Hyderabad&appid=bb5d6d56c0d5dbe246c95ed802b759fe

25b5d51f0221767ca7aad908df540fdd

1. Use fetch function to access remote data using the given api and display the data in the form of a 
table. 
2. Use fetch function to read the weather details from openweathermap.org and display the details 
like city, min-temp, max-temp, humidity on the webpage for a given city. 
3. From the same website read the weather forecast details for a given city and display the details 
like date – temperature in a table. 
4. Plot a bar chart for the above implementation using date and temperature along X and Y axis 
respectively.  Use ChartJS library. 


API:KEY-->https://api.openweathermap.org/data/2.5/weather?q=Hyderabad&appid=bb5d6d56c0d5dbe246c95ed802b759fe

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Weather Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      padding: 8px;
    }
    #weather-table, #forecast-table {
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <h2>Weather Information</h2>
  <input type="text" id="city" placeholder="Enter City Name">
  <button onclick="getWeather()">Get Weather</button>

  <div id="weather-table"></div>
  <div id="forecast-table"></div>
  <canvas id="forecastChart" width="600" height="300"></canvas>

  <script src="script.js"></script>
</body>
</html>





//script.js
const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key

async function getWeather() {
  const city = document.getElementById('city').value;
  if (!city) return alert('Please enter a city');

  await getCurrentWeather(city);
  await getWeatherForecast(city);
}

async function getCurrentWeather(city) {
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
  );
  const data = await response.json();

  const html = `
    <table>
      <tr><th>City</th><th>Min Temp (°C)</th><th>Max Temp (°C)</th><th>Humidity (%)</th></tr>
      <tr>
        <td>${data.name}</td>
        <td>${data.main.temp_min}</td>
        <td>${data.main.temp_max}</td>
        <td>${data.main.humidity}</td>
      </tr>
    </table>
  `;
  document.getElementById('weather-table').innerHTML = html;
}

async function getWeatherForecast(city) {
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=metric`
  );
  const data = await response.json();

  // Extract date and temperature every 8 entries (~24 hours)
  const forecasts = data.list.filter((_, index) => index % 8 === 0);

  const tableRows = forecasts.map(forecast => `
    <tr>
      <td>${forecast.dt_txt.split(' ')[0]}</td>
      <td>${forecast.main.temp}</td>
    </tr>
  `).join('');

  const table = `
    <h3>5-Day Forecast</h3>
    <table>
      <tr><th>Date</th><th>Temperature (°C)</th></tr>
      ${tableRows}
    </table>
  `;
  document.getElementById('forecast-table').innerHTML = table;

  // Plot chart
  const labels = forecasts.map(f => f.dt_txt.split(' ')[0]);
  const temperatures = forecasts.map(f => f.main.temp);
  drawChart(labels, temperatures);
}

function drawChart(labels, data) {
  const ctx = document.getElementById('forecastChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Temperature (°C)',
        data: data,
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'blue',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: false
        }
      }
    }
  });
}

COPY

https://chatgpt.com/share/6806edc3-be74-800e-b64e-d107384cf470