# Playground — Beispiele
> Praxisnahe Durchläufe mit dem Playground: eine Komponente bauen, einen CSS-Effekt testen, ein JS-Snippet ausprobieren, Bootstrap prototypen, exportieren.
Source: https://www.jpkc.com/db/tools/playground/examples/
Zurück zur Übersicht: [Playground](https://www.jpkc.com/db/tools/playground/) · Tool live öffnen: [www.jpkc.com/tools/playground/](https://www.jpkc.com/tools/playground/)
Das [Manual](https://www.jpkc.com/db/tools/playground/manual/) erklärt jede Funktion im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe**: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch — Button- und Label-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung.
## Beispiel 1: Eine kleine Komponente bauen
Du willst eine in sich geschlossene UI-Komponente — etwa eine Profilkarte — schnell zusammenstecken.
1. Öffne den [Playground](https://www.jpkc.com/tools/playground/) und leere mit **Clear** die drei Panels (oder bau direkt auf dem Demo-Beispiel auf).
2. Ins **HTML**-Panel kommt nur der Body-Inhalt — kein ``/``-Gerüst:
```html
Ada Lovelace
Erste Programmiererin
```
3. Ins **CSS**-Panel die Stile:
```css
.card {
display: flex;
gap: 1rem;
align-items: center;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 12px;
font-family: system-ui, sans-serif;
}
.card img { border-radius: 50%; }
.card h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.card p { margin: 0; color: #666; }
```
4. Weil **Live** aktiv ist, erscheint die Karte sofort rechts in der Vorschau — jede Änderung schlägt nach kurzer Verzögerung durch. Passt das Ergebnis, kopierst du HTML und CSS per **Copy** in dein Projekt.
## Beispiel 2: Einen CSS-Effekt testen
Du willst einen Hover- oder Transition-Effekt isoliert ausprobieren, ohne ihn in einer großen Codebasis zu suchen.
1. Lass das JS-Panel leer und blende es bei Bedarf über den **JS**-Panel-Schalter aus — so hast du mehr Platz für CSS und Vorschau.
2. Bau im **HTML**-Panel ein minimales Testobjekt, z. B. ``.
3. Im **CSS**-Panel experimentierst du mit dem Effekt:
```css
.cta {
padding: 0.8rem 1.6rem;
border: none;
border-radius: 8px;
background: #0d6efd;
color: #fff;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}
```
4. Fahr in der **Rendered Preview** mit der Maus über den Button — der Hover-Effekt läuft live. Über den **Zoom** im Vorschau-Header vergrößerst du das Detail, um die Schatten-Feinheiten zu beurteilen. So drehst du an Werten (Dauer, Versatz, Farbe), bis es sitzt.
## Beispiel 3: Ein JS-Snippet ausprobieren
Du willst ein Stück JavaScript verproben, das das DOM verändert.
1. Im **HTML**-Panel ein Ziel und ein Auslöser:
```html
```
2. Im **JavaScript**-Panel die Logik. Funktionen auf oberster Ebene sind global, deshalb funktioniert der `onclick`-Handler aus dem HTML direkt:
```js
let count = 0;
function zaehle() {
count += 1;
document.getElementById( 'n' ).textContent = count;
}
```
3. Klick in der Vorschau auf den Button — der Zähler steigt. Dein Code läuft am Ende des ``, das DOM ist also schon da; ein `DOMContentLoaded` brauchst du nicht.
4. Baust du absichtlich einen Fehler ein, bleibt die Vorschau stehen statt abzustürzen: Öffne die **Browser-Konsole**, dort steht die Meldung mit dem Präfix `[Playground JS]`. So debuggst du Snippets, ohne ein Projekt anzulegen.
## Beispiel 4: Eine Bootstrap-Komponente prototypen
Du willst eine Bootstrap-Komponente (z. B. ein Modal) ausprobieren, ohne Bootstrap selbst einzubinden.
1. Öffne das **Assets**-Dropdown und aktiviere **Bootstrap CSS** *und* **Bootstrap JS** — interaktive Komponenten wie Modals brauchen beides. Der Zähler-Badge am Button zeigt jetzt 2.
2. Optional schaltest du **Bootstrap Icons** dazu und probierst über **Dark Mode** (nur wählbar, wenn Bootstrap CSS an ist) das dunkle Theme.
3. Ins **HTML**-Panel kommt das Bootstrap-Markup — Trigger-Button plus Modal-Struktur mit `data-bs-toggle="modal"`. Weil Bootstrap JS im `` der Vorschau eingebunden ist, funktioniert das Modal sofort beim Klick.
4. So prüfst du in Sekunden, ob eine Komponente das tut, was du brauchst — bevor du Bootstrap in dein echtes Projekt aufnimmst. Mehr zu den verfügbaren Bibliotheken steht im [Manual unter „Optionale Assets"](https://www.jpkc.com/db/tools/playground/manual/#optionale-assets).
## Beispiel 5: SCSS verproben
Du willst SCSS-Features (Verschachtelung, Variablen) testen, ohne lokal einen Sass-Compiler einzurichten.
1. Klick im **CSS**-Panel auf den **SCSS**-Schalter im Header — das Label wechselt auf `SCSS`. Beim ersten Lauf wird der Compiler kurz nachgeladen („Loading SCSS compiler…").
2. Schreib SCSS, z. B. mit Variable und Verschachtelung:
```scss
$accent: #d6336c;
.note {
padding: 1rem;
border-left: 4px solid $accent;
h3 { color: $accent; margin-top: 0; }
}
```
3. Der Playground kompiliert das SCSS vor jeder Vorschau clientseitig zu CSS — das Ergebnis siehst du sofort. Schaltest du im Vorschau-Header auf **HTML Source**, erkennst du im `