@@ -41,36 +41,35 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
```
## C.3. Le formulaire d'ajout de pizza
1.**Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`). Le titre de la page devra être "Ajouter une pizza" et la méthode `render()` sera surchargée comme suit :
1.**Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`) :
***NB :** le commentaire `/*html*/` juste avant la chaîne permet à l'extension de vscodium "es6-string-html" (que vous avez installé lors du précédent TP) d'appliquer la coloration syntaxique au code html contenu dans la template string, ce qui peut être pratique pour s'y retrouver.*
mount(container){}
2.**Dans le fichier `main.js` instanciez la classe `AddPizzaPage`** puis, au "click" sur le lien "Ajouter une pizza" **affichez l'instance de `AddPizzaPage` à l'aide de `PageRenderer` :
```js
// addPizzaPage est une instance de la classe AddPizzaPage
PageRenderer.renderPage(addPizzaPage);
```
3.**Ajoutez une méthode `submit()` dans la classe `AddPizzaPage`.** Cette méthode sera appelée lorsque l'utilisateur soumettra le formulaire :
```js
submit(event){
// ici le code de votre méthode
submit(event){}
}
```
Cette méthode va pour le moment juste afficher un message dans la console.
***NB:** Souvenez vous de la méthode `event.preventDefault()`...*
4.**Overridez la méthode `mount()` dans la classe `AddPizzaPage`** en y ajoutant un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">` qui va déclencher la méthode `submit()` de l'instance.
***NB :** le commentaire `/*html*/` juste avant la chaîne permet à l'extension de vscodium "es6-string-html" (que vous avez installé lors du précédent TP) d'appliquer la coloration syntaxique au code html contenu dans la template string, ce qui peut être pratique pour s'y retrouver.*
2.**Implémentez la méthode `mount()` dans la classe `AddPizzaPage`** en y ajoutant un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">`. Cet écouteur d'événement devra déclencher la méthode `submit()` de l'instance.
***NB :** Pour rappel, la valeur du `this` à l'intérieur d'un écouteur d'événement (fonction appelée par addEventListener) est toujours l'élément HTML qui a déclenché l'événement (ici le formulaire). Pour pouvoir appeler une méthode de l'instance, il faut forcer la valeur du `this` pour qu'elle corresponde toujours à l'instance dans laquelle le code s'exécute. Comme expliqué dans le pdf du cours, il existe plusieurs manières de le faire, mais celle que je vous recommande est l'emploi de la méthode [`bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) dans le constructeur de la classe :*
```js
...
...
@@ -83,6 +82,14 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
}
}
```
3.**Implémentez la méthode `submit()` dans la classe `AddPizzaPage`.** : cette méthode va pour le moment juste afficher un message dans la console.
```js
submit(event){
// ici le code de votre méthode
}
```
***NB:** Souvenez vous de la méthode `event.preventDefault()` et vérifiez que la soumission du formulaire n'entraîne pas un rechargement de page...*
## C.4. La validation de la saisie
1.**Au submit, afficher dans la console la valeur saisie par l'utilisateur dans le champ "nom"**. Un sélecteur CSS qui peut être utile ici est le [sélecteur d'attributs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
