Basic CAPTCHA Verification App

Brief Overview:

• This project is a simple CAPTCHA verification system built to generate and validate user inputs against a CAPTCHA code. It employs random text generation, a dynamic canvas for displaying CAPTCHA, and JavaScript for interaction and validation.

Key Features:

• Dynamic CAPTCHA Generation: Random 6-character alphanumeric CAPTCHA created each time the app reloads or the user refreshes.
• Canvas Rendering: CAPTCHA displayed on an HTML canvas with added noise, rotations, and distortions to enhance security.
• Input Validation: User input is verified, and appropriate feedback is provided (correct, incomplete, or incorrect).
• Interactive Features: Includes a "Reload CAPTCHA" button to regenerate the CAPTCHA and a "Check CAPTCHA" button to validate input.
• Responsive Feedback: Displays feedback messages in real-time, including status reset after a few seconds.

Technologies Used:

• HTML: Structured the page, including input fields and buttons.
• CSS: Styled the layout and visual components.
• JavaScript: Handled CAPTCHA generation, canvas drawing, input validation, and feedback mechanisms.

My Role:

• Designed and developed the entire project independently, focusing on integrating HTML, CSS, and JavaScript to create an interactive CAPTCHA system.

Challenges Solved:

• Learning to use the HTML canvas for rendering text and adding distortions and noise.
• Implementing real-time feedback for user input validation.
• Ensuring dynamic CAPTCHA updates with seamless user experience.

Outcome:

• The project successfully demonstrated how to build a functional CAPTCHA system using JavaScript. It served as a great learning experience for working with the canvas API, dynamic input validation, and interactive web applications.