From 532d47cd580ff53211a9b928e6f5f723b77fef04 Mon Sep 17 00:00:00 2001
From: Thomas Fritsch <thomas@uidlt.fr>
Date: Tue, 2 Feb 2021 09:21:35 +0100
Subject: [PATCH] simplification exercice D.1.3
---
D-poo-avancee.md | 34 +++++++++++++++++++++++++++++++---
1 file changed, 31 insertions(+), 3 deletions(-)
diff --git a/D-poo-avancee.md b/D-poo-avancee.md
index c911b11..95b0684 100644
--- a/D-poo-avancee.md
+++ b/D-poo-avancee.md
@@ -53,14 +53,41 @@ _**L'objectif de cet exercice est d'utiliser une classe à l'intérieur d'une au
<img src="images/readme/pizzaland-03.png" >
-3. **Créez une classe `PizzaThumbnail`** (dans `src/components/PizzaThumbnail.js`) qui hérite de la classe `Component` et qui utilise **obligatoirement** la classe **`Img`** pour rendre son code HTML.
+3. **Créez une classe `PizzaThumbnail`** (dans `src/components/PizzaThumbnail.js`) avec le code suivant :
- Avec le code JS suivant :
+ ```js
+ export default class PizzaThumbnail extends Component {
+ constructor({ name, image, price_small, price_large }) {
+ super('article', { name: 'class', value: 'pizzaThumbnail' }, [
+ new Component('a', { name: 'href', value: image }, [
+ new Img(image),
+ new Component('section', null, [
+ new Component('h4', null, name),
+ new Component('ul', null, [
+ new Component('li', null, `Prix petit format : ${price_small.toFixed(2)} €`),
+ new Component('li', null, `Prix grand format : ${price_large.toFixed(2)} €` ),
+ ]),
+ ]),
+ ]),
+ ]);
+ }
+ }
+ ```
+
+ Comme vous le voyez, on utilise ici le même principe que pour la classe `Img` :
+ on **surcharge juste le constructeur** en invoquant celui de `Component` (`super(...)`)
+ et en lui passant les bons `tagName`, `attribute` et `children`.
+
+ Dans le `src/main.js`, testez votre classe avec le code suivant :
```js
const pizzaThumbnail = new PizzaThumbnail(data[0]);
document.querySelector( '.pageContent' ).innerHTML = pizzaThumbnail.render();
```
- ... le code HTML généré sera :
+
+ Si votre classe `Component` est correctement codée
+ (c'est à dire qu'elle prend en compte tous les cas limites)
+ alors le code HTML généré sera le suivant :
+
```html
<article class="pizzaThumbnail">
<a href="https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300">
@@ -75,6 +102,7 @@ _**L'objectif de cet exercice est d'utiliser une classe à l'intérieur d'une au
</a>
</article>
```
+
... et le rendu obtenu dans la page sera celui-ci :
<img src="images/readme/pizzaland-04.png" >
--
GitLab