diff --git a/script.js b/script.js index 1824dca..f11a883 100644 --- a/script.js +++ b/script.js @@ -11,6 +11,8 @@ let submitButton = document.getElementById('submitButton'); let output = document.getElementById('output'); let refreshButton = document.getElementById('refreshButton'); +var captchaStr = ""; + // alphaNums contains the characters with which you want to create the CAPTCHA let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', @@ -23,54 +25,49 @@ let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; +function generate_captcha() { + // This loop generates a random string of 7 characters using alphaNums + // Further this string is displayed as a CAPTCHA + let emptyArr = []; + + for (let i = 1; i <= 7; i++) { + emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]); + } + + captchaStr = emptyArr.join(''); + + ctx.clearRect(0, 0, captchaText.width, captchaText.height); + ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2); -// This loop generates a random string of 7 characters using alphaNums -// Further this string is displayed as a CAPTCHA -let emptyArr = []; -for (let i = 1; i <= 7; i++) { - emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]); + output.innerHTML = ""; +} + +generate_captcha(); + +function check_captcha() { + if (userText.value === captchaStr) { + output.className='correctCaptcha'; + output.innerHTML = "Correct!"; + } else { + output.className='incorrectCaptcha'; + output.innerHTML = "Incorrect, please try again!"; + } } -var c = emptyArr.join(''); -ctx.fillText(emptyArr.join(''), captchaText.width/4, captchaText.height/2); // This event listener is stimulated whenever the user press the "Enter" button // "Correct!" or "Incorrect, please try again!" message is // displayed after validating the input text with CAPTCHA userText.addEventListener('keyup', function(e) { if (e.key === 'Enter') { - if (userText.value === c) { - output.classList.add("correctCaptcha"); - output.innerHTML = "Correct!"; - } else { - output.classList.add("incorrectCaptcha"); - output.innerHTML = "Incorrect, please try again!"; - } + check_captcha(); } }); // This event listener is stimulated whenever the user clicks the "Submit" button // "Correct!" or "Incorrect, please try again!" message is // displayed after validating the input text with CAPTCHA -submitButton.addEventListener('click', function() { - if (userText.value === c) { - output.classList.add("correctCaptcha"); - output.innerHTML = "Correct!"; - } else { - output.classList.add("incorrectCaptcha"); - output.innerHTML = "Incorrect, please try again!"; - } -}); +submitButton.addEventListener('click', check_captcha); // This event listener is stimulated whenever the user press the "Refresh" button // A new random CAPTCHA is generated and displayed after the user clicks the "Refresh" button -refreshButton.addEventListener('click', function() { - userText.value = ""; - let refreshArr = []; - for (let j = 1; j <= 7; j++) { - refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]); - } - ctx.clearRect(0, 0, captchaText.width, captchaText.height); - c = refreshArr.join(''); - ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2); - output.innerHTML = ""; -}); +refreshButton.addEventListener('click', generate_captcha);