Exercice : Tableau NBA¶

Obtenir votre dépôt (5 min)¶

Accepter l'exercice dans Classroom 50

1. Ouvrez le lien ci-dessus, connectez-vous avec Sign in with GitHub, puis acceptez l'exercice.
2. Clonez votre dépôt et ouvrez-le dans VS Code.
3. Ouvrez index.html avec Live Server.

Vue est chargé par CDN, avec une balise <script> dans index.html, avant js/script.js. Le CSS est déjà fait. Tout votre code va dans js/script.js, et quelques ajouts dans index.html.

Aperçu du résultat¶

Partie A : l'app et les données (10 min)¶

• Dans js/script.js, créez l'app avec Vue.createApp(), et montez-la sur #app.
• Dans data(), créez deux données pour les pointages : scoreRaptors et scoreCeltics, toutes deux à 80.
• Dans index.html, remplacez les deux 50 par vos données, avec {{ }}.

Ce que vous devriez voir

Les deux pointages affichent 80. Changez une valeur dans data(), enregistrez : la page suit.

• Commit (Partie A : les pointages viennent des données), puis push.

Partie B : le clic sur les logos (10 min)¶

• Créez deux méthodes, une par équipe, qui ajoutent 2 points au pointage de l'équipe.
• Dans index.html, appelez la bonne méthode au clic sur chaque logo, avec @click.

Indice : les données dans une méthode

Dans une méthode, on lit et on change une donnée avec this : this.scoreRaptors.

• Commit (Partie B : un clic ajoute 2 points), puis push.

Partie C : une seule méthode, avec un paramètre (10 min)¶

Deux méthodes qui font presque la même chose, c'est du code en double.

• Remplacez vos deux méthodes par une seule, addPoints(team).
• Au clic, passez-lui en paramètre le nom de la donnée à augmenter : addPoints('scoreRaptors').

Indice : les crochets

Le nom de la propriété est dans une variable : la notation avec un point (this.team) ne fonctionne pas. Utilisez les crochets : this[team].

Voir les deux façons d'accéder à une propriété (MDN) , et une méthode avec des paramètres.

• Commit (Partie C : une seule méthode avec un paramètre), puis push.

Partie D : la propriété calculée (10 min)¶

Sous le VS, affichez qui mène : « Raptors en tête », « Celtics en tête » ou « Égalité ».

• Créez une propriété calculée leader qui retourne le bon texte selon les deux pointages.
• Affichez-la sous le VS, dans un <p class="leader">, avec {{ leader }}.

Indice : computed

Une propriété calculée va dans computed, à côté de methods. C'est une fonction qui retourne une valeur. Dans le HTML, on l'utilise sans parenthèses, comme une donnée. Voir Propriété calculée.

• Commit (Partie D : la propriété calculée leader), puis push.

Vérifiez votre travail¶

Testez votre page sans regarder le code, sauf quand l'énoncé le demande. Chaque énoncé doit être vrai avant votre dernier push. Si un point coince, relisez la partie concernée et ses indices.

• Partie A : au chargement, les deux pointages affichent 80, et le 50 n'est plus écrit nulle part dans index.html.
• Partie B : un clic sur TOR ajoute 2 points aux Raptors, et seulement aux Raptors. Même chose pour BOS.
• Partie C : dans methods, il n'y a qu'une seule méthode, addPoints().
• Partie D : au chargement, on lit « Égalité ». Les Raptors marquent : « Raptors en tête ». Les Celtics les dépassent : « Celtics en tête ».
• La console n'affiche aucune erreur, et mes commits sont sur github.com.

Défi (facultatif)¶

• Ajoutez sous chaque logo un petit bouton +3, pour un panier à trois points. Réutilisez addPoints() : ajoutez-lui un deuxième paramètre, le nombre de points.
• Commit (Défi : les paniers à trois points), puis push.

L'exercice suivant : Collection de films