Skip to content
Snippets Groups Projects
Commit 62abab31 authored by Bastien Cortequisse's avatar Bastien Cortequisse
Browse files

B fini

parent 6f2c3a86
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<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>
</body>
</html>
\ No newline at end of file
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 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;
// Router.navigate('/'); // affiche la liste des pizzas
// B.1. Sélectionner des éléments
......@@ -40,15 +39,10 @@ document.querySelector(
// );
// C.2. Navigation en JS : afficher/masquer un élément
const newsContainer = document.querySelector('.newsContainer'),
closeButton = newsContainer.querySelector('.closeButton');
// affichage du bandeau de news
newsContainer.style.display = '';
// gestion du bouton fermer
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 +51,18 @@ 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) {
const newsContainer = document.querySelector('.newsContainer');
newsContainer.innerHTML = html;
const closeButton = newsContainer.querySelector('.closeButton');
closeButton.addEventListener('click', event => {
event.preventDefault();
newsContainer.style.display = 'none';
});
newsContainer.style.display = '';
}
fetch('./news.html')
.then(response => response.text())
.then(displayNews);
......@@ -13,4 +13,14 @@ 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(response => response.json())
.then(tab => {
this.pizzas = tab;
document.querySelector('.pizzaList').innerHTML = this.render();
});
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment