D.4

src/Pages/PizzaList.js

+import Component from '../components/Component.js';
+import Img from '../components/Img.js';
+import PizzaThumbnail from '../components/PizzaThumbnail.js';
+export default class PizzaList extends Component {
+	#pizzas;
+	set pizzas(value) {
+		this.#pizzas = value;
+		this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));
+	}
+
+	constructor(pizzas) {
+		super('section', { name: 'class', value: 'pizzaList' });
+		this.pizzas = pizzas;
+	}
+}

src/Router.js

-class Router {
+import Component from './components/Component.js';
+export default class Router {
     static titleElement;
     static contentElement;
     static routes;
 
-	static naviagte(path) {}
+    static navigate(path) {
+        this.routes.forEach(e => {
+            if (e.path == path) {
+                const title = new Component('h1', null, e.title);
+                Router.titleElement.innerHTML = title.render();
+                Router.contentElement.innerHTML = e.page.render();
+            }
+        });
+    }
 }
\ No newline at end of file

src/components/PizzaList.js

-import Component from './Component.js';
-import Img from './Img.js';
-import PizzaThumbnail from './PizzaThumbnail.js';
-export default class PizzaList extends Component {
-	constructor(data) {
-		let idx = 0;
-		let tabPiz = [];
-		data.forEach(e => {
-			tabPiz.push(new PizzaThumbnail(e));
-			idx++;
-		});
-		super('section', { name: 'class', value: 'pizzaList' }, tabPiz);
-	}
-}

src/main.js

@@ -2,13 +2,19 @@ import Component from './components/Component.js';
 import data from './data.js';
 import Img from './components/Img.js';
 import PizzaThumbnail from './components/PizzaThumbnail.js';
-import PizzaList from './components/PizzaList.js';
-const title = new Component('h1', null, ['La', ' ', 'carte']);
-document.querySelector('.pageTitle').innerHTML = title.render();
+import PizzaList from './Pages/PizzaList.js';
+import Router from './Router.js';
+// const title = new Component('h1', null, ['La', ' ', 'carte']);
+// document.querySelector('.pageTitle').innerHTML = title.render();
 
-const pizzaList = new PizzaList(data);
-document.querySelector('.pageContent').innerHTML = pizzaList.render();
+// document.querySelector('.pageContent').innerHTML = pizzaList.render();
 
 Router.titleElement = document.querySelector('.pageTitle');
 Router.contentElement = document.querySelector('.pageContent');
+
+const pizzaList = new PizzaList([]);
 Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
+
+Router.navigate('/'); // affiche une page vide
+pizzaList.pizzas = data;
+Router.navigate('/'); // affiche la liste des pizzas
\ No newline at end of file