Partie B finie

index.html

@@ -32,10 +32,7 @@
 		</nav>
 	</header>
 	<section class="newsContainer" style="display:none">
-		<article>
-			<button class="closeButton"></button>
-			<h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1>
-		</article>
+		
 	</section>
 	<section class="pageContainer">
 		<header class="pageTitle"></header>

news.html

+<article>
+    <button class="closeButton"></button>
+    <h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1>
+    <p>
+        Découvrez notre nouvelle pizza
+        <strong class="spicy">Spicy</strong>
+        <br />
+        aux délicieuses saveurs épicées !
+    </p>
+</article>
\ No newline at end of file

src/data.js

-const data = [
-	{
-		name: 'Regina',
-		base: 'tomate',
-		price_small: 6.5,
-		price_large: 9.95,
-		image:
-			'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
-	},
-	{
-		name: 'Napolitaine',
-		base: 'tomate',
-		price_small: 6.5,
-		price_large: 8.95,
-		image:
-			'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
-	},
-	{
-		name: 'Spicy',
-		base: 'crème',
-		price_small: 5.5,
-		price_large: 8,
-		image:
-			'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
-	},
-];
-export default data;

src/main.js

 import Router from './Router';
-import data from './data';
 import PizzaList from './pages/PizzaList';
 import PizzaForm from './pages/PizzaForm';
 import Component from './components/Component';
@@ -18,7 +17,7 @@ Router.routes = [
 ];
 
 // Router.navigate('/'); // affiche une page vide
-pizzaList.pizzas = data;
+//pizzaList.pizzas = data;
 // Router.navigate('/'); // affiche la liste des pizzas
 
 // B.1. Sélectionner des éléments
@@ -40,15 +39,14 @@ document.querySelector(
 // );
 
 // C.2. Navigation en JS : afficher/masquer un élément
-const newsContainer = document.querySelector('.newsContainer'),
-	closeButton = newsContainer.querySelector('.closeButton');
+const newsContainer = document.querySelector('.newsContainer');
 // affichage du bandeau de news
-newsContainer.style.display = '';
+//newsContainer.style.display = '';
 // gestion du bouton fermer
-closeButton.addEventListener('click', event => {
+/*closeButton.addEventListener('click', event => {
 	event.preventDefault();
 	newsContainer.style.display = 'none';
-});
+});*/
 
 // E.3. Deeplinking
 // détection des boutons précédent/suivant du navigateur :
@@ -57,3 +55,19 @@ window.onpopstate = () => Router.navigate(document.location.pathname, false);
 // affichage de la page initiale :
 // même traitement que lors de l'appui sur les boutons précédent/suivant
 window.onpopstate();
+
+function displayNews(html) {
+	// 1. injectez le contenu du fichier dans la section .newsContainer
+	newsContainer.innerHTML = html;
+	// 2. affichez la balise .newsContainer
+	newsContainer.style.display = '';
+
+	const closeButton = newsContainer.querySelector('.closeButton');
+	closeButton.addEventListener('click', event => {
+		event.preventDefault();
+		newsContainer.style.display = 'none'
+});
+}
+fetch('./news.html')
+    .then( response => response.text() )
+    .then( displayNews );
\ No newline at end of file

src/pages/PizzaList.js

@@ -13,4 +13,13 @@ export default class PizzaList extends Page {
 		this.#pizzas = value;
 		this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));
 	}
+
+	
+	mount(element){
+		super.mount(element);
+		fetch('http://localhost:8080/api/v1/pizzas')
+			.then(reponse => reponse.json())
+			.then(responseText => (this.pizzas = responseText))
+			.then(() => (element.innerHTML  = this.render()));
+	}
 }