simplification exercice D.1.3

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" >