Applications JavaScript

Licence Informatique 1ère année

Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Compteur de calories #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/2020/TW2/TP08/ex1/compteur.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Le but de l'exercice est de réaliser une version basique d'un compteutr de calories comme on peut en trouver dans les sites ou applications de bien-être ou santé. Notre compteur s'appuyera sur une liste limitée d'ingrédients exportées de la table de composition nutritionnelle des aliments Ciqual disponible sur le site de données publiques https://www.data.gouv.fr. Pour simplifier, les catégories ont été réduites à un seul niveau (au lieu de 3) et les valeurs de type < 0,05 ont été mises à 0.

L'objectif de base est d'avoir un compteur basique comme illustré ci-dessous :

Exemple de compteur
Exemple de compteur

Format des données

Le fichier data.js fournit les données dans un objet JavaScript sous la forme d'une listes d'ingrédients. Chaque ingrédient est défini par un objet contenant son identifiant, sa catégorie, son nom, sa valeur énergétique en kCal pour 100g et les quantités (en g) de protéines, glucides, lipides et sucres, sous cette forme :

let data = [
            {
                "id": "item_13245698",
                "categorie": "catégorie de l'ingrédient",
                "ingrédient": "nom de l'ingrédient",
                "energie": 123,
                "proteines": 34,
                "glucides": 12.5,
                "lipides": 26.2,
                "sucres": 0.5
            },
            {
                ...
            },
            ...
           ]
    

Partie 1 : chargement des données dans le formulaire

Télécharger l'archive de l'exercice et l'extraire.

La partie de gauche de la page contient un formulaire qui permettra d'ajouter des ingrédients à un repas. Il faut choisir un ingrédient dans la liste, indiquer la quantité en grammes et cliquer sur Ajouter pour l'ajouter au compteur.

Mais la liste des ingrédients n'est pas écrite dans le HTML, elle est contenue dans la variable data du fichier data.js, la va donc falloir la charger dans le formulaire.

Remarque : dans une vraie application de ce type, la liste des ingrédients serait dynamique, c'est-à-dire qu'elle changerait en fonction de ce que l'utilisateur a besoin. Il faudrait donc comme ici avoir un programme qui génère la liste, on ne peut pas la mettre une fois pour toute dans le source HTML.

Écrire le code qui, au chargement de la page, va remplir les options de l'élément select du formulaire avec les éléments option qui sont les ingrédients. On pourra concaténer la catégorie et le nom de l'ingredient (et mettre la 1ère lettre en majuscule si on veut). La valeur de l'attribut value sera la valeur de l'identifiant de l'ingrédient. On doit obtenir une liste déroulante de ce type :

Ajouter le capteur d'évènement submit au formulaire et créer la fonction ajouterIngredient qui doit bloquer la soumission du formulaire (avec event.preventDefault()).

Partie 2 : compteur

Compléter la fonction ajouterIngredient pour afficher dans la partie de droite de la page l'ingrédient ajouté, les infos (énergie, etc) correspondantes au poids ajouté, mettre à jour et afficher le total du repas.

Indication : pour retrouver l'ingrédient sélectionné dans la liste complète, on peut rechercher dans la liste en la parcourant avec un for, mais on peut aussi utiliser la méthode filter() des tableaux.

Indication : pour éviter d'avoir trop de décimales dans les valeurs numériques, utiliser la méthode toFixed().

Améliorations

Mettre en place les améliorations suivantes :

  • améliorer le select pour regrouper par catégories (éléments optgroup) comme ceci :
  • Possibilité de remettre le compteur à zéro pour commencer un nouveau calcul
  • Pouvoir supprimer un item de la liste (les totaux doivent être mis à jour automatiquement)