1+ // Selecting necessary DOM elements
2+ const captchaTextBox = document . querySelector ( ".captch_box input" ) ; // Input field where the generated captcha will be displayed
3+ const refreshButton = document . querySelector ( ".refresh_button" ) ; // Button to refresh the captcha
4+ const captchaInputBox = document . querySelector ( ".captch_input input" ) ; // Input field for the user to enter the captcha
5+ const message = document . querySelector ( ".message" ) ; // Element to display the validation message
6+ const submitButton = document . querySelector ( ".button" ) ; // Submit button to validate the entered captcha
7+
8+ // Variable to store the generated captcha
9+ let captchaText = null ;
10+
11+ // Function to generate the captcha
12+ const generateCaptcha = ( ) => {
13+ const randomString = Math . random ( ) . toString ( 36 ) . substring ( 2 , 7 ) ; // Generate a random string
14+ const randomStringArray = randomString . split ( "" ) ;
15+ const changeString = randomStringArray . map ( ( char ) =>
16+ Math . random ( ) > 0.5 ? char . toUpperCase ( ) : char
17+ ) ; // Randomly change some characters to uppercase
18+ captchaText = changeString . join ( " " ) ; // Join the characters with spaces for a spaced-out appearance
19+ captchaTextBox . value = captchaText ; // Display the generated captcha in the input field
20+ console . log ( captchaText ) ;
21+ } ;
22+
23+ const refreshBtnClick = ( ) => {
24+ generateCaptcha ( ) ; // Refresh the captcha when the refresh button is clicked
25+ captchaInputBox . value = "" ; // Clear the user input field
26+ captchaKeyUpValidate ( ) ;
27+ } ;
28+
29+ const captchaKeyUpValidate = ( ) => {
30+ // Toggle the "disabled" class on the submit button based on whether the captcha input field is empty or not
31+ submitButton . classList . toggle ( "disabled" , ! captchaInputBox . value ) ;
32+
33+ if ( ! captchaInputBox . value ) message . classList . remove ( "active" ) ; // Hide the validation message if the captcha input field is empty
34+ } ;
35+
36+ // Function to validate the entered captcha
37+ const submitBtnClick = ( ) => {
38+ captchaText = captchaText
39+ . split ( "" )
40+ . filter ( ( char ) => char !== " " )
41+ . join ( "" ) ; // Remove spaces from the stored captcha for validation
42+ message . classList . add ( "active" ) ; // Show the validation message
43+
44+ // Check if the entered captcha text is correct or not
45+ if ( captchaInputBox . value === captchaText ) {
46+ message . innerText = "Entered captcha is correct" ; // Display success message
47+ message . style . color = "#222620" ; // Dark green color for success message
48+ } else {
49+ message . innerText = "Entered captcha is not correct" ; // Display error message
50+ message . style . color = "#FF2525" ; // Bright red color for error message
51+ }
52+ } ;
53+
54+ // Add event listeners for the refresh button, captchaInputBox, submit button
55+ refreshButton . addEventListener ( "click" , refreshBtnClick ) ;
56+ captchaInputBox . addEventListener ( "keyup" , captchaKeyUpValidate ) ;
57+ submitButton . addEventListener ( "click" , submitBtnClick ) ;
58+
59+ // Generate a captcha when the page loads
60+ generateCaptcha ( ) ;
0 commit comments