Aufgaben-Python/05_objekte_kombinieren/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kapitel 05: Komposition und Playlists</title>
  <link rel="stylesheet" href="../assets/style.css">
</head>
<body>

  <header>
    <div class="header-container">
      <nav class="nav-links">
        <a href="../index.html">🏠 Zur Kursübersicht</a>
        <span>&rsaquo;</span>
        <a href="../04_str_und_darstellung/index.html">Kapitel 04</a>
        <span>&rsaquo;</span>
        <span style="color: white; font-weight: 600;">Kapitel 05</span>
      </nav>
      <div class="header-badge">Kapitel 05</div>
      <h1>Komposition: Objekte kombinieren &amp; filtern 🎵</h1>
      <p>Baue einen eigenen Spotify-Playlist-Manager und lerne, wie Objekte andere Objekte suchen, berechnen und filtern.</p>
    </div>
  </header>

  <main class="container">

    <!-- Theorie Card -->
    <section class="card">
      <h2>1. Was ist Komposition?</h2>
      
      <p>
        In großen Anwendungen (wie Spotify, Netflix oder Videospielen) arbeiten viele Klassen zusammen. Wenn eine Klasse Instanzen einer anderen Klasse beinhaltet, nennt man das <strong>Komposition</strong> (oder *"hat-ein"-Beziehung*):
      </p>

      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>Eine <strong>Playlist</strong> <em>hat</em> viele <strong>Songs</strong>.</li>
        <li>Ein <strong>Kino</strong> <em>hat</em> viele <strong>Säle</strong> und <strong>Filme</strong>.</li>
      </ul>

      <div class="box box-analogie">
        <div class="box-title">🎧 Die Spotify-Analogie:</div>
        Ein <code>Song</code> speichert seinen Titel, den Künstler und die Länge in Sekunden. Die <code>Playlist</code> kümmert sich um die Gesamtübersicht: Wie viele Songs gibt es? Wie lange dauert die Playlist insgesamt? Gibt es Lieder von Taylor Swift?
      </div>
    </section>

    <!-- Filter & Formatierung Card -->
    <section class="card">
      <h2>2. Nützliche Python-Kniffe</h2>

      <h3>⏱️ Sekunden in "MM:SS" umrechnen</h3>
      <p>
        Mit Ganzzahldivision <code>//</code> und Modulo <code>%</code> rechnen wir Sekunden in Minuten um:
      </p>

      <div class="code-container">
        <div class="code-header">
          <span>Python</span>
        </div>
        <pre><span class="var">gesamt_sekunden</span> = <span class="num">215</span>
<span class="var">minuten</span> = <span class="var">gesamt_sekunden</span> // <span class="num">60</span>   <span class="cm"># 3 Minuten</span>
<span class="var">sekunden</span> = <span class="var">gesamt_sekunden</span> % <span class="num">60</span>   <span class="cm"># 35 Restsekunden</span>

<span class="cm"># :02d sorgt für zweistellige Zahlen mit führender Null (z.B. 03:05 statt 3:5):</span>
<span class="var">zeit_text</span> = <span class="str">f"{minuten:02d}:{sekunden:02d}"</span>  <span class="cm"># "03:35"</span></pre>
      </div>

      <h3>🔍 Groß- und Kleinschreibung beim Suchen ignorieren</h3>
      <p>
        Damit <code>"Taylor Swift"</code> auch gefunden wird, wenn jemand <code>"taylor swift"</code> eingibt, nutzen wir <code>.lower()</code>:
      </p>

      <div class="code-container">
        <pre><span class="kw">if</span> <span class="var">song</span>.<span class="attr">kuenstler</span>.<span class="fn">lower</span>() == <span class="var">gesuchter_kuenstler</span>.<span class="fn">lower</span>():
    <span class="var">treffer</span>.<span class="fn">append</span>(<span class="var">song</span>)</pre>
      </div>
    </section>

    <!-- Aufgaben Card -->
    <section class="card">
      <h2>3. Deine Aufgaben in <code>aufgabe.py</code></h2>

      <ul class="task-list">
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t5_1">
          <label for="t5_1" class="task-label">
            <strong>Klasse Song:</strong> <code>__init__(titel, kuenstler, dauer_sekunden)</code>, <code>formatierte_dauer()</code> ("MM:SS") und <code>__str__()</code>.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t5_2">
          <label for="t5_2" class="task-label">
            <strong>Klasse Playlist:</strong> <code>__init__(name)</code> mit <code>self.songs = []</code>.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t5_3">
          <label for="t5_3" class="task-label">
            <strong>Playlist Methoden:</strong> <code>song_hinzufuegen</code>, <code>anzahl_songs</code>, <code>gesamtdauer_sekunden</code>.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t5_4">
          <label for="t5_4" class="task-label">
            <strong>Playlist Suchen &amp; Finden:</strong> <code>finde_songs_von(kuenstler)</code> und <code>laengster_song()</code>.
          </label>
        </li>
      </ul>

      <h3>💡 Lösungshinweise (Aufklappen bei Bedarf)</h3>

      <details>
        <summary>Tipp zum längsten Song finden</summary>
        <div class="details-content">
          <div class="code-container">
            <pre><span class="kw">def</span> <span class="fn">laengster_song</span>(<span class="var">self</span>):
    <span class="kw">if</span> <span class="kw">not</span> <span class="var">self</span>.<span class="attr">songs</span>:
        <span class="kw">return</span> <span class="kw">None</span>
    
    <span class="var">bester_song</span> = <span class="var">self</span>.<span class="attr">songs</span>[<span class="num">0</span>]
    <span class="kw">for</span> <span class="var">s</span> <span class="kw">in</span> <span class="var">self</span>.<span class="attr">songs</span>:
        <span class="kw">if</span> <span class="var">s</span>.<span class="attr">dauer_sekunden</span> > <span class="var">bester_song</span>.<span class="attr">dauer_sekunden</span>:
            <span class="var">bester_song</span> = <span class="var">s</span>
    <span class="kw">return</span> <span class="var">bester_song</span></pre>
          </div>
        </div>
      </details>
    </section>

    <!-- Testen & Footer Navigation -->
    <section class="card">
      <h2>4. Lösung überprüfen</h2>
      <p>Führe im Terminal im Ordner <code>05_objekte_kombinieren</code> folgenden Befehl aus:</p>
      <div class="code-container">
        <div class="code-header">
          <span>Terminal</span>
        </div>
        <pre><code>python3 test_aufgabe.py</code></pre>
      </div>

      <div class="footer-nav">
        <a href="../04_str_und_darstellung/index.html" class="btn btn-secondary">&larr; Zurück zu Kapitel 04</a>
        <a href="../06_abschlussprojekt_tamagotchi/index.html" class="btn">Weiter zum Abschlussprojekt &rarr;</a>
      </div>
    </section>

  </main>

</body>
</html>