Évaluateur de texte

Créer une application React qui permet à un utilisateur de saisir un texte et d’afficher des informations en temps réel sur ce texte, telles que le nombre de mots, le nombre moyen de syllabes par mot, et une représentation visuelle sous forme de cercle dont la taille et la couleur évoluent en fonction de la complexité de la phrase.

Spécification

1. Nombre de mots : Afficher le nombre total de mots présents dans le texte saisi. Un mot est défini comme une séquence de caractères séparée par des espaces.
2. Nombre moyen de syllabes par mot : Afficher le nombre moyen de syllabes par mot dans le texte.
   • Utiliser la librairie syllabify-fr pour trouver les syllabes d’un mot
3. Cercle dynamique : Afficher un cercle qui augmente en taille à mesure que le nombre de mots dans le texte augmente.
   • La taille du cercle doit être proportionnelle au nombre de mots.
   • La couleur du cercle doit changer par palier de nombre de mots. Voilà des exemples de paliers:
     • Texte de moins de 10 mots: Cercle vert.
     • Texte de 10 à 15 mots: Cercle orange.
     • Texte de plus de 15 mots: Cercle rouge.

Solution

Exemple

Évaluateur de texte

Reset

• Nombre de mots: 0
• Nombre de syllabes: 0
• Nombre de syllabes par mot: 0.00

Organisation du code

• package.json
• Répertoiresrc

  • Répertoirecomponents

    • Circle.jsx
    • Stats.jsx
    • TextField.jsx
  • Répertoirehooks

    • useSyllabeCounter.jsx
  • App.jsx
  • App.css

Structure générale

App.jsx

  <>
      <h1 className="title">Évaluateur de texte</h1>
      <TextField text={text} handleTextChange={handleTextChange} handleClear={handleClear} />
      <Stats text={text} wordCount={wordCount} syllableCount={syllableCount} />
      <Circle size={circleSize} color={circleColor} />
  </>

La solution se trouve sur GitHub