Skip to content

Commit

Permalink
updated captcha generator
Browse files Browse the repository at this point in the history 
Adding of audio captcha and captcha history that will help to genarate new captcha's in captcha generator project. #217
  • Loading branch information
@vyanky1227
vyanky1227 committed May 16, 2024
1 parent 742aa5f commit 6f05930
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 54 deletions.
109 changes: 83 additions & 26 deletions Capcha Generator/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,91 @@
<!-- captcha generator in js -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Captcha Generator</title>
<link rel="stylesheet" href="src/style.css" />
<link rel="stylesheet" href="src/style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<div class="container">
<header>Captcha Generator</header>
<div class="input_field captch_box">
<input type="text" value="" disabled />
<button class="refresh_button">
<i class="fa-solid fa-rotate-right"></i>
</head>
<body>
<div class="container">
<header>Captcha Generator</header>
<div class="input_field captch_box">
<input id="captchaOutput" type="text" value="" disabled />
<button class="refresh_button" onclick="generateCaptcha()">
<i class="fa-solid fa-rotate-right"></i>
</button>
</div>
<div class="input_field captch_input">
<input type="text" placeholder="Enter captcha" />
</div>
<div class="message">Entered captcha is correct</div>
<div class="input_field button disabled">
<button>Submit Captcha</button>
</div>
</div>
<div class="input_field captch_input">
<input id="captchaInput" type="text" placeholder="Enter captcha" />
</div>
<div id="message" class="message">Entered captcha is correct</div>
<div class="input_field button disabled">
<button onclick="checkCaptcha()">Submit Captcha</button>
</div>
<div class="captcha-history">
<h2>Captcha History</h2>
<ul id="captchaHistoryList"></ul>
</div>
<div class="audio-captcha">
<button onclick="playAudioCaptcha()">Play Audio Captcha</button>
<audio id="audioCaptcha" controls style="display: none;">
<source src="audio/captcha.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>

<script src="scripts/script.js"></script>
<script>
var captchaHistory = [];

function generateCaptcha() {
// Generate a random captcha
var captcha = Math.random().toString(36).slice(2, 8).toUpperCase();
document.getElementById("captchaOutput").value = captcha;
captchaHistory.unshift(captcha); // Add to history
}

function checkCaptcha() {
var inputCaptcha = document.getElementById("captchaInput").value.toUpperCase();
var generatedCaptcha = captchaHistory[0];
if (inputCaptcha === generatedCaptcha) {
// Correct captcha
document.getElementById("message").textContent = "Entered captcha is correct";
// Remove from history
captchaHistory.shift();
// Clear input field
document.getElementById("captchaInput").value = "";
// Regenerate captcha
generateCaptcha();
} else {
// Incorrect captcha
document.getElementById("message").textContent = "Entered captcha is incorrect";
}
updateCaptchaHistory();
}

function updateCaptchaHistory() {
var list = document.getElementById("captchaHistoryList");
list.innerHTML = "";
for (var i = 0; i < captchaHistory.length; i++) {
var listItem = document.createElement("li");
listItem.textContent = captchaHistory[i];
list.appendChild(listItem);
}
}

function playAudioCaptcha() {
var audio = document.getElementById("audioCaptcha");
audio.play();
}

<script src="scripts/script.js"></script>
</body>
</html>
// Generate initial captcha on page load
generateCaptcha();
</script>
</body>
</html>
41 changes: 24 additions & 17 deletions Capcha Generator/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -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": [
"<all_urls>"
],
"action": {
"default_popup": "index.html"
},
"web_accessible_resources": [
{
"resources": ["index.html"],
"matches": ["<all_urls>"]
},
"web_accessible_resources": [
{
"resources": ["index.html"],
"matches": ["<all_urls>"]
}
]
}

{
"resources": ["scripts/*", "src/*", "audio/*"],
"matches": ["<all_urls>"]
}
]
}
39 changes: 28 additions & 11 deletions Capcha Generator/scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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) {
Expand All @@ -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();
generateCaptcha();

0 comments on commit 6f05930

Please sign in to comment.