Captcha Generator

Build a simple CAPTCHA generator component in React that:

• Generates a random alphanumeric string on page load or when the user requests a refresh.
• Displays the string using visual distortion such as skewing, rotation, or styled text.
• Accepts user input and compares it against the CAPTCHA for validation.
• Allows the user to reload the CAPTCHA if they find it difficult to read.

Requirements

Captcha Logic

• The CAPTCHA should consist of a 5 to 6 character alphanumeric string (A–Z, 2–9).
• Use Math.random() or similar to generate the characters.
• Avoid confusing characters such as O, 0, 1, and I.

Visual Rendering

• Render each character in the CAPTCHA using individual <span> elements.
• Apply random visual styling to each character using rotation, skew, font weight, etc.
• The visual styling should make the CAPTCHA harder to read by bots, but still legible to users.

User Interaction

• Include an input field where users can type the CAPTCHA.
• Add a button labelled Submit -
  • If the input matches the CAPTCHA, show a message labelledCorrect
  • If the input does not matches the CAPTCHA, show a message labelledIncorrect
• Add a Regenerate button to refresh the CAPTCHA and reset the input and message.

Testing Instructions

• The heading Captcha Generator is rendered.
• The CAPTCHA string is displayed using styled characters.
• The buttons must be labelled Submit and Regenerate.
• Typing in the input and submitting with an incorrect string shows a message - Incorrect.
• Typing the correct CAPTCHA string shows a success message - Correct.
• Clicking the "Regenerate" button changes the CAPTCHA and clears previous input and messages.

Reference UI