Skip to content
Snippets Groups Projects
Commit 624bf7bd authored by Tom Delahaye's avatar Tom Delahaye
Browse files

15/02

parent 395f4e5f
No related branches found
No related tags found
No related merge requests found
...@@ -32,10 +32,11 @@ ...@@ -32,10 +32,11 @@
</nav> </nav>
</header> </header>
<section class="newsContainer" style="display:none"> <section class="newsContainer" style="display:none">
<article> <!--<article>
<button class="closeButton"></button> <button class="closeButton"></button>
<h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1> <h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1>
</article> </article>
-->
</section> </section>
<section class="pageContainer"> <section class="pageContainer">
<header class="pageTitle"></header> <header class="pageTitle"></header>
......
<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>
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;
import Router from './Router'; import Router from './Router';
import data from './data';
import PizzaList from './pages/PizzaList'; import PizzaList from './pages/PizzaList';
import PizzaForm from './pages/PizzaForm'; import PizzaForm from './pages/PizzaForm';
import Component from './components/Component'; import Component from './components/Component';
...@@ -18,7 +17,6 @@ Router.routes = [ ...@@ -18,7 +17,6 @@ Router.routes = [
]; ];
// Router.navigate('/'); // affiche une page vide // Router.navigate('/'); // affiche une page vide
pizzaList.pizzas = data;
// Router.navigate('/'); // affiche la liste des pizzas // Router.navigate('/'); // affiche la liste des pizzas
// B.1. Sélectionner des éléments // B.1. Sélectionner des éléments
...@@ -40,15 +38,15 @@ document.querySelector( ...@@ -40,15 +38,15 @@ document.querySelector(
// ); // );
// C.2. Navigation en JS : afficher/masquer un élément // C.2. Navigation en JS : afficher/masquer un élément
const newsContainer = document.querySelector('.newsContainer'), //const newsContainer = document.querySelector('.newsContainer'),
closeButton = newsContainer.querySelector('.closeButton'); //closeButton = newsContainer.querySelector('.closeButton');
// affichage du bandeau de news // affichage du bandeau de news
newsContainer.style.display = ''; //newsContainer.style.display = '';
// gestion du bouton fermer // gestion du bouton fermer
closeButton.addEventListener('click', event => { //closeButton.addEventListener('click', event => {
event.preventDefault(); // event.preventDefault();
newsContainer.style.display = 'none'; // newsContainer.style.display = 'none';
}); //});
// E.3. Deeplinking // E.3. Deeplinking
// détection des boutons précédent/suivant du navigateur : // détection des boutons précédent/suivant du navigateur :
...@@ -57,3 +55,21 @@ window.onpopstate = () => Router.navigate(document.location.pathname, false); ...@@ -57,3 +55,21 @@ window.onpopstate = () => Router.navigate(document.location.pathname, false);
// affichage de la page initiale : // affichage de la page initiale :
// même traitement que lors de l'appui sur les boutons précédent/suivant // même traitement que lors de l'appui sur les boutons précédent/suivant
window.onpopstate(); window.onpopstate();
//fetch
function displayNews(html) {
// 1. injectez le contenu du fichier dans la section .newsContainer
const newsContainer = document.querySelector('.newsContainer');
newsContainer.innerHTML += html;
newsContainer.innerHTML += `<button class="closeButton"></button>`;
// 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);
...@@ -13,4 +13,14 @@ export default class PizzaList extends Page { ...@@ -13,4 +13,14 @@ export default class PizzaList extends Page {
this.#pizzas = value; this.#pizzas = value;
this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza)); this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));
} }
mount(element) {
super.mount(element);
fetch('http://localhost:8080/api/v1/pizzas')
.then(response => response.json())
.then(responseJSon => this.doTreatment(responseJSon));
}
doTreatment(response) {
this.pizzas = response;
this.element.innerHTML = this.render();
}
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment