Deep Thought

Exercise-JS-CSS-Selektoren-Sportfest

5 min read

Übung: HTL Sportfest – Medaillenspiegel 🏆

Ziel: Du wendest CSS-Selektoren an, findest damit Elemente per JavaScript und veränderst Inhalt und Aussehen.

Unterlagen:

  • 📄 01 – CSS-Spezifität Cheat Sheet
  • 📄 02 – Selektoren in JavaScript

Setup

Lege einen Ordner sportfest/ mit drei Dateien an: index.html, style.css, script.js. Öffne index.html im Browser und die Entwicklerkonsole (F12 bzw. ⌥⌘I).

index.html (nicht verändern!)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>HTL Sportfest 2026</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header id="top">
    <h1>HTL Sportfest 2026</h1>
    <p class="subtitle">Medaillenspiegel der Klassen</p>
  </header>
 
  <nav>
    <ul>
      <li><a href="#tabelle" class="nav-link">Tabelle</a></li>
      <li><a href="#news" class="nav-link">News</a></li>
      <li><a href="#feedback" class="nav-link">Feedback</a></li>
    </ul>
  </nav>
 
  <main>
    <section id="tabelle">
      <h2>Medaillenspiegel</h2>
      <table id="medals">
        <thead>
          <tr><th>Klasse</th><th>🥇</th><th>🥈</th><th>🥉</th></tr>
        </thead>
        <tbody>
          <tr class="team" data-team="1AHIT" data-gold="2" data-silver="1" data-bronze="4">
            <td class="team-name">1AHIT</td><td class="gold">2</td><td class="silver">1</td><td class="bronze">4</td>
          </tr>
          <tr class="team" data-team="2BHIT" data-gold="3" data-silver="0" data-bronze="1">
            <td class="team-name">2BHIT</td><td class="gold">3</td><td class="silver">0</td><td class="bronze">1</td>
          </tr>
          <tr class="team" data-team="3AHIT" data-gold="3" data-silver="2" data-bronze="0">
            <td class="team-name">3AHIT</td><td class="gold">3</td><td class="silver">2</td><td class="bronze">0</td>
          </tr>
          <tr class="team" data-team="4CHIT" data-gold="0" data-silver="7" data-bronze="5">
            <td class="team-name">4CHIT</td><td class="gold">0</td><td class="silver">7</td><td class="bronze">5</td>
          </tr>
          <tr class="team" data-team="5AHIT" data-gold="1" data-silver="3" data-bronze="3">
            <td class="team-name">5AHIT</td><td class="gold">1</td><td class="silver">3</td><td class="bronze">3</td>
          </tr>
        </tbody>
      </table>
    </section>
 
    <section id="news">
      <h2>News</h2>
      <article class="news-item">
        <h3>Staffellauf verschoben</h3>
        <p>Der Staffellauf findet wegen Regen erst um 14:00 statt.</p>
      </article>
      <article class="news-item new">
        <h3>Neuer Schulrekord</h3>
        <p>Im Weitsprung wurde ein neuer Schulrekord aufgestellt.</p>
      </article>
      <article class="news-item">
        <h3>Siegerehrung</h3>
        <p>Die Siegerehrung beginnt um 16:30 in der Aula.</p>
      </article>
    </section>
 
    <section id="feedback">
      <h2>Feedback</h2>
      <p id="feedback-output" class="hint">Noch kein Feedback.</p>
    </section>
  </main>
 
  <footer>
    <p>Stand: <span id="updated">unbekannt</span></p>
    <a href="https://www.htlkrems.ac.at" class="external">HTL Krems</a>
  </footer>
</body>
</html>

style.css

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; max-width: 800px; margin: 0 auto; padding: 1rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: .4rem .8rem; text-align: center; }
.team-name { text-align: left; font-weight: bold; }
nav ul { display: flex; gap: 1rem; list-style: none; padding: 0; }
 
/* Hilfsklassen für JavaScript */
.leader    { background: #ffe58a; }
.highlight { outline: 3px solid #e63946; }
.hidden    { display: none; }
.dimmed    { opacity: .4; }
.active    { color: #e63946; font-weight: bold; }
.new       { border-left: 4px solid #2a9d8f; padding-left: .5rem; }
 
/* ===== Teil A – Spezifitäts-Rätsel ===== */
p                      { color: black; }
#news p                { color: blue; }
.news-item p           { color: green; }
article.new p          { color: purple; }
main section article p { color: orange; }

script.js (Startgerüst)

// ===== Teil B – Elemente finden =====
 
 
// ===== Teil C – Inhalte ändern =====
 
// Gegeben für C4 – simuliert eine Benutzereingabe:
const kommentar = 'Super Fest! <img src="x" onerror="alert(\'Gehackt!\')">';
 
 
// ===== Teil D – Attribute & data-Attribute =====
 
 
// ===== Teil E – Klassen & Styles =====

Teil A – Spezifität (auf Papier) 📄 → Dokument 01

A1. Ergänze den Medaillenspiegel:

Selektor🥇🥈🥉
p
#news p
.news-item p
article.new p
main section article p
*
header + nav
nav ul > li a.nav-link

A2. Ordne die ersten fünf Selektoren vom stärksten zum schwächsten.

A3. Welche Farbe haben die drei News-Absätze? Erst vorhersagen, dann im Browser prüfen.

A4. Kommentiere die Zeile #news p { ... } aus. Sage erneut die Farben aller drei News-Absätze voraus und prüfe. → Erkläre in einem Satz, warum main section article p verliert, obwohl der Selektor am längsten ist.

Teil B – Elemente finden 🔍 → Dokument 02, Abschnitt 1

Gib jeweils das Ergebnis mit console.log() aus.

B1. Finde die Überschrift h1 und gib ihren Text aus.

B2. Finde alle Tabellenzeilen mit Teams und gib die Anzahl aus.

B3. Finde den News-Artikel, der beide Klassen news-item und new hat.

B4. Finde alle Links der Navigation und gib jeden href aus.

B5. Finde den Link im Footer – verwende dabei einen Kombinator.

B6. Hol dir die erste Team-Zeile und suche innerhalb dieser Zeile die Zelle mit der Klasse gold.

Teil C – Inhalte ändern ✏️ → Dokument 02, Abschnitt 2

C1. Ändere den Untertitel auf Medaillenspiegel der Klassen – LIVE.

C2. Schreib die aktuelle Uhrzeit in #updated. Tipp: new Date().toLocaleTimeString('de-AT')

C3. Ändere die Überschrift der ersten News auf Staffellauf <em>verschoben</em>! – das Wort „verschoben“ soll kursiv erscheinen. Welche Eigenschaft brauchst du?

C4. 🔒 Gib die Variable kommentar in #feedback-output aus:

  1. zuerst mit innerHTML → Was passiert?
  2. dann mit textContent → Was passiert jetzt?

Beantworte als Kommentar im Code: Welche Variante ist für Benutzereingaben richtig und warum?

Teil D – Attribute & data-Attribute 🏷️ → Dokument 02, Abschnitte 3 & 4

D1. Der Footer-Link soll in einem neuen Tab öffnen: Setze target="_blank" und rel="noopener".

D2. Berechne für jede Team-Zeile die Gesamtzahl der Medaillen aus den data-Attributen und setze sie als title-Attribut der Zeile, z. B. Gesamt: 7 Medaillen. (Fahre mit der Maus über eine Zeile, um es zu prüfen.)

D3. Gib in der Konsole aus, welche Klasse die meisten Medaillen insgesamt hat.

Teil E – Klassen & Styles 🎨 → Dokument 02, Abschnitte 5–7

E1. 🏆 Ermittle den Sieger des Medaillenspiegels und gib seiner Zeile die Klasse leader. Vergleiche genau wie bei der Spezifität: zuerst Gold, bei Gleichstand Silber, dann Bronze. → Ist der Sieger dieselbe Klasse wie in D3? Erkläre den Unterschied in einem Kommentar.

E2. Gib dem Navigationslink „Tabelle“ die Klasse active.

E3. Alle News-Artikel ohne die Klasse new sollen die Klasse dimmed bekommen. Tipp: classList.contains()

E4. Alle Teams mit 0 Gold bekommen die Klasse highlight.

E5. style vs. classList:

  1. Setze den Hintergrund des Footers mit style auf #f1f1f1.
  2. Lege in style.css eine passende Klasse an und löse dieselbe Aufgabe mit classList. Entferne danach die style-Zeile.
  3. Begründe in 2 Sätzen (Kommentar), warum die zweite Lösung besser ist.

Bonus ⭐

X1. Rufe classList.toggle('hidden') auf den Feedback-Bereich zweimal hintereinander auf. Was passiert – und warum?

X2. Speichere den Rang aus E1 als data-Attribut: Die Sieger-Zeile bekommt data-rank="1". Prüfe in den Entwicklertools, ob das Attribut im HTML erscheint.

Abgabe

  • script.js mit allen Lösungen, jeweils mit Kommentar // B1, // B2, …
  • Antworten zu Teil A (Foto oder als Kommentar am Anfang von script.js)
  • Antworten auf die Fragen aus C4, E1 und E5 als Kommentare im Code

Graph View

Backlinks