🍽️ Bootstrap-Lernseite: Cards mit Bewertung & Kommentaren

In dieser Übung lernst du, wie du Bootstrap-Cards erstellst und sie um Sternebewertungen, eine Kommentarfunktion und später sogar um Musiksteuerung erweiterst.

1️⃣ HTML-Grundstruktur

Wir beginnen mit einer einfachen HTML-Seite und binden Bootstrap per CDN ein.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Tägliche Essensgewohnheiten</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  ...
</body>
</html>

2️⃣ Header & Navbar

Der Header zeigt den Seitentitel. Danach folgt die Navigationsleiste, mit der zwischen Seiten gewechselt werden kann.

<header class="bg-primary text-white text-center py-5">
  <h1>Tägliche Essensgewohnheiten</h1>
</header>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="index.html">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="essensgewohnheiten.html">Tägliche Essensgewohnheiten</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="fitnessprogramm.html">Mein Fitness-Programm</a>
      </li>
    </ul>
  </div>
</nav>

3️⃣ Cards mit Bewertungssystem

Jede Karte zeigt ein Gericht mit Bild. Unter dem Bild ist ein einfaches Sternebewertungssystem mit JavaScript.

<div class="card mb-4">
  <div class="card-body">
    <h4 class="card-title">Tag 1 - 08. Oktober 2024</h4>
    <p><strong>Uhrzeit:</strong> 08:00 Uhr</p>
    <p><strong>Rezept:</strong> Haferflocken mit Banane und Nüssen</p>
    <img src="bilder/banane-muesli.jfif" alt="Frühstück Bild" class="img-fluid" width="200px" height="250px">

    <!-- Bewertung -->
    <div class="mt-3">
      <div class="stars" data-id="1">
        ★ ★ ★ ★ ★
      </div>
      <div class="rating-count" id="rating-count-1">Bewertung: 0 Sterne</div>
    </div>
  </div>
</div>

4️⃣ Kommentarfunktion hinzufügen

Unter jeder Card kann der Benutzer einen Kommentar schreiben, der direkt auf der Seite angezeigt wird.

<!-- Kommentare -->
<div class="comment-section" data-id="1">
  <h5>Kommentare</h5>
  <div class="comments-list" id="comments-1"></div>
  <div class="form-group mt-2">
    <textarea class="form-control" rows="2" placeholder="Kommentar schreiben..."></textarea>
    <button class="btn btn-primary btn-sm mt-2 submit-comment">Absenden</button>
  </div>
</div>

Beim Klick auf Absenden wird der Kommentar in der Liste darunter angezeigt.

5️⃣ JavaScript für Bewertung & Kommentare

Das folgende Skript aktiviert beide Funktionen: Sternebewertung und Kommentaranzeige.

<script>
// Sternebewertung
document.querySelectorAll('.stars').forEach(starContainer => {
  const id = starContainer.getAttribute('data-id');
  const stars = starContainer.textContent.trim().split('');
  starContainer.innerHTML = stars.map((s, i) => `<span data-star="${i+1}">${s}</span>`).join('');

  starContainer.addEventListener('click', e => {
    if (e.target.dataset.star) {
      const rating = e.target.dataset.star;
      document.querySelector(`#rating-count-${id}`).textContent = `Bewertung: ${rating} Sterne`;

      starContainer.querySelectorAll('span').forEach(star => {
        star.classList.toggle('active', star.dataset.star <= rating);
      });
    }
  });
});

// Kommentare
document.querySelectorAll('.comment-section').forEach(section => {
  const textarea = section.querySelector('textarea');
  const button = section.querySelector('.submit-comment');
  const list = section.querySelector('.comments-list');

  button.addEventListener('click', () => {
    const text = textarea.value.trim();
    if (text !== '') {
      const commentDiv = document.createElement('div');
      commentDiv.classList.add('comment', 'p-2', 'bg-light', 'rounded', 'mt-2');
      commentDiv.textContent = text;
      list.appendChild(commentDiv);
      textarea.value = '';
    }
  });
});
</script>

6️⃣ Bootstrap-JavaScript einbinden

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

7️⃣ Musik-Button hinzufügen (Bonus)

Zum Schluss kannst du im Hintergrund Musik abspielen. Füge diesen Code ganz unten im <body> (vor dem schließenden </body>) ein:

<!-- 🎵 Musiksteuerung -->
<audio id="bg-music" loop>
  <source src="audio/1.mp3" type="audio/mpeg">
</audio>

<div class="text-center my-4">
  <button id="music-btn" class="btn btn-outline-primary">🎵 Musik starten</button>
</div>

<script>
const music = document.getElementById('bg-music');
const btn = document.getElementById('music-btn');
let playing = false;

btn.addEventListener('click', () => {
  if (!playing) {
    music.play();
    btn.textContent = "⏸️ Musik pausieren";
    playing = true;
  } else {
    music.pause();
    btn.textContent = "🎵 Musik starten";
    playing = false;
  }
});
</script>

✅ Aufgabe für dich:

Füge die Musiksteuerung ganz unten hinzu. Teste dann, ob du die Musik starten und pausieren kannst.

🚀 Geschafft!

Jetzt weißt du, wie man interaktive Bootstrap-Cards mit Bewertung, Kommentaren und Musik erstellt.