Svelte Playground - Plac ćwiczeń

Zanim zbudujemy pełny projekt, poznaj Svelte Playground (dawniej nazywany REPL) - interaktywne środowisko do nauki i eksperymentów.

Co to jest Playground?

Playground to środowisko w przeglądarce, gdzie możesz pisać kod Svelte i natychmiast widzieć rezultat - bez instalowania czegokolwiek. Dawniej nazywał się REPL (Read-Eval-Print Loop) i stary adres nadal do niego prowadzi. Znajdziesz go pod adresem:

svelte.dev/playground

Interfejs Playground

+------------------+------------------+
|                  |                  |
|   EDYTOR KODU    |    PODGLĄD      |
|                  |                  |
|  App.svelte      |   [Twoja apka]   |
|                  |                  |
+------------------+------------------+
|              KONSOLA               |
+------------------------------------+

Funkcje Playground:

• Edytor - pisz kod Svelte, dodawaj kolejne pliki
• Podgląd - natychmiastowy rezultat
• Konsola - logi i błędy
• Zapisywanie - zachowaj projekt i udostępnij link

Ćwiczenie: Twój pierwszy Playground

Wejdź na svelte.dev/playground i wklej ten kod:

<script>
  let vikingName = $state('Twoje imię');
  let gold = $state(0);

  function raid() {
    gold += Math.floor(Math.random() * 100) + 1;
  }
</script>

<main>
  <h1>Saga o {vikingName}</h1>

  <input bind:value={vikingName} placeholder="Wpisz imię wikinga">

  <p>Złoto w skarbcu: {gold} monet</p>

  <button onclick={raid}>
    Wyprawa łupieżcza!
  </button>

  {#if gold > 500}
    <p class="rich">Jesteś bogaty jak jarl!</p>
  {:else if gold > 100}
    <p>Masz przyzwoity skarb.</p>
  {:else}
    <p>Czas na więcej wypraw!</p>
  {/if}
</main>

<style>
  main {
    font-family: Georgia, serif;
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem;
    background: #1a1a2e;
    color: #eee;
    border-radius: 8px;
  }

  h1 {
    color: #d4af37;
  }

  input {
    width: 100%;
    padding: 0.5rem;
    margin: 1rem 0;
    border: 2px solid #d4af37;
    background: #16213e;
    color: white;
  }

  button {
    background: #8b0000;
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
  }

  button:hover {
    background: #a00000;
  }

  .rich {
    color: #ffd700;
    font-weight: bold;
    animation: glow 1s infinite alternate;
  }

  @keyframes glow {
    from { text-shadow: 0 0 5px #ffd700; }
    to { text-shadow: 0 0 20px #ffd700; }
  }
</style>

bind:value łączy pole tekstowe ze stanem vikingName w obie strony - więcej o tym w Bifröst (moduł 5).

Eksperymentuj! Zmień wartości, dodaj nowe funkcje. Playground to Twój plac ćwiczeń bez ryzyka.

Zapisywanie projektów

Zaloguj się w Playground (kontem GitHub), aby:

• Zapisywać projekty
• Generować linki do udostępniania
• Wracać do swoich zapisanych projektów

SKÅL! Teraz masz wszystko, by rozpocząć prawdziwą przygodę z Svelte!