WetterApp Programmier-Anleitung

WetterApp Programmier-Anleitung

Schritt für Schritt zur eigenen WetterApp mit HTML, CSS, JavaScript und API-Nutzung

Schritt 1: HTML-Grundgerüst erstellen

Erstelle die Grundstruktur deiner App in einer HTML-Datei. Verwende Bootstrap für das Layout und die Formatierung.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WetterApp</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center">WetterApp</h1>
    <div class="input-group my-3">
      <input type="text" class="form-control" id="city-input" placeholder="Stadt eingeben">
      <div class="input-group-append">
        <button class="btn btn-primary" onclick="fetchWeather()">Suchen</button>
      </div>
    </div>
    <div id="weather-output" class="text-center"></div>
  </div>
  <script src="main.js"></script>
</body>
</html>

Schritt 2: API-Anfrage mit JavaScript erstellen

In der Datei main.js richten wir die Funktion fetchWeather() ein, um Wetterdaten von einer API zu laden.

function fetchWeather() {
  const city = document.getElementById('city-input').value;
  const apiKey = 'Ihr_API_Schlüssel'; // API-Schlüssel einfügen
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=de`;

  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      displayWeather(data);
    })
    .catch(error => console.error('Fehler:', error));
}

Schritt 3: Wetterdaten anzeigen

Die Funktion displayWeather() zeigt die Wetterinformationen an, die von der API abgerufen wurden.

function displayWeather(data) {
  const weatherOutput = document.getElementById('weather-output');
  const temp = data.main.temp;
  const description = data.weather[0].description;
  const icon = data.weather[0].icon;

  weatherOutput.innerHTML = `
    <h2>${data.name}</h2>
    <p>${temp}°C</p>
    <p>${description}</p>
    <img src="http://openweathermap.org/img/wn/${icon}@2x.png" alt="${description}">`;
}

Schritt 4: Dynamischer Hintergrund basierend auf Wetter

Verwenden Sie eine setBackground-Funktion, um je nach Wettertyp einen passenden Hintergrund anzuzeigen.

function setBackground(weatherDescription) {
  const body = document.body;
  if (weatherDescription.includes('regen')) {
    body.style.backgroundImage = "url('images/rain.jpg')";
  } else if (weatherDescription.includes('schnee')) {
    body.style.backgroundImage = "url('images/snow.jpg')";
  } else if (weatherDescription.includes('sonne')) {
    body.style.backgroundImage = "url('images/sun.jpg')";
  } else {
    body.style.backgroundImage = "url('images/cloud.jpg')";
  }
  body.style.backgroundSize = "cover";
}

Schritt 5: Speicherung mehrerer Städte mit Array

Mit einem Array können Sie die Wetterdaten mehrerer Städte speichern und darstellen.

let citiesWeather = [];

function fetchWeather() {
  // (vorheriger fetchWeather-Code)
  .then(data => {
    citiesWeather.push({ name: data.name, temp: data.main.temp, weather: data.weather[0].description });
    updateCityList();
  });
}

function updateCityList() {
  const cityList = document.getElementById('weather-output');
  cityList.innerHTML = '';
  citiesWeather.forEach(city => {
    cityList.innerHTML += `

${city.name}: ${city.temp}°C - ${city.weather}

`;
  });
}