Skip to content
Snippets Groups Projects
Commit c41cc551 authored by Antoine Delfosse's avatar Antoine Delfosse
Browse files

partie D.4

parent e54d13d2
No related branches found
No related tags found
No related merge requests found
import PizzaForm from './pages/PizzaForm';
export default class Router {
static titleElement;
static contentElement;
......@@ -8,6 +10,22 @@ export default class Router {
if (route) {
this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
this.contentElement.innerHTML = route.page.render();
route.page.mount?.(this.contentElement);
}
}
static #menuElement;
static set menuElement(element) {
this.#menuElement = element;
// au clic sur n'importe quel lien contenu dans "element"
// déclenchez un appel à Router.navigate(path)
// où "path" est la valeur de l'attribut `href=".."` du lien cliqué
const tab = element.querySelectorAll('a');
tab.forEach(element => {
element.addEventListener('click', e => {
e.preventDefault();
Router.navigate(element.getAttribute('href'));
});
});
}
}
import Router from './Router';
import data from './data';
import PizzaList from './pages/PizzaList';
import Img from './components/Img';
import Component from './components/Component';
import PizzaForm from './pages/PizzaForm';
Router.titleElement = document.querySelector('.pageTitle');
Router.contentElement = document.querySelector('.pageContent');
......@@ -11,3 +14,36 @@ Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
Router.navigate('/'); // affiche une page vide
pizzaList.pizzas = data;
Router.navigate('/'); // affiche la liste des pizzas
const titre2 = document.querySelectorAll('h4')[1];
console.log(titre2);
const logo = document.querySelector('.logo');
logo.innerHTML += "<small>les pizzas c'est la vie</small>";
console.log(logo);
const lienFooter = document.querySelectorAll('footer a')[1];
console.log(lienFooter);
const laCarte = document.querySelector('.pizzaListLink');
laCarte.setAttribute('class', laCarte.getAttribute('class') + ' active');
const section = document.querySelector('.newsContainer');
section.setAttribute('style', '');
const closeButton = document.querySelector('.closeButton');
function clickClose(event) {
section.setAttribute('style', 'display:none');
}
closeButton.addEventListener('click', clickClose);
const aboutPage = new Component('section', null, 'Ce site est génial');
const pizzaForm = new PizzaForm();
Router.routes = [
{ path: '/', page: pizzaList, title: 'La carte' },
{ path: '/a-propos', page: aboutPage, title: 'À propos' },
{ path: '/ajouter-pizza', page: pizzaForm, title: 'Ajouter une pizza' },
];
Router.menuElement = document.querySelector('.mainMenu');
import Component from '../components/Component';
export default class Page extends Component {
element;
constructor(className, children) {
super('section', { name: 'class', value: className }, children);
}
mount(element) {
this.element = element;
}
}
import Page from './Page.js';
export default class AddPizzaPage extends Page {
render() {
return /*html*/ `
<form class="pizzaForm">
<label>
Nom :
<input type="text" name="name">
</label>
<button type="submit">Ajouter</button>
</form>`;
}
mount(element) {
super.mount(element);
const newPizza = document.querySelectorAll('form button');
newPizza.addEventListener('click', submit);
}
submit(event) {
const val = document.querySelectorAll('form input');
console.log(val);
}
}
import Component from '../components/Component.js';
import PizzaThumbnail from '../components/PizzaThumbnail.js';
import Page from './Page';
export default class PizzaList extends Component {
export default class PizzaList extends Page {
#pizzas;
constructor(pizzas) {
super('section', { name: 'class', value: 'pizzaList' });
super('pizzaList'); // on pase juste la classe CSS souhaitée
this.pizzas = pizzas;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment