Skip to content

Commit

Permalink
Merge pull request #2582 from P-lavanya16/my-feature-branch
Browse files Browse the repository at this point in the history 
Added levels to captcha generator
  • Loading branch information
@Sulagna-Dutta-Roy
Sulagna-Dutta-Roy authored Aug 2, 2024
2 parents 4748ad5 + 0bbab9b commit e8cfd29
Show file tree
Hide file tree
Showing 25 changed files with 1,795 additions and 690 deletions.
116 changes: 34 additions & 82 deletions Capcha Generator/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,43 @@
<!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 style="color: #333; font-size:22px;">Captcha Generator</header>
<div class="input_field captch_box">
<input id="captchaOutput" style="border: 1px solid #1e1b18" type="text" value="" />
<button class="refresh_button" id="refbut" onclick="generateCaptcha()">
<i class="fa-solid fa-rotate-left"></i>
</head>
<body>
<div class="container">
<header>Captcha Generator</header>
<div class="input_field captch_box">
<input type="text" id="captcha" value="" disabled />
<button class="refresh_button" aria-label="Refresh Captcha">
<i class="fa-solid fa-rotate-right"></i>
</button>
</div>
<div class="input_field captch_input">
<label for="captcha_input">Enter captcha</label>
<input type="text" id="captcha_input" placeholder="Enter captcha" />
</div>
<div class="message" id="message">Entered captcha is correct</div>
<div class="input_field button disabled">
<button id="submit_button">Submit Captcha</button>
</div>
<div class="difficulty">
<label for="difficulty">Select Difficulty:</label>
<select id="difficulty">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
</div>
<div class="error_message" id="error_message"></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 ">
<button onclick="checkCaptcha()" id="inputfield">Submit Captcha</button>
</div>
<div class="captcha-history">
<h4>Captcha History</h4>
<ul id="captchaHistoryList"></ul>
</div>
<div class="audio-captcha">
<button onclick="playAudioCaptcha()" id="audcaptch" >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();
}

// Generate initial captcha on page load
generateCaptcha();
</script>
</body>
<script src="scripts/script.js"></script>
</body>
</html>
68 changes: 35 additions & 33 deletions Capcha Generator/scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,74 +3,76 @@ const captchaTextBox = document.querySelector(".captch_box input");
const refreshButton = document.querySelector(".refresh_button");
const captchaInputBox = document.querySelector(".captch_input input");
const message = document.querySelector(".message");
const submitButton = document.querySelector(".button");
const submitButton = document.querySelector(".button button");
const difficultySelect = document.querySelector("#difficulty");

// Variable to store generated captcha and captcha history
// Variable to store generated captcha
let captchaText = null;
const captchaHistory = [];

// Function to generate captcha
const generateCaptcha = () => {
const randomString = Math.random().toString(36).substring(2, 7);
let captchaLength;

switch (difficultySelect.value) {
case "medium":
captchaLength = 7;
break;
case "hard":
captchaLength = 10;
break;
case "easy":
default:
captchaLength = 5;
break;
}

const randomString = Math.random().toString(36).substring(2, 2 + captchaLength);
const randomStringArray = randomString.split("");
const changeString = randomStringArray.map((char) => (Math.random() > 0.5 ? char.toUpperCase() : char));
captchaText = changeString.join(" ");
captchaTextBox.value = captchaText;
captchaHistory.unshift(captchaText); // Add generated captcha to history
console.log(captchaText);
};

// 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");
const isInputEmpty = !captchaInputBox.value.trim();
submitButton.parentElement.classList.toggle("disabled", isInputEmpty);

if (isInputEmpty) {
message.classList.remove("active");
}
};

// Function to handle submission of captcha
// Validation
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) {
swal("Verification Success..","Hooray!","success");
swal("Verification Success..", "Hooray!", "success");
message.innerText = "Entered captcha is correct";
message.style.color = "#1940a5";
} else {
swal("Incorrect!","Please enter the correct captcha.","warning")
swal("Incorrect!", "Please enter the correct captcha.", "warning");
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, and audio captcha button
// Add event listeners for the refresh button, captchaInputBox, submit button
refreshButton.addEventListener("click", refreshBtnClick);
captchaInputBox.addEventListener("keyup", captchaKeyUpValidate);
submitButton.addEventListener("click", submitBtnClick);
document.querySelector(".audio-captcha button").addEventListener("click", playAudioCaptcha);
difficultySelect.addEventListener("change", generateCaptcha);

// Generate a captcha when the page loads
generateCaptcha();
Loading

0 comments on commit e8cfd29

Please sign in to comment.