À partir du projet de départ fournit, vous devez implémenter les fonctionnalités(logique et évènements) pour mettre en place le comportement d’une application web JavaScript permettant de créer des images humoristiques.

Le projet de départ contient la structure HTML et la mise en page CSS nécessaire à la mise en place des composants du formulaire. Vous devez donc compléter le fichier de script fourni pour produire un résultat cohérent selon les interactions de l’utilisateur.

Vous ne devez pas modifier la structure HTML, mais vous pouvez ajouter de façon judicieuse des id, class ou value pour faciliter votre implémentation. Vous devez intégrer l'ensemble de vos événements et manipulations dans le fichier JavaScript externe script.js

Démonstration

Fonctionnalités à développer

Initialisation

Affichez votre nom clairement sur la page pour identifier l'auteur du site. Assurez-vous également d'attribuer une état initial cohérent au formulaire.

Choix de l’image

L’image de la zone de prévisualisation est mise à jour lorsque l’item sélectionné dans la liste déroulante change. Le chemin de l’image est contenu dans l’attribut value de l’option sélectionnée.

Couleur de l’arrière-plan

La couleur d’arrière-plan de la zone de prévisualisation doit être blanche si la case est cochée, sinon elle est noire. La couleur affichée est mise à jour lorsque l’état(cochée ou non) de la case à cocher change.

Choix du texte

3 boutons radio permettent de sélectionner le texte à manipuler. Lorsque le bouton radio choisi change, les valeurs des champs(texte, police, taille, couleur) en dessous sont mises à jour pour correspondre au données du texte.

Rédaction du texte

Une zone de texte permet de saisir le texte pour l’item sélectionné. Pour chaque caractère saisi, l’item correspondant est mis à jour dans la zone de prévisualisation.

Choix de la police

Une liste déroulante permet de choisir la police d’écriture pour l’item sélectionné. Lorsque la police sélectionnée change, l’item correspondant est mis à jour dans la zone de prévisualisation. Les identifiants de la police sont contenus dans l’attribut value de l’option sélectionnée.

Choix de la taille de la police

Une zone de saisie de nombre permet de choisir la taille de police d’écriture pour l’item sélectionné. Pour chaque caractère saisi, l’item correspondant est mis à jour dans la zone de prévisualisation. En récupérant la taille de la police du paragraphe, vous devrez la transformer pour l'assigner au input en conservant seulement la partie numérique : paragraph.style.fontSize.slice(0, -2); // '16px' -> '16'

Choix de la couleur de la police

Une zone de saisie de couleur permet de choisir la couleur de police d’écriture pour l’item sélectionné. Lorsque la valeur change, l’item correspondant est mis à jour dans la zone de prévisualisation. En récupérant la couleur du paragraphe, vous devrez la transformer pour l'assigner au input de couleur, utilisez la fonction rgb2hex(paragraph.style.color) fournie.

Exemple de personnalisation

Remise

• Démontrer les fonctionnalités du laboratoire avant la fin du cours le 29 mars
  • Remettre tous les fichiers votre projet dans un fichier ZIP via LÉA

Critères

Laboratoire #2 - 5% / 22

Nom: ____________________________________