WetterApp Anleitung

Schritt 1: Grundstruktur erstellen

Erstelle eine neue HTML-Datei mit dem Namen index.html und füge die folgende Grundstruktur ein:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WetterApp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Speichere die Datei, und überprüfe, ob sie in einem Browser geöffnet werden kann.

Schritt 2: Hauptlayout hinzufügen

Im <body>-Tag erstellst du den Hauptbereich der App. Füge dazu den folgenden Code ein:

<div class="app-main">
    <div class="searchInputBox">
        <input type="text" placeholder="Stadt" autocomplete="off" id="input-box" class="input-box">
    </div>
    <div class="weather-body">
        <div class="location-details">
            <div class="city" id="city">Die Wetter-App</div>
            <div class="date" id="date">-- immer Topaktuell!</div>
        </div>
        <div class="weather-status">
            <div class="temp" id="temp"></div>
            <div class="min-max" id="min-max"></div>
            <div class="weather" id="weather"></div>
        </div>
    </div>
</div>

Dieser Bereich enthält das Suchfeld und die Wetterinformationen. Speichere und aktualisiere die Seite im Browser.

Schritt 3: CSS-Datei erstellen und verlinken

Erstelle eine neue Datei mit dem Namen style.css und füge ein einfaches Styling hinzu:

body {
    font-family: Arial, sans-serif;
}

.app-main {
    max-width: 500px;
    margin: auto;
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.input-box {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.weather-body .location-details, .weather-body .weather-status {
    margin-bottom: 15px;
}

Speichere die Datei und stelle sicher, dass sie mit <link rel="stylesheet" href="style.css"> im HTML-<head> eingebunden ist.

Schritt 4: JavaScript-Datei verlinken

Füge einen <script>-Tag am Ende des <body>-Bereichs hinzu, um die JavaScript-Datei main.js zu verlinken:

<script src="main.js"></script>

Die Datei main.js wird später für interaktive Funktionen genutzt.

Weiterführende Aufgabe (optional)

Passt euer CSS an, um die Seite auch auf Mobilgeräten gut darzustellen. Nutzt dazu die CSS-Medienabfragen:

@media (max-width: 600px) {
    .app-main {
        padding: 10px;
        border-radius: 5px;
    }

    .input-box {
        padding: 8px;
    }
}

Experimentiert mit Bootstrap-Klassen, um die Layout-Gestaltung weiter zu vereinfachen.

WetterApp - Schritt-für-Schritt-Anleitung