Vue Sushis

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

Requis CSS

  1. Centrez horizontalement ↔️ et verticalement ↕️ les items du menu.

  2. 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.

  3. Les boutons ➖ et ➕doivent avoir une dimension de 40x40px, être bleu sombre par défaut et bleu charbon au survole.

  4. La bulle de 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

  1. Importez le cadriciel Vue via CDN dans le projet et connectez votre app Vue au HTML.

  2. 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.

  3. 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.

  4. 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.