Ce site est une version en lecture seule. Pour vous abonner ou gérer votre compte, veuillez vous rendre sur le site www.elephorm.com

Gestion du CSS et création d'un compteur

  • Vidéo 27 sur 36
  • 2h55 de formation
  • 36 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Gestion du CSS et création d'un compteur
00:00 / 06:19
HD
fullscreen

Sommaire de la formation

Détails de la formation

Dans ce cours en ligne sur ReactJS, le formateur vous explique la gestion du CSS et la création d’un compteur. L’objectif de ce tuto est de perfectionner le TweetBox. Contrairement aux publications sur d’autres réseaux sociaux, les tweets ne consomment qu’un volume réduit de données. A cet effet, la longueur d’un tweet est limitée. Pour y parvenir, vous recourez à un compteur pour vérifier le nombre de caractères saisis par l’utilisateur. Pour ce faire, vous rééditez le JSX à retourner en ajoutant une autre balise div. Cette balise a pour attribut className= « action ». A ce niveau, vous ajoutez une balise span qui a pour rôle d’afficher le nombre de caractères restants que l’utilisateur peut saisir. Ainsi, vous l’implémenter comme suit {140 –value.lenght} . Pour empêcher que l’utilisateur n’insère un nombre de caractères supérieur à la valeur maximale autorisée lorsque le compteur est à zéro, vous ajoutez l’attribut className= {value.lenght > 140 ‘alert’}. L’ajout de cet attribut a pour effet de stopper la saisie et d’envoyer un message d’alerte en coloriant la bordure interne du TweetBox en rouge. Pour le vérifier, vous allez vers le navigateur puis vous cliquez sur l’onglet Textarea et vous cliquez ensuite sur l’option Style. Cette action faite, vous pouvez voir la configuration par défaut du style la balise textarea. De plus, à partir de cet onglet, vous pouvez gérer le CSS du projet. A titre d’informations, le mode Développeur est conçu pour faciliter l’initiation d’un développeur débutant. En guise d’améliorations du TweetBox, vous pouvez également empêcher le tweet lorsque le nombre de caractères dépasse la limite convenue. Pour ce faire, vous ajoutez la balise button ayant pour attribut type= « button » et disabled={ !value ;length || value > 140}. Le second attribut a pour effet d’annuler le fonctionnement du bouton lorsqu’ aucun caractère n’est saisi ou que l’utilisateur dépasse la limite de caractères. Pour conclure, cette formation en ligne sur ReactJS vous permet d’améliorer les fonctionnalités de la TweetBox.