Le Playground Svelte - Terrain d'entraînement

Avant de construire un projet complet, découvrons le Playground Svelte (autrefois appelé REPL) : un environnement interactif pour apprendre et expérimenter.

Qu'est-ce que le Playground ?

Le Playground est un environnement dans ton navigateur où tu peux écrire du code Svelte et voir immédiatement le résultat, sans rien installer. Il s'appelait autrefois REPL (Read-Eval-Print Loop), et l'ancienne adresse y mène toujours. Tu le trouveras à :

svelte.dev/playground

Interface du Playground

+------------------+------------------+
|                  |                  |
|   CODE EDITOR    |    PREVIEW      |
|                  |                  |
|  App.svelte      |   [Your app]    |
|                  |                  |
+------------------+------------------+
|              CONSOLE               |
+------------------------------------+

Fonctionnalités du Playground :

• Editor - écris du code Svelte, ajoute d'autres fichiers
• Preview - résultat instantané
• Console - logs et erreurs
• Save - sauvegarde le projet et génère un lien de partage

Exercice : Ton premier Playground

Va sur svelte.dev/playground et colle ce code :

<script>
  let vikingName = $state('Ton nom');
  let gold = $state(0);

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

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

  <input bind:value={vikingName} placeholder="Entre un nom de Viking">

  <p>Or dans le trésor : {gold} pièces</p>

  <button onclick={raid}>
    Expédition de pillage !
  </button>

  {#if gold > 500}
    <p class="rich">Tu es aussi riche qu'un jarl !</p>
  {:else if gold > 100}
    <p>Tu as un trésor honorable.</p>
  {:else}
    <p>Il est temps de repartir en expédition !</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 relie le champ de texte à l'état vikingName dans les deux sens : nous en reparlerons sur le Bifrost (module 5).

Expérimente ! Change des valeurs, ajoute de nouvelles fonctionnalités. Le Playground est ton terrain d'entraînement sans risque.

Sauvegarder les projets

Connecte-toi au Playground (avec un compte GitHub) pour :

• Sauvegarder des projets
• Générer des liens de partage
• Retrouver tes projets sauvegardés

SKAL ! Tu as maintenant tout ce qu'il faut pour commencer une véritable aventure avec Svelte !