Pour cet exercice, vous devez styler plusieurs cartes Uno. Malheureusement il vous est interdit de modifier le HTML et puisque vous n’avez guère envie d’écrire le style des 48 cartes à la main, vous devrez tirer profit vos connaissances Scss.

Aperçu du résultat 👇

Matériel

Couleurs 🎨

Rouge #F55556
Jaune #F8AA03
Vert #55AA55
Bleu #3AA6FF

Requis

  1. Créez-vous un placeholder contenant les styles de bases d'une carte générique. Ces styles doivent faire en sorte que les cartes s'affichent une à côté de l'autre, aillent une dimension de 132x200px, est des coins ronds de 8px, une bordure blanche de 8px sur tous les côtés et un espace vide de 8px entre elles.

    Pour valider cette étape, vous pouvez appliquez ce placeholder à l'élément avec la classe .uno-red-0, vous devriez alors voir le contour d'une carte apparaitre.

  2. Créez une boucle de 0 à 11 inclusivement. À l'intérieur de celle-ci, appliquez votre placeholder et ajoutez en arrière-plan l'image correspondant à l'index de la boucle afin d'obtenir des URLs similaires à ceci:
    https://ex.smnarnold.com/scss/uno/0.png, https://ex.smnarnold.com/scss/uno/1.png, etc.

    Vous devriez alors voir des cartes apparaître, mais sans couleur de fond.

  3. Englobez votre plus récente boucle avec une autre boucle, mais cette fois celle-ci devra être capable de supporter une map afin de passer le nom et le code des quatre couleurs en pièce jointe. Ainsi plutôt que de ne cibler que les cartes rouges (red), vous pourrez maintenant cibler toutes les cartes existantes.

    Le nombre de cartes avec un fond transparent devrait maintenant avoir quadruplé.

  4. Ajoutez la couleur de fond appropriée pour chaque carte à l'intérieur de votre boucle.

  5. Les cartes 10 et 11 n'affichent pas comme souhaité, car elles sont appelées via un numéro alors que leur nom est skip.png et reverse.png. Afin de remédier à ce problème, créez une condition dans votre boucle. Lorsque l'index correspond à 11, afficher l'image https://ex.smnarnold.com/scss/uno/skip.png. Lorsque l'index correspond à 10, afficher l'image https://ex.smnarnold.com/scss/uno/reverse.png. Dans tous les autres cas, afficher l'image correspondant à l'index de la boucle.

  6. Afin d'améliorer la lisibilité de votre code, créez-vous une fonction Scss acceptant un paramètre. Déplacez ensuite votre condition à l'intérieur de cette fonction et à partir du paramètre passé (nombre entre 0 et 11), déterminez quelle image d'arrière-plan doit être retournée.

    Ensuite dans votre boucle, déclarer la propriété CSS background-image et donner lui comme valeur le résultat de votre fonction.