Pour cet exercice, vous devez compléter un menu d’un restaurant de sushis 🍣 permettant de visualiser le détail d’une
commande en temps réel.
Aperçu du résultat 👇
Matériel
Dossier de départ 📁
Couleurs 🎨
| Bleu sombre |
#586F7C
|
| Bleu charbon |
#2F4550
|
| Bleu poudre |
#B8DBD9
|
Sushi 1
Sushi 2
Sushi 3
Sushi 4
Sushi 5
Sushi 6
Requis CSS
Centrez horizontalement ↔️ et verticalement ↕️ les items du menu.
Cette étape ci doit utiliser CSS Grid. Chaque item du menu doit avoir une largeur de 150px et un espace de
15px entre eux. Autant d'items que possible doivent s'afficher sur une seule ligne.
Les boutons ➖ et ➕ doivent avoir une dimension de 40x40px, être bleu sombre par défaut et bleu charbon au survol.
La bulle du prix total doit avoir une dimension de 150x150px, être bleu poudre et le prix à l'intérieur doit avoir
une taille de police de 40px.
Requis Vue
Importez le cadriciel Vue 3 via CDN.
Créez une app Vue.
Dans votre app, la fonction data() retournera une propriété sushisArr qui
contiendra un tableau (array) listant différents objets : un pour chaque sushi.
Analysez la démo ci-haut. Quelles informations uniques à chaque sushi devraient être transformées en propriétés
contenues dans les objets listés dans sushisArr? Créez-les et populez-les avec les données de
l'exemple ci-haut.
Dans le fichier index.html, créez une boucle sur chacun des sushis listés dans sushisArr.
Dans cette boucle, construisez le contenu HTML de chaque sushi en récupérant la valeur des propriétés des objets que
vous avez créés à l'étape 4.
Les boutons ➖ et ➕ doivent permettre de diminuer/augmenter le nombre de sushis de chaque sorte respective.
Attention, un nombre de sushis ne peut jamais être négatif.
Utilisez des propriétés calculées afin d'afficher en temps réel le nombre de morceaux ainsi que le prix
total lorsque des sushis sont ajoutés/retirés.
Requis Vue - Composante
La section Requis Vue - Composante est à faire seulement si on a couvert les composantes Vue jusqu'à maintenant. Sinon, ne pas faire la partie qui suit, nous y reviendrons plus tard.
Maintenant, essayons de faire la même chose que l'étape précédente mais en transformant un sushi du menu en une
composante réutilisable pour générer tous les autres.
Copiez votre fichier complété de l'étape précédente index.html et nommez le index-composante.html
Copiez votre fichier complété de l'étape précédente main.js et nommez le main-composante.js
Dans index-composante.html, changez le lien de main.js pour main-composante.js
Dans ces 2 nouveaux fichiers, modifiez l'app Vue que vous avez précédemment créée. Créez une composante intitulée
sushi. Cette composante devra être utilisée pour générer l'aperçu de chaque item sur le menu via une boucle
Vue.
Pour cette étape, il n'est pas nécessaire de faire le calcul du prix total comme vous avez fait au #8 des
Requis - Vue puisqu'on n'a pas couvert la méthode intégrée $emit qui permet de
faire le lien entre une app et ses composantes.
Bonus CSS Grid
Notez que l'aperçu du résultat en haut de cette page ne montre pas le résultat
attendu pour ce bonus.
Marquez un sushi *vedette* (ex. le premier) et faites-le occuper 2 colonnes × 2 rangées dans la grille.
À partir de 900 px de largeur de fenêtre, positionnez la bulle de total en bas à droite de la grille, en lui faisant occuper 2 rangées.
Ajustez l’image du sushi vedette pour qu’elle couvre son espace (object-fit).
Notes de cours 📚
Notes de cours Vue JS
Données {{ }}
Les données via les moustache et les attributs des balises via v-bind
Composantes
Composantes autonomes pouvant être réutilisables
Notes de cours CSS Grid