diff --git a/Capcha Generator/index.html b/Capcha Generator/index.html index a1483bd2..ca746030 100644 --- a/Capcha Generator/index.html +++ b/Capcha Generator/index.html @@ -1,34 +1,91 @@ - - - - - + + + + Captcha Generator - + - + - - -
-
Captcha Generator
-
- - -
-
- -
-
Entered captcha is correct
-
- -
+
+ +
+
Entered captcha is correct
+
+ +
+
+

Captcha History

+ +
+
+ + +
+ + + + - - \ No newline at end of file + // Generate initial captcha on page load + generateCaptcha(); + + + diff --git a/Capcha Generator/manifest.json b/Capcha Generator/manifest.json index 53c6aeb3..2e85c331 100644 --- a/Capcha Generator/manifest.json +++ b/Capcha Generator/manifest.json @@ -1,19 +1,26 @@ { - "manifest_version": 3, - "name": "Captcha Validation Extension JS", - "version": "1.0", - "description": "Simple Captcha validation extension built in pure HTML CSS JS...", - "permissions": [ - "storage" - ], - "action": { - "default_popup": "index.html" + "manifest_version": 3, + "name": "Captcha Validation Extension JS", + "version": "1.0", + "description": "Simple Captcha validation extension built in pure HTML CSS JS...", + "permissions": [ + "activeTab", + "storage" + ], + "host_permissions": [ + "" + ], + "action": { + "default_popup": "index.html" + }, + "web_accessible_resources": [ + { + "resources": ["index.html"], + "matches": [""] }, - "web_accessible_resources": [ - { - "resources": ["index.html"], - "matches": [""] - } - ] - } - \ No newline at end of file + { + "resources": ["scripts/*", "src/*", "audio/*"], + "matches": [""] + } + ] +} diff --git a/Capcha Generator/scripts/script.js b/Capcha Generator/scripts/script.js index 611c987d..dd84cffb 100644 --- a/Capcha Generator/scripts/script.js +++ b/Capcha Generator/scripts/script.js @@ -5,8 +5,9 @@ const captchaInputBox = document.querySelector(".captch_input input"); const message = document.querySelector(".message"); const submitButton = document.querySelector(".button"); -// Variable to store generated captcha +// Variable to store generated captcha and captcha history let captchaText = null; +const captchaHistory = []; // Function to generate captcha const generateCaptcha = () => { @@ -15,28 +16,25 @@ const generateCaptcha = () => { const changeString = randomStringArray.map((char) => (Math.random() > 0.5 ? char.toUpperCase() : char)); captchaText = changeString.join(" "); captchaTextBox.value = captchaText; - console.log(captchaText); + captchaHistory.unshift(captchaText); // Add generated captcha to history }; +// Function to refresh captcha on button click const refreshBtnClick = () => { generateCaptcha(); captchaInputBox.value = ""; captchaKeyUpValidate(); }; +// Function to validate captcha input on keyup event const captchaKeyUpValidate = () => { - submitButton.classList.toggle("disabled", !captchaInputBox.value); - if (!captchaInputBox.value) message.classList.remove("active"); }; -//validation +// Function to handle submission of captcha const submitBtnClick = () => { - captchaText = captchaText - .split("") - .filter((char) => char !== " ") - .join(""); + captchaText = captchaText.split("").filter((char) => char !== " ").join(""); message.classList.add("active"); // Check if the entered captcha text is correct or not if (captchaInputBox.value === captchaText) { @@ -48,12 +46,31 @@ const submitBtnClick = () => { message.innerText = "Entered captcha is not correct"; message.style.color = "#FF2525"; } + updateCaptchaHistory(); // Update captcha history after submission +}; + +// Function to update captcha history +const updateCaptchaHistory = () => { + const historyList = document.getElementById("captchaHistoryList"); + historyList.innerHTML = ""; + captchaHistory.forEach((captcha) => { + const listItem = document.createElement("li"); + listItem.textContent = captcha; + historyList.appendChild(listItem); + }); +}; + +// Function to play audio captcha +const playAudioCaptcha = () => { + const audio = new Audio('audio/captcha.mp3'); + audio.play(); }; -// Add event listeners for the refresh button, captchaInputBox, submit button +// Add event listeners for the refresh button, captchaInputBox, submit button, and audio captcha button refreshButton.addEventListener("click", refreshBtnClick); captchaInputBox.addEventListener("keyup", captchaKeyUpValidate); submitButton.addEventListener("click", submitBtnClick); +document.querySelector(".audio-captcha button").addEventListener("click", playAudioCaptcha); // Generate a captcha when the page loads -generateCaptcha(); \ No newline at end of file +generateCaptcha();