Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature Request: Audio CAPTCHA and CAPTCHA History #219

Merged
merged 1 commit into from
May 16, 2024
Merged

Feature Request: Audio CAPTCHA and CAPTCHA History #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 83 additions & 26 deletions Capcha Generator/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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();
Loading