Projet 1 : "Switter"
  • Démo de "Switter"
  • Création d'une nouvelle application Svelte.js
  • Structure d'une application Svelte.js
  • Mettre à jour une variable et l'afficher
  • Gérer le 'click' event pour ajouter un nouveau message
  • Parcourir une collection de messages côté template
  • Two-way binding avec bind:value
  • Vider le textearea après soumission
  • Création d'un nouveau component Svelte
  • Passer une prop à un composant enfant
  • Dispatcher un custom event d'un composent enfant vers son parent
  • Ajout d'un input pour l'auteur
  • Gérer le format des dates
  • La réactivité en Svelte
  • Ajouter une class CSS conditionnellement
  • "if" côté template
  • Définir une valeur par défaut
  • Afficher ou masquer un component
Projet 2 : "Gymscheduler"
  • Démo de "Gymscheduler"
  • Création d'une nouvelle application Svelte.js
  • Créer dynamiquement un menu déroulant
  • Ajouter dynamiquement une ou plusieurs instances de TrainingDay
  • Gérer la soumission du formulaire de création d'exercice
  • Styles CSS
  • Lister les séries et nombre de répétitions de chaque exercice
  • Emission d'un custom event lors de la création d'un nouvel exercice
  • Passer les props au component TrainingWeekSummary
  • Préparation du résumé en utilisant reduce()
  • Utilisation d'un lifecycle hook
  • Rendu du résumé détaillé du programme hebdomadaire
Projet 3 : "ExpenseTracker"
  • Démo de "ExpenseTracker"
  • Création d'une nouvelle application Svelte.js
  • Utilisation de Bootstrap pour créer un tableau de dépenses
  • Création d'un writable store
  • Utiliser des données du store en les passant en tant que props
  • Création du component ExpenseCreate.svelte
  • Mise à jour du store
  • Initialiser un formulaire
  • Création du component ExpenseTotal.svelte
  • Utilisation du tweening pour animer les modifications du total
  • Animation du DOM à l'aide d'une transition
  • Récupération de la configuration d'une base Firestore
  • Se connecter à Firestore pour récupérer un snapshot de notre collection
  • Création d'un service permettant d'interagir avec Firestore
  • Attribuer une nouvelle valeur à notre store Svelte
  • Création d'une nouvelle dépense dans Firestore
  • Implémentation de l"edit in place"
  • Affichage d'un formulaire de mise à jour si en mode édition
  • Ecouter notre custom event
  • Récapitulatif de l'update
  • Suppression d'une dépense