07_js-debug/uebungen/u03_dry/index.html

@@ -1,12 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Exercise: Don't Repeat Yourself (DRY)</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
+    <title>Übung 3: DRY</title>
   </head>
   <body>
-    <h1>Exercise: Don't Repeat Yourself (DRY)</h1>
+    <main>
+      <div class="container py-5">
+        <h1>Exercise: Don't Repeat Yourself (DRY)</h1>
+        <hr />
+        <div class="alert alert-primary">
+          <h2>Übung 3: DRY</h2>
+          <p>
+            In dieser Übung überarbeitest du einen Teil des Codes nach dem DRY-Prinzip (Don't Repeat Yourself). Du
+            arbeitest mit einem Skript, das Wetterberichte für mehrere Städte protokolliert, einschließlich zusätzlicher
+            Wetterdaten wie der Windgeschwindigkeit. Deine Aufgabe ist es, Code-Wiederholungen zu vermeiden, indem du
+            Arrays, Schleifen und Funktionen verwendest.
+          </p>
+          <p>
+            Erstelle eine zusätzliche <code>formatWeatherReport(report)</code> Funktion, die ein Wetterberichtsobjekt
+            als Parameter annimmt. Sie sollte einen formatierten Wetterberichtstring zurückgeben.
+          </p>
+        </div>
+      </div>
+    </main>
 
     <script>
       'use strict';
@@ -19,7 +38,7 @@
         const description1 = 'Sunny';
         const windSpeed1 = 10;
         console.log(
-          `Weather in ${city1}: ${temperature1}°F, ${humidity1}% humidity, ${description1}, Wind Speed: ${windSpeed1} mph`
+          `Weather in ${city1}: ${temperature1}°F, ${humidity1}% humidity, ${description1}, Wind Speed: ${windSpeed1} mph`,
         );
 
         // Weather Report 2
@@ -29,7 +48,7 @@
         const description2 = 'Partly Cloudy';
         const windSpeed2 = 7;
         console.log(
-          `Weather in ${city2}: ${temperature2}°F, ${humidity2}% humidity, ${description2}, Wind Speed: ${windSpeed2} mph`
+          `Weather in ${city2}: ${temperature2}°F, ${humidity2}% humidity, ${description2}, Wind Speed: ${windSpeed2} mph`,
         );
 
         // Weather Report 3
@@ -39,7 +58,7 @@
         const description3 = 'Rainy';
         const windSpeed3 = 12;
         console.log(
-          `Weather in ${city3}: ${temperature3}°F, ${humidity3}% humidity, ${description3}, Wind Speed: ${windSpeed3} mph`
+          `Weather in ${city3}: ${temperature3}°F, ${humidity3}% humidity, ${description3}, Wind Speed: ${windSpeed3} mph`,
         );
       }