Conception de sites web dynamiques

TP6 : Javascript

Votre travail doit être accessible à l'adresse www.ens.math-info.univ-paris5.fr/~login/TP6, 48h avant la prochaine séance. Votre code (HTML, CSS et JS) doit impérativement être commenté.

Comme chacun le sait, il faut manger 5 fruits et légumes par jour. Mais comment les choisir ?

Vous allez créer une page web avec un formulaire contenant 2 selects : celui de gauche contiendra une liste de plusieurs fruits et légumes accompagnés de leurs prix respectifs, celui de droite sera initialement vide. La hauteur des select sera réglée de telle sorte que toutes les options soient visibles. Entre les deux, un bouton marqué d'un > permettra de faire passer l'item sélectionné de gauche à droite. Un bouton marqué d'un < fera le contraire.

Lorsque l'utilisateur clique sur le bouton "valider", une fonction vérifie que la liste de droite a été correctement constituée avant de soumettre le formulaire :

Si c'est le cas, le formulaire est soumis, sinon une pop-up apparaît pour signaler ce qui ne convient pas.

Au lancement de la page, une minuterie est lancée. Si l'utilisateur met plus d'un certain temps à choisir ses 5 fruits et légumes, une pop-up apparaît pour dire que la partie est finie et les boutons > et < du formulaire sont désactivés. Lorsqu'on clique sur le bouton OK de la pop-up, celle-ci disparaît et la page principale est rechargée.

Notes sur la programmation javascript :