Projektarbeit

CSS Logo

Inhaltsverzeichnis

Aufgabenstellung

Projekt: Einfache Wetter-App – Abgabetermin mit Kurzvorstellung – Do.: 09.11.2023

In diesem Projekt erstellen wir eine einfache Wetter-App, die die aktuelle Wetterinformation anhand der eingegebenen Stadt anzeigt. Wir verwende dafür die OpenWeatherMap API. Die Gesamtzeit für dieses Projekt beträgt 5 Projekt-Stunden.

Schritte:

  1. Projektstruktur erstellen (15 Minuten)
    • Neuen Ordner für das Projekt erstellen
    • Innerhalb des Ordners drei Dateien erstellen: index.html, styles.css, script.js.
  2. HTML-Struktur (15 Minuten)
    • Öffne die index.html und füge die grundlegende HTML-Struktur hinzu.
    • Füge ein Eingabefeld für die Stadteingabe und einen Button für die Wetterabfrage hinzu.
  3. CSS-Styling (30 Minuten)
    • Öffne die styles.css und füge einige grundlegende Stile hinzu, um die App ansprechend zu gestalten.
  4. JavaScript-Code (1 Stunde)
    • Öffne die Datei script.js.
    • Erstelle eine Funktion, die die Wetterinformationen aus der OpenWeatherMap API abruft, wenn der Benutzer auf den Button klickt.
    • Verwende die Fetch-API, um eine HTTP-Anfrage an die OpenWeatherMap API zu senden.
    • Zeige die Wetterinformationen im HTML an.
  5. Fehlerbehandlung (30 Minuten)
    • Füge eine Fehlerbehandlung hinzu, um zu überprüfen, ob die Stadteingabe gültig ist und ob die API-Anfrage erfolgreich war.
  6. Testen und Debuggen (30 Minuten)
    • Teste die App in verschiedenen Browsern.
    • Behebe eventuell auftretende Fehler und optimiere den Code.
  7. Erweiterungen (optional)
    • Füge weitere Features hinzu, wie z.B. die Anzeige des 5-Tage-Wetterberichts.
    • Verbessere das Design, indem ein CSS-Framework wie Bootstrap verwendet wird.

Ressourcen:

OpenWeatherMap API Key:

0e4194c846936b540bce21b6b2a47fb9
  • Am Ende dieses Projekts sollte man eine funktionierende Wetter-App haben, die die aktuellen Wetterinformationen für eine bestimmte Stadt anzeigt.
  • Die Verwendung von ChatGPT ist erlaubt, es müssen jedoch die Programmteile über Kommentare gekennzeichnet werden, die vollständig, oder zum Teil mit ChatGPT erstellt wurden.
  • Zudem ist zu notieren, welche geschätzte Zeitersparnis man durch die Verwendung von ChatGPT hatte.