Exercices Tweetbox

Exercice - Tweetbox Twitter X

Le but de cet exercice est de créer le champ texte sur le principe de celui utilisé par Twitter. C’est à dire, un simple champ texte, limité à un nombre défini de caractères, un bouton de validation et un bouton d’ajout de photo qui limite encore plus le nombre de caractères.

Coté HTML (voir code plus bas) :

• créez un champ texte pour écrire le message
• affichez la limite de caractères max dans un paragraphe (10 pour vos tests)
• créez un bouton de validation
• chargez la librairie Vue

En JS :

• créez une nouvelle instance de Vue
  • utilisez un élément parent pour binder l’application
  • stockez les données globales dans data (le texte, le nombre de caractères max)
  • utilisez max dans votre HTML
• créez une propriété calculée nombreRestants qui renvoie le nombre de caractères restants et utilisez cette valeur pour l’affichage (à la place de max)
• utilisez v-model pour mettre à jour la valeur du texte (le nombre de caractères restants devrait se mettre à jour automatiquement)
• créez une seconde propriété calculée pour vérifier si la limite est atteinte (doit retourner true ou false). Utilisez cette propriété pour  :
  • afficher le texte en rouge (en ajoutant une classe)
  • désactiver le bouton (attribut disabled)

Ensuite :

• en HTML, ajoutez une case à cocher pour simuler l’ajout de une photo (nous ne voulons pas créer la fonctionnalité) et un label associé avec le texte «Pas de photo»
• coté JS, ajoutez dans data une propriété photo qui vaut false
• utilisez v-model pour binder cette valeur
• modifiez la propriété nombreRestants pour enlever ou pas des caractères en fonction de si la case est cochée ou non
• le texte du label doit devenir «✓ Photo ajoutée»
• testez les différents cas dans l’interface

Code HTML envisagé (sans code Vue)

<div id="app">
    <form action="">
        <textarea></textarea>
        <p>10</p>
        <button>Tweet</button>
        <input id="photo" type="checkbox">
        <label for="photo">Pas de photo</label>
    </form>
</div>

Instance Vue

Vue.createApp({
    data() {
        return {};
    },
    computed: {

    }
}).mount('#app');

Enfin, il faut pouvoir simuler l’action de tweeter et que ses tweets apparaissent sous la tweetbox (la partie serveur n’est pas gérée ici). Pour cela :

• coté JS :
  • créez une liste (vide) de tweets dans data
  • ajoutez l’événement submit sur le formulaire, et :
    • empêchez la validation classique (utilisez @submit.prevent directement)
    • ajoutez les données du tweet actuel (message, image) dans la liste sous forme d’objet littéral
• coté HTML (template) :
  • générez des blocs HTML basés sur cette liste (utilisation de v-for, v-if)
  • note: pour les images, utilisez un service de récupération d’image aléatoire comme https://picsum.photos avec un paramètre random, exemple: <img src="https://picsum.photos/200/200?random=2">
  • stylez en CSS