Exercice complémentaire semaine 6¶

Cet exercice complémentaire permet de mettre en pratique :

TypeScript strict
Les objets littéraux
Les tableaux
L'objet document
Le découpage en fonctions et leur appel

Livre de recettes¶

Voici l'interface HTML d'un livre de recettes (cette interface utilise Bootstrap) :

Site

Le projet¶

Télécharger le projet

Projet de livre de recettes
Créer un fichier tsconfig à la racine du projet (même emplacement que index.html) avec les paramètres suivants :

Target

Donner la valeur ES6 pour compiler en javascript récent, donc en conservant let et const

OutDir

Donner le chemin qui recevra le javascript compilé : "./scripts/js/"

Strict

Donner la valeur true pour activer le niveau de vérification le plus strict

NoEmitOnError

Donner la valeur true pour éviter la création de javascript s'il reste des erreurs dans le code

Fonctionnement du site¶

Fichier TypeScript existant

Notez que le fichier TypeScript est déjà créé dans script/ts_source

Il reste à le compléter.

Le site fonctionne comme suit:

Sur l'ouverture de la page (événement onload sur balise body) :

Appeler la fonction afficherPage() pour remplir le contenu de la page avec le livre de recettes
Lorsque l'utilisateur clique sur une recette de la navigation de droite :

Appeler la fonction afficherRecette() avec en paramètre l'index de la recette pour afficher la bonne recette dans la page
Lorsque l'utilisateur lance une recherche de recette

Appeler la fonction rechercherRecette() pour retrouver la bonne recette et, si elle existe, l'afficher sur la page

Le script¶

En GLOBAL
- Créer l'objet littéral de recette avec la structure suivante :
  
  nom: string; ingredients: string[]; instructions: string;
- Créer un tableau d'au moins 5 recettes, comportant des informations différentes, dont un nombre d'ingrédients différent.
  
  En voici 3 pour commencer :
  
  nom:"Poulet rôti aux herbes"
  
  ingredients:"poulet", "herbes de Provence", "sel", "poivre", "huile d'olive"
  
  instructions:"Préchauffer le four à 180°C. Assaisonner le poulet avec les herbes, le sel, le poivre et l'huile. Enfourner pendant 1 heure."
  
  --
  
  nom:"Patates pilées à l'ail"
  
  ingredients:"pommes de terre", "ail", "beurre", "crème", "sel", "poivre"
  
  instructions:"Cuire les pommes de terre jusqu'à tendre. Faire caraméliser l'ail au four. Piler les pommes de terres et l'ail ensemble. Ajouter la crème. Assaisonner avec le sel et le poivre."
  
  --
  
  nom:"Tartare de saumon"
  
  ingredients:"saumon", "câpres", "oignon vert", "citron", "mayonnaise japonaise", "huile de sésame","poivre"
  
  instructions:"Couper le saumon et les oignons verts et combiner. Assaisonner de jus de citron, mayonnaise japonaise, huile de sésame et poivre."
Fonction afficherPage()
- Appeler la fonction creerListeRecettes()
- Appeler la fonction creerListeDeroulante()
- Appeler la fonction afficherRecette() avec l'index 0 pour afficher la première recette
Fonction creerListeRecettes()

Utiliser les notions de pages dynamiques (createElement, appendChild, etc.) vues en Interfaces web pour créer les <button> de la navigation
- Pour chaque recette, afficher s on titre dans la navigation
- S'insèrent à l'intérieur de la balise <nav id="liste" ...>
- Structure HTML d'un bouton avec ses classes Bootstrap :
```
<button type="button" class="list-group-item list-group-item-action" onclick="afficherRecette(0)">Poulet rôti aux herbes</button>
```
  Attention: insérer le bon index de la recette dans l'appel de afficherRecette() !
Fonction creerListeDeroulante()

Utiliser les notions de pages dynamiques vues en Interfaces web pour créer les <option> qui s'insèrent dans le <datalist>
- Pour chaque recette, ajouter une option avec son titre dans la liste déroulante
- S'insèrent à l'intérieur de la balise <datalist id="datalistOptions">
- Structure HTML d'une option :
```
<option value="Poulet rôti aux herbes"></option>
```
Fonction afficherRecette(index)
- Afficher les informations de la recette (index)
- Titre : afficher dans <h2 id="titreRecette">
- Ingrédients : pour chaque ingrédient, ajouter un <li> dans la liste <ul id="listeIngredients">
- Instructions : afficher dans <p id="instructions" class="lead">
Fonction rechercherRecette(index)
- À partir du champ <input id="champRecherche"...>
- Trouver l'index de la recette
- Appeler afficherRecette

Compiler¶

Compiler le projet avec la commande tsc -p tsconfig.json

Avec tsconfig.json tel que configuré plus tôt, votre fichier javascript sera créé dans le dossier scripts/js/ du projet.

Le HTML fait déjà appel à ce script (qui n'existe pas pour le moment).

Corrigé¶

Vous avez essayé et aimeriez avoir le corrigé ?

Donner accès à votre professeur au sous-groupe Programmation Objet dans Git (tel que fait dans le laboratoire 1 du cours)
Aviser votre professeur (par MIO ou Teams) que vous aimeriez être corrigé
- Que ce soit complet ou non, je vous corrigerai et donnerai des commentaires
- Je vais valider votre utilisation de TypeScript
- Vous donner des pistes d'aide si j'en vois le besoin